Payments in Flutter with Razorpay Payment Gateway

Harsh Bhalala
2 min readJun 17, 2021

--

Razorpay is one of the best payment gateways which provided plugin in a flutter. Razorpay is the only payment solution in India that allows businesses to accept, process, and disburse payments with its product suite. It gives you access to all payment methods like a credit card, debit card, Net Banking, UPI, and external wallet.

Talking about the Integration of Razorpay with your Flutter app is very easy and it can be done in less than 30 minutes from the following steps.

Okay, so let’s Start!

Step 1 :

Generate an API key

  1. Create an account on Razorpay from Here.
  2. Select either Test mode or Live mode for which you need to create an API key.
  3. Go to Settings -> API Keys -> Generate Key.

This way you can generate your API key.

Step 2 :

Create a flutter project or use an existing project.

Add dependencies to pubspec.yaml file.

Step 3 :

Import package in your flutter project.

Note: For Android, the minimum API level for your app is 19 or higher.

For iOS, Make sure that the minimum deployment target for your app is iOS 10.0 or higher.

Step 4 :

Create Razorpay instance in your file.

Step 5 :

Attach Event Listners.

The event names are exposed via the constants EVENT_PAYMENT_SUCCESS, EVENT_PAYMENT_ERROR, and EVENT_EXTERNAL_WALLET from Razorpay class.

Use the on(String event, Function handler) method on the Razorpay instance to attach event listeners in init state of stateful widget.

Step 6 :

Define handler functions with what you want to do when payment success, fails, or with the external wallet.

Step 7 :

Add Checkout Function.

Introduce the details in options and pass your Razorpay key Id here.

If you want to add any external wallet, For example you want to add paytm wallet then you can add it like this:

Note: For ‘amount’ key we have to multiply the number by 100, because by default number divided by 100 for values like 3.14, 25.67, etc…

Step 8 :

Open checkout.

Step 9:

To clear event listeners, use the clear method on the Razorpay instance.

If you want to see an example of this then check out here.

So, it is so easy to add Razorpay payment gateway to our Flutter app.

Thanks for reading this article❤

--

--

Harsh Bhalala
Harsh Bhalala

No responses yet