flutter_razorpay_web 0.0.3 copy "flutter_razorpay_web: ^0.0.3" to clipboard
flutter_razorpay_web: ^0.0.3 copied to clipboard

Package for razorpay web is designed to facilitate smooth integration of Razorpay's payment gateway services specifically for web-based Flutter applications.

Flutter Razorpay Web Plugin

"flutter_razorpay_web" is a Flutter plugin designed to facilitate smooth integration of Razorpay's payment gateway services specifically for web-based Flutter applications.

48184454-17c1bc80-e358-11e8-8821-269a30935a68

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

flutter_razorpay_web: ^latest

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

Demo #

3

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>

Usage #

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

  @override
  void initState() {
    super.initState();

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

Clear/close

  @override
  void dispose() {
    _razorpayWeb.clear();

    super.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
    /// generate order id on your backend otherwise you may face CORS-policy issue in web.

    /// after generation of order id, then call _makePayment
    _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}
    };

    /// config razorpay payment methods.
    /// This is a "optional" step if you want
    /// to customize your payment methods then use this step "options["config"]",
    /// otherwise you can skip this step .
    /// You can also modify as per your requirements.
    /// Ref: https://razorpay.com/docs/api/payments/payment-links/customise-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}
      }
    };
  }
12
likes
60
points
271
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Package for razorpay web is designed to facilitate smooth integration of Razorpay's payment gateway services specifically for web-based Flutter applications.

Homepage
Repository (GitHub)
View/report issues

License

MIT (license)

Dependencies

flutter, js

More

Packages that depend on flutter_razorpay_web

Packages that implement flutter_razorpay_web