rpay.dart

class RazorpayService {
  final Function(RpaySuccessResponse) onSuccess;
  final Function(RpayCancelResponse) onCancel;
  final Function(RpayFailedResponse) onFailed;

  RazorpayService({
    required this.onSuccess,
    required this.onCancel,
    required this.onFailed,
  });

  /// start payment and provide
  /// payment options
  Future<Map<String, dynamic>> _startPaymentGateway({
    required String amount,
    required String currency,
    required String orderId,
    required String keyId,
    required String phoneNumber,
  }) {
    var completer = Completer<Map<String, dynamic>>();
    var dataMap = <String, dynamic>{};
    Map<String, dynamic> options = {};

    options["key"] = keyId;
    options["amount"] = amount;
    options["currency"] = currency;
    options["order_id"] = orderId;
    options['timeout'] = "240";
    options["name"] = "Nosh";
    options["description"] = "Nosh Transaction";
    options['send_sms_hash'] = true;
    options['handler'] = (response) => {
          dataMap['status'] = "success",
          dataMap['desc'] = "Payment success.",
          dataMap['paymentId'] = response['razorpay_payment_id'],
          dataMap['orderId'] = response['razorpay_order_id'],
          dataMap['signature'] = response['razorpay_signature'],
          completer.complete(dataMap)
        };
    options['modal.ondismiss'] = () => {
          if (!completer.isCompleted)
            {
              dataMap['status'] = "cancelled",
              dataMap['desc'] = "Payment processing cancelled by user",
              completer.complete(dataMap)
            }
        };
    options['retry'] = false;

    var jsObjOptions = js.JsObject.jsify(options);

    final failedCallback = js.allowInterop((response) {
      dataMap["status"] = "failed";
      dataMap["code"] = response['error']['code'];
      dataMap["desc"] = response['error']['description'];
      dataMap["source"] = response['error']['source'];
      dataMap["step"] = response['error']['step'];
      dataMap["reason"] = response['error']['reason'];
      dataMap["orderId"] = response['error']['metadata']['order_id'];
      dataMap["paymentId"] = response['error']['metadata']['payment_id'];
      completer.complete(dataMap);
    });

    js.context.callMethod(
      'startPayment',
      [jsObjOptions, failedCallback],
    );

    return completer.future;
  }

  /// parse json to data class and call
  /// <br>callbacks as per payment
  /// <br>status.
  void _handleResponse(Map<String, dynamic> result) {
    switch (result['status']) {
      case 'success':
        RpaySuccessResponse response = RpaySuccessResponse.fromMap(result);
        onSuccess(response);
        break;
      case 'failed':
        RpayFailedResponse response = RpayFailedResponse.fromMap(result);
        onFailed(response);
        break;
      case 'cancelled':
        RpayCancelResponse response = RpayCancelResponse.fromMap(result);
        onCancel(response);
        break;
    }
  }

  /// open razorpay payment gateway.
  void open({
    required String amount,
    required String currency,
    required String orderId,
    required String keyId,
    required String phoneNumber,
  }) async {
    final result = await _startPaymentGateway(
      amount: amount,
      currency: currency,
      orderId: orderId,
      keyId: keyId,
      phoneNumber: phoneNumber,
    );

    if (result.isNotEmpty) {
      _handleResponse(result);
    } else {
      _handleResponse({
        'status': 'cancelled',
        'desc': 'Payment processing cancelled due to interruption'
      });
    }
  }

  /// close razorpay payment gateway.
  void close() {
    js.context.callMethod('closePayment', []);
  }
}

rpay.js

class Rpay {
    openPaymentGateway(options, failedCallback) {
        // attach configuration as
        // per requirement.
        // e.g-
        // upi, card, netbanking, emi, wallet, and pay later.
        options["config"] = {
            "display":{
               "blocks":{
                  "utib":{
                     "name":"Pay using Axis Bank",
                     "instruments":[
                        {
                           "method":"card",
                           "issuers":[
                              "UTIB"
                           ]
                        },
                        {
                           "method":"netbanking",
                           "banks":[
                              "UTIB"
                           ]
                        }
                     ]
                  },
                  "other":{
                     "name":"Other Payment modes",
                     "instruments":[
                        {
                           "method":"card"
                        },
                        {
                           "method":"netbanking"
                        },
                        {
                           "method":"wallet"
                        }
                     ]
                  }
               },
               "hide":[
                  {
                     "method":"upi",
                  },
                  {
                      "method":"emi"
                  }
               ],
               "sequence":[
                  "block.utib",
                  "block.other"
               ],
               "preferences":{
                  "show_default_blocks":false
               }
            }
         };

        // assign options to razorpay
        this.rzp = new Razorpay(options);

        // payment on failed
        this.rzp.on('payment.failed', function (response) {
            console.log("payment failed");
            failedCallback(response);
        });

        // start payment
        this.rzp.open();
    }

    closePaymentGateway() {
        // terminated razorpay payment gateway
        this.rzp.close();
    }
}

// instance of Rpay class
const rPay = new Rpay();

// trigger start apyment
function startPayment(options, failedCallback) {
    rPay.openPaymentGateway(options, failedCallback);
}

// trigger close payment
function closePayment() {
    rPay.closePaymentGateway();
}