flutterflutter-dependenciesflutter-web

I am not able to Razorpay payment getway intigretion in Flutter web, could you help me in this


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          body: Container(
            child: Column(
              children: [
                SizedBox(
                  height: 50,
                ),
                Image.network(
                  'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXBwbGUlMjBsYXB0b3B8ZW58MHx8MHx8&w=1000&q=80',
                  height: 250,
                  width: 350,
                ),
                SizedBox(
                  height: 20,
                ),
                Text('macbook pro'),
                SizedBox(
                  height: 20,
                ),
                Text('description'),
                SizedBox(
                  height: 20,
                ),
                Text('rs200000'),
                SizedBox(
                  height: 20,
                ),
                ElevatedButton(onPressed: () {}, child: Text('buy now'))
              ],
            ),
          ),
        ));
  }
}

Let's suppose this is the project then when we click on buynow button then razorpay popup should be open in website

**Could you guys help me in this because I think razorpay doesn't provide any plugin for Flutter web **


Solution

  • Add this package razorpay_web: ^1.1.0 in pubspec.yaml file

    Then copy the full code and paste in main.dart and run it works then enjoy..

    import 'dart:developer';
    
    import 'package:flutter/material.dart';
    import 'package:razorpay_web/razorpay_web.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: Scaffold(
              body: Container(
                child: Column(
                  children: [
                    SizedBox(
                      height: 50,
                    ),
                    Image.network(
                      'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXBwbGUlMjBsYXB0b3B8ZW58MHx8MHx8&w=1000&q=80',
                      height: 250,
                      width: 350,
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('macbook pro'),
                    SizedBox(
                      height: 20,
                    ),
                    Text('description'),
                    SizedBox(
                      height: 20,
                    ),
                    Text('rs200000'),
                    SizedBox(
                      height: 20,
                    ),
                    Builder(
                      builder: (context) => Center(
                        child: RaisedButton(
                          color: Colors.blue,
                          child: Text("Buy Now"),
                          onPressed: () => Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => Payments()),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ));
      }
    }
    
    class Payments extends StatefulWidget {
      const Payments({Key? key}) : super(key: key);
    
      @override
      _PaymentsState createState() => _PaymentsState();
    }
    
    class _PaymentsState extends State<Payments> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: RazorpayWeb(
              rzpKey: "rzp_test_DNaSxot4oJHykG", // Enter Your Razorpay Key Here
              options: RzpOptions(
                amount: 1000,
                name: "Razorpay",
                description: "Test Payment",
                image: "https://i.imgur.com/3g7nmJC.png",
                prefill: const PrefillData(
                  name: "Razorpay",
                  email: "rzp@gmail.com",
                  contact: "9876543210",
                ),
                colorhex: "#FF0000",
              ),
              onPaymentSuccess: (String paymentId) {
                print("Payment Success");
                log(paymentId);
              },
              onPaymentError: (String error) {
                print("Payment Error");
              },
            ),
          ),
        );
      }
    }
    

    If payment is successful onPaymentSuccess Function will contain the payment_id from razorpay.