Flutter Razorpay Web Plugin

Flutter Razorpay Web Plugin

Flutter Razorpay Web Plugin

Add this to dependencies in your app’s pubspec.yaml

flutter_razorpay_web: ^0.0.1

Run flutter packages get in the root directory of your app.


Flutter Razorpay Web Plugin

Important step

Include checkout.js in index.html file inside your web folder

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

For e.g,-

<body> <script> window.addEventListener('load', function(ev) { // Download main.dart.js _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: serviceWorkerVersion, }, onEntrypointLoaded: function(engineInitializer) { engineInitializer.initializeEngine().then(function(appRunner) { appRunner.runApp(); }); } }); }); </script> <!-- razorpay checkout lib --> <script src="https://checkout.razorpay.com/v1/checkout.js"></script> </body>


Sample code to integrate

Import package

import 'package:flutter_razorpay_web/flutter_razorpay_web.dart';

create instance

late RazorpayWeb _razorpayWeb;

The handle events as per razorpay response

  void _onSuccess(RpaySuccessResponse response) {
    // todo: your logic

  void _onCancel(RpayCancelResponse response) {
    // todo: your logic

  void _onFailed(RpayFailedResponse response) {
    // todo: your logic

Configure methods

  void initState() {

    _razorpayWeb = RazorpayWeb(
      onSuccess: _onSuccess,
      onCancel: _onCancel,
      onFailed: _onFailed,


  void dispose() {


Now open razopay payment gateway

void getOrderId() {
    // todo: generate order id as per razorpay official documentation.
    // ref: https://razorpay.com/docs/payments/server-integration/nodejs/payment-gateway/build-integration/#13-create-an-order-in-server
    // implement this on your backend otherwise you may face CORS-policy issue in web

    // then call _makePayment
      amount: '100',
      orderId: 'order_DaZlswtdcn9UNV',
      keyId: 'test_Lxtrdfhfvdhja',

  void _makePayment({
    required String amount,
    required String orderId,
    required String keyId,
  }) {
    // create payment options
    // you can modify as per your requirements
    // ref: https://razorpay.com/docs/payments/server-integration/nodejs/payment-gateway/build-integration/#code-to-add-pay-button
    final Map<String, dynamic> options = {
      "key": keyId,
      "amount": amount,
      "currency": "INR",
      "order_id": orderId,
      "timeout": "240",
      "name": "Your Organization Name",
      "description": "your description",
      "prefill": {"contact": "+910000000000"},
      "readonly": {"contact": true, "email": true},
      "send_sms_hash": true,
      "remember_customer": false,
      "retry": {"enabled": false},
      "hidden": {"contact": false, "email": false}

    // customise razorpay payment methods
    // you can modify as per your requirements
   // ref: https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/configure-payment-methods/
    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}


View Github

Entradas similares

Deja una respuesta