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

Question

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 **

Answer 1

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: "[email protected]",
              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.