Razorpay Integration in the Flutter App – A Complete Guide

Hi, coders hope you all are doing good, in this post, we will learn how to integrate Razorpay into the flutter application. Razorpay is an online payment solution also the fastest growing company in India. …

payment integration flutter

Hi, coders hope you all are doing good, in this post, we will learn how to integrate Razorpay into the flutter application.

Razorpay is an online payment solution also the fastest growing company in India.

Razorpay allows your business to accept, process, and disburse payments via its product suite.

Nowadays most companies are using Razorpay in their application like Spicejet, BookMyShow, Nykaa, Urbanclap, Zoho, Zomato, Goibibo, and many more. Razorpay provides UPI, credit & debit cards, and mobile wallet payment modes.

So, Now Let’s start step by step guide to integrating Razorpay into a flutter application

Package/Plugin Required to Check Internet Connection

  1. razorpay_flutter
  2. http
  3. fluttertoast

Razorpay flutter – is a plugin to integrate Razorpay into your flutter application and accept payment from users. This plugin supports both Android and iOS. You can check out the documentation given below:

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

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

This plugin works on event-based communication and emits the event either payment succeeded or fail.

The events are:

EVENT_PAYMENT_SUCCESS – Payment Successful

EVENT_PAYMENT_ERROR – Error occurs while payment

EVENT_EXTERNAL_WALLET – The external wallet selected for payment

These events are assigned as constants in Razorpay class. The handling of events by creating a listener method, each event has its own listener method, you can see the code below:

To clear the listener use the clear() method:

http – is a flutter plugin that allows playing with HTTP requests with minimal hassle. http plugin supports multiplatform Android, iOS, Windows, MAC …etc.

fluttertoast – is a flutter plugin that is used to show a toast message in your flutter application.

You can add these three packages to your pubsec.yaml file in the dependencies section.

After adding this to your dependencies use the “flutter pub get” command to get this in your dependencies.

Steps to Razorpay integration in Flutter

First of all, you have to set up your Razorpay account. Follow the steps given below:

  1. Create a Razorpay account here and log in to Dashboard.
  2. Select the mode (Test – testing purpose, Live – is used in production mode),
  3. Go to Settings where you can see API Keys.generate-api-key-secret-key
  4. Go to the API Keys section and generate API Key & Secret key.


  1. Now, you must generate the basic auth token that secures your payment.
  2. Open Postman, create a new tab, and input https://api.razorpay.com/v1/payments with the POST method.Razorpay-basic-auth-token-generation-using-Postman
  3. Go to the authorization section select TYPE > Basic Auth, then input your razorpay API key with the secret key and send the request.input-api-key-secret-key
  4. Now, go to the header section, and you can see the basic token automatically generated.


Now, moving to the app, Create a file name payment_screen.dart .

Import packages by given below code

Create an instance of Razorpay class by adding the below code

Now, initialize the instance and payment event listeners into initState()  function.

Create handling methods that show a toast message

Now, create a function createOrder(), in this function, we create an order using Razorpay API that requires the Basic auth token, Amount, currency, and receipt name.

If the API response success then you get the total details of your order and the response saved in the model.

Create a model with the name razorpay_response_model.dart

Now, create one more function openCheckout()  that required  API key, order id, amount, name, and description these details are stored in the options variable, and pass this variable in the _razorpay.open(options)  function that open payment interface.

Now, call createOrder()  function to make payment.


Razorpay integration in the flutter app


So, We successfully integrate Razorpay into our flutter application. I hope you enjoyed it and learned something. The complete code is available on GitHub. If you think this post was helpful, please share it with your friends. Thank You 🙂

Hi, I am Abhishek Kumar, a Flutter Developer, Problem solver & technical writer. For the past year, I am solving problems and implementing them as Apps using Flutter & Dart.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x