Razorpay Payment Gateway Implementation Tutorial

It has been a quite few times people from India asks for a working method to implement Razorpay Payment Gateway in you FlutterFLow App, I thought I would write this tutorial to implement the same in their app.

First step to implement payment gateway in you app is to Sign-Up on Razorpay Website. Get the TEST-KEY from you account.

Create Local State in FlutterFlow called "OrderId" with "String"

On your payment implementation page call for the PAYMENT ORDER ID API and save the Order ID in local state. Every time you launch your payment page, the Order ID API should be triggered and response (Order ID) has to be stored in the local state.

Create another Local State in FlutterFlow called "RazorPayState2" with "JSON"

Now when you are in Custom Widget page, create a Widget called "RazorPay".

Add the following Parameters:

width and height (Select Dimensions)
amount (Select Integer)
name (Select String)
description (Select String)
contact (Select String)
email (Select String)
orderId (Select String)
color (Select color)
action (Select action)

Now you have to add the following Dependencies:
razorpay_flutter: ^1.3.3
fluttertoast: ^8.0.9
eventify: ^1.0.0

In Line Number 84 you will have to replace "YOUR-OWN-SECRET-KEY" with actual key you get from your account.

Copy the code to your code editor and you are good to go. Pass all the added parameters from your payment page to this Custom Widget. Please do not change the Spellings or Letter Case everything has its meaning in the following code.

NOTE: This widget will not work on TEST MODE or RUN MODE you have to test it on real device.

Please let me know if it works for you guys...

import 'package:flutter/services.dart';
import 'package:razorpay_flutter/razorpay_flutter.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:eventify/eventify.dart';


class RazorPay extends StatefulWidget {
  const RazorPay({
    Key? key,
    this.width,
    this.height,
    this.amount,
    this.name,
    this.description,
    this.contact,
    this.email,
    this.orderId,
    this.color,
    required this.action,
  }) : super(key: key);

  final double? width;
  final double? height;
  final int? amount;
  final String? name;
  final String? description;
  final String? contact;
  final String? email;
  final String? orderId;
  final Color? color;
  final Future<dynamic> Function() action;

  @override
  _RazorPayState createState() => _RazorPayState();
}

class _RazorPayState extends State<RazorPay> {
  static const platform = const MethodChannel("razorpay_flutter");
  late Razorpay _razorpay;

  @override
  Widget build(BuildContext context) {
    return Center(
        child:
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
      ElevatedButton(
        style: ElevatedButton.styleFrom(
       primary: (widget.color), //background color of button
       //side: BorderSide(width:2, color:Colors.lightBlueAccent), //border width and color
       elevation: 3, //elevation of button
       shape: RoundedRectangleBorder( //to set border radius to button
                borderRadius: BorderRadius.circular(30)
            ),
        padding: EdgeInsets.all(20) //content padding inside button
   ),
        
        
        //ButtonStyle(
          
            //backgroundColor: MaterialStateProperty.all<Color?>(widget.color)),
        onPressed: openCheckout,
        child: Text('Pay Now ₹ ' + (widget.amount! / 100).toString()),
      )
    ]));
  }

  @override
  void initState() {
    super.initState();
    _razorpay = Razorpay();
    _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
    _razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
    _razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
  }

  @override
  void dispose() {
    super.dispose();
    _razorpay.clear();
  }

  void openCheckout() async {
    var options = {
      'key': 'YOUR-OWN-SECRET-KEY',
      'amount': widget.amount,
      'name': widget.name,
      'order_id': widget.orderId,
      'description': widget.description,
      'retry': {'enabled': true, 'max_count': 1},
      'send_sms_hash': true,
      'prefill': {'contact': widget.contact, 'email': widget.email},
      'external': {'wallets': []}
    };

    try {
      _razorpay.open(options);
    } catch (e) {
      debugPrint('Error: e');
    }
  }

  _handlePaymentSuccess(PaymentSuccessResponse response) {
    //Fluttertoast.showToast(
    // msg: "SUCCESS: " + response.paymentId, toastLength: Toast.LENGTH_SHORT);
    
    setState(() => FFAppState().RazorPayState2 = {
          "payment_status": "success",
          "payment_response": response.paymentId
        });
    widget.action.call();
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    Fluttertoast.showToast(
        msg: "ERROR: " + response.code.toString() + " - " + response.message!,
        toastLength: Toast.LENGTH_SHORT);
    setState(() => FFAppState().RazorPayState2 = {
          "payment_status": "payment_error",
          "payment_response":
              response.code.toString() + " - " + response.message!
        });
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    //Fluttertoast.showToast(
    // msg: "EXTERNAL_WALLET: " + response.walletName,
    // toastLength: Toast.LENGTH_SHORT);
    setState(() => FFAppState().RazorPayState2 = {
          "payment_status": "external_wallet",
          "payment_response": response.walletName
        });
  }
}