Home Flutter RazorPay Payment integration in flutter with source code example

Flutter

RazorPay Payment integration in flutter with source code example

December 3, 2022

1387

In this Flutter Article let’s explore about Razorpay a payment gateway and learn how to integration it into our flutter application.

What is Razorpay

Razor pay if basically a payment gateway/portal, A secure payments service provider called Razorpay (www.razorpay.com) accepts a variety of payment methods, including credit and debit cards, UPI, and some mobile wallets.

Through its product line, Razorpay enables your company to accept, handle, and distribute payments. One of the greatest payment gateways that offers a plugin quickly is Razor Pay. We started working with Razorpay because they had the easiest in-product payment widget to integrate, but we have continued to work with them because of their prompt and consistent support for both problem resolution and adding new features.

The majority of businesses today, like Zomato, Goibibo, Zoho, Spicejet, BookMyShow, Nykaa, Urbanclap, and many others, use Razorpay in their

applications. Razorpay offers mobile wallets, credit and debit cards, and UPI as payment options. The fastest growing firm in India and a provider of online payment services is Razorpay.

How does razorpay work

Razorpay contacts the acquiring bank with a capture request on behalf of the merchant. After that, the funds are transferred from the issuing bank to the acquiring bank. The transaction money is then settled to the merchant by Razorpay in collaboration with the acquiring bank.

Therefore, let’s begin the step-by-step tutorial for adding Razorpay to a flutter application.

Getting Started

Razorpay Payment Gateway

1. Create a Account/Login into razorpay

Firstly you need to create a account and get signIn into razorpay and access the dashboard.

2. Get API key from razorpay

Here choose whether you are willing for testing or live, depending on that create an API key as show below.

1. For a key to be generated for the selected mode (testing or live), navigate to Settings API Generate Key.

Note for key:

For the test and live modes, distinct API Keys must be generated. In test mode, no money is taken from your real account.

Razorpay Integration in flutter

Create or open a flutter application where you want to payment gateway to accept payments from your app user.

Implementation:

Step 1: Adding Required external dependencies

razorpay_flutter: any
http: any
fluttertoast: any

http:

Http is a flutter plugin that will help you in making HTTP requests.

fluttertoast

enables you to display a toast message in your flutter.

razorpay_flutter:

Is a plugin that allows you to include Razorpay into your flutter application and take user payments. Both iOS and Android are supported by this plugin. You can review the following documentation:

Android: https://razorpay.com/docs/checkout/android/

iOS: https://razorpay.com/docs/ios/

Step 2: Import razorpay_flutter

Now you need to import it where you want to integrate payment portal.

import 'package:razorpay_flutter/razorpay_flutter.dart';

Notes about Android/IOS platform requirement:

The required minimum version is:
Make sure your app’s base minimum API level is 19 or greater for Android.

Make sure iOS 10.0 or above is the minimum deployment target for your app. Remember to enable bitcode for your project as well.

Step 3: Implementing razor pay in flutter

Make an instance of Razorpay:

To create a Razorpay instance, use this code.

Razorpay? _razorpay = Razorpay();

Event Listeners:

This plugin uses event-based communication and emits the event of a successful or unsuccessful payment.

The constants

EVENT PAYMENT SUCCESS.
EVENT PAYMENT ERROR.
EVENT EXTERNAL WALLET.

To add event listeners, use the Razorpay instance’s on(String event, Function handler) method.

EVENT PAYMENT SUCCESS - for Successful payment
EVENT PAYMENT ERROR - for Error while payment is recorded
EVENT EXTERNAL WALLET - for The external wallet that was used for payment

In the Razorpay class, these events are designated as constants. The following code demonstrates how to handle events by establishing listener methods for each individual event:

Events is:

 @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);
  }

initial step to create Instance is completed, Now let’s move to app page creation for payment gateway integration in flutter app.

Create a file name payment_page.dart

Import following package

import 'package:fluttertoast/fluttertoast.dart';
import 'package:razorpay_flutter/razorpay_flutter.dart';

Now, The razorpay instance and payment event listeners should now be initialized in the initState() function.

 @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);
  }

function to handle razorpay payment

void _handlePaymentSuccess(PaymentSuccessResponse response) {
    Fluttertoast.showToast(
        msg: "SUCCESS PAYMENT: ${response.paymentId}", timeInSecForIosWeb: 4);
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    Fluttertoast.showToast(
        msg: "ERROR HERE: ${response.code} - ${response.message}",
        timeInSecForIosWeb: 4);
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    Fluttertoast.showToast(
        msg: "EXTERNAL_WALLET IS : ${response.walletName}",
        timeInSecForIosWeb: 4);
  }

Here I am simply showing a toast message whenever any payment event happens.

Function that opens payment interface

To open the payment interface, create a function called openPaymentPortal() that takes several parameters like:

API key.
order id.
amount.
name.
description.

These parameters are stored in the options variable, which is passed to the razorpay.open function.

Razorpay option request parameter

key:	Your API key that you get for razorpay dashboard in setting option.
amount:	Her the amount for the transaction should by passed. The amount should be in paise in case of INR. Eg: Rs. 300 is the transaction amt, them the value to be passed in this option field should be 30000.
currency:	Length must be 3 char, The currency transaction should be make Eg:INR. see the supported currencies list.
name:	A business name shown during payment checkout.
prefill:	Contact: A Phone number of your customer. Email: A Email Id of your customer.

void openPaymentPortal() async {
    var options = {
      'key': 'rzp_test_YjOu38M2dxdNJ5',
      'amount': 200,
      'name': 'jhon',
      'description': 'Payment',
      'prefill': {'contact': '9999999999', 'email': 'jhon@razorpay.com'},
      'external': {
        'wallets': ['paytm']
      }
    };

    try {
      _razorpay?.open(options);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

Now Create a Button when clicked calls openPaymentPortal() and proceed to payment.

 InkWell(
            onTap: () {
              openChecF();
            },
            child: Padding(
              padding: const EdgeInsets.only(left: 18.0, right: 18),
              child: Container(
                  width: MediaQuery.of(context).size.width - 60.0,
                  height: 50.0,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.blue.shade900),
                  child: Center(
                      child: Text('Pay',
                          style: TextStyle(
                              fontSize: 16.0,
                              fontWeight: FontWeight.w900,
                              color: Colors.blue.shade50),
              ),
          ),
       ),
   ),
)

Response to successful payment:

Payment_id: string the payment’s ID.

Order iD: If the payment was for an order, the order ID; otherwise, null.

Signature: string the signature that will be used to confirm payment. Only applicable to orders; if not.

Response to a failed

Code value : integer the error message

message value : message the message of error.

Response to a External Wallet Response:

String the chosen external wallet’s name.

Complete Source Code – Flutter RazorPay implementation

main.dart

From main page I am simple rendering payment page.

import 'package:flutter/material.dart';
import 'paymentPage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Razorpay implement app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PaymentPage(),
    );
  }
}

paymentPage.dart

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:razorpay_flutter/razorpay_flutter.dart';

class PaymentPage extends StatefulWidget {
  const PaymentPage({Key? key}) : super(key: key);

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

class _PaymentPageState extends State<PaymentPage> {
  Razorpay? _razorpay;

  @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 openPaymentPortal() async {
    var options = {
      'key': 'rzp_test_YjOu38M2dxdNJ5',
      'amount': 20000,
      'name': 'jhon',
      'description': 'Payment',
      'prefill': {'contact': '9999999999', 'email': 'jhon@razorpay.com'},
      'external': {
        'wallets': ['paytm']
      }
    };

    try {
      _razorpay?.open(options);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    Fluttertoast.showToast(
        msg: "SUCCESS PAYMENT: ${response.paymentId}", timeInSecForIosWeb: 4);
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    Fluttertoast.showToast(
        msg: "ERROR HERE: ${response.code} - ${response.message}",
        timeInSecForIosWeb: 4);
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    Fluttertoast.showToast(
        msg: "EXTERNAL_WALLET IS : ${response.walletName}",
        timeInSecForIosWeb: 4);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.blue.shade900),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        title: const Text('Payment',
            style: TextStyle(fontSize: 22.0, color: Color(0xFF545D68))),
      ),
      body: Column(children: [
        const SizedBox(height: 16.0),
        Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Card(
              child: Column(
                children: <Widget>[
                  Text(
                    '\$1.88',
                    style: TextStyle(
                        fontSize: 22.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.blue.shade900),
                  ),
                  const SizedBox(height: 10.0),
                  const Text(' Ice Cream',
                      style: TextStyle(color: Colors.grey, fontSize: 24.0)),
                ],
              ),
            ),
          ),
        ),
        const SizedBox(height: 18.0),
        InkWell(
            onTap: () {
              openPaymentPortal();
            },
            child: Padding(
              padding: const EdgeInsets.only(left: 18.0, right: 18),
              child: Container(
                  width: MediaQuery.of(context).size.width - 60.0,
                  height: 50.0,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.blue.shade900),
                  child: Center(
                      child: Text('Pay',
                          style: TextStyle(
                              fontSize: 16.0,
                              fontWeight: FontWeight.w900,
                              color: Colors.blue.shade50)))),
            ))
      ]),
    );
  }
}

Conclusion

The above is a small flutter example that help you to integrate Razorpay payment. In this code, you will see how to add Razorpay to flutter app and how to acquire an order with online payment. The below image demonstrates how Razorpay Payment will function.

Thanks for spending time reading this content…..

The source code for this App , connected with Razorpay may be seen on GitHub please click here -> https://github.com/Mitali8620/razorpay_flutter.git

What is Razorpay

How does razorpay work

Razorpay Payment Gateway

1. Create a Account/Login into razorpay

2. Get API key from razorpay

Razorpay Integration in flutter

Step 1: Adding Required external dependencies

Step 2: Import razorpay_flutter

Step 3: Implementing razor pay in flutter

Razorpay option request parameter

Complete Source Code – Flutter RazorPay implementation

RELATED ARTICLESMORE FROM AUTHOR

Flutter Dart `then` vs `whenComplete` vs `catchError`

Multiple Listview in Flutter

Build Chat AI in Flutter using Google Gemini AI API – Source Code

Ways to Iterate through object JavaScript – Object Iteration

RELATED ARTICLES MORE FROM AUTHOR