How to Integrate Razorpay Payment Gateway in Flutter?

Razorpay helps process online payments for online as well as offline businesses. Razor pay allows you to accept credit cards, debit cards, net banking, wallet, and UPI payments with the Mobile App integration. It uses a seamless integration, allowing the customer to pay on your app/website without being redirected away. In this article, we will take a look at the implementation of a payment gateway in our Flutter app.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add Razorpay in pubspec.yaml file

Add Razorpay package to your flutter projects

// add package
razorpay_flutter: ^1.3.4 

Version may vary depending upon the time you read this article.

Step 3: Get API_key and API_secret for Razorpay

Browser the Razorpay site in Google or you can click on the link here. After clicking on this link you simply have to signup with your email and password and add some basic information such as your phone number.

Note: Here we are creating a testing credential for using Razor Pay.

Inside the setting screen, click on Create a new key option your key will be generated. We will be using key ID in our application to test Razor pay. The key-id will start with rzp_test.

To store Razor pay key and secret in the flutter app (Without sharing it on github,gitlabs). You can refer to this article: How to Add .env File in Flutter

Step 4: Create Razorpay Instance

To access all functions, and variables of Razorpay you have to create the instance for that.

// Instance of razor pay
final Razorpay _razorpay = Razorpay(); 

Step 5: Attach Event listeners

To perform different functions on every event that happens in Razorpay you have to handle different scenarios.

1. Create functions to handle different events

void _handlePaymentSuccess(PaymentSuccessResponse response) {
  // Do something when payment succeeds
}

void _handlePaymentError(PaymentFailureResponse response) {
  // Do something when payment fails
}

void _handleExternalWallet(ExternalWalletResponse response) {
  // Do something when an external wallet is selected
}

2. Attach these functions to event listeners

In this, you have to attach the previous  function to events listeners by this

 initiateRazorPay() {
    // To handle different event with previous functions 
    _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
    _razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
    _razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
  }

Step 6: Create order in Razorpay

Either you can create an order id from the server using the Razorpay api secret and api key or you can create an order id in the app itself. This postman request you will be required to create an order id

curl -X POST https://api.razorpay.com/v1/orders
-u [YOUR_KEY_ID]:[YOUR_KEY_SECRET]
-H 'content-type:application/json'
-d '{
    "amount": 100, 
    "currency": "INR",
    "receipt": "rcptid_11"  //receipt id you want to give
}'
  

To create order Id in the app itself:

import 'dart:convert';

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:http/http.dart' as http;

class ApiServices {
  final razorPayKey = dotenv.get("RAZOR_KEY");
  final razorPaySecret = dotenv.get("RAZOR_SECRET");

  razorPayApi(num amount, String receiptId) async {
    var auth =
        'Basic ' + base64Encode(utf8.encode('$razorPayKey:$razorPaySecret'));
    var headers = {'content-type': 'application/json', 'Authorization': auth};
    var request =
        http.Request('POST', Uri.parse('https://api.razorpay.com/v1/orders'));
    request.body = json.encode({
      // Amount in smallest unit
      // like in paise for INR
      "amount": amount * 100, 
      // Currency
      "currency": "INR", 
      // Receipt Id
      "receipt": receiptId 
    });
    request.headers.addAll(headers);

    http.StreamedResponse response = await request.send();
    print(response.statusCode);
    if (response.statusCode == 200) {
      return {
        "status": "success",
        "body": jsonDecode(await response.stream.bytesToString())
      };
    } else {
      return {"status": "fail", "message": (response.reasonPhrase)};
    }
  }
}

Sample Response for this API 

{
    "id": "order_DBJOWzybf0sJbb",
    "entity": "order",
    "amount": 100,
    "amount_paid": 0,
    "amount_due": 100,
    "currency": "INR",
    "receipt": "rcptid_11",
    "status": "created",
    "attempts": 0,
    "notes": [],
    "created_at": 1566986570
}

Create order in Your flutter app:

How to call Create an order

Note: You can put your amount in place of 100. You have to add the amount in integer value only and razor pay takes the amount in a smaller unit for example in India it takes the amount in paise. For the USA it takes in cents.

Store this ID in a variable. It will be requiring in when you open checkout sessions.

Step 7: Add checkout sessions

Create order id by calling create order function and prepare the parameter to be sent to the Razorpay checkout page 

// to get orderid by creating new order everytime
// you try to open razorpay checkout page  
createOrder(amount: amount).then((orderId) {
      print(orderId);
      if (orderId.toString().isNotEmpty) {
        var options = {
          // Razorpay API Key
          'key': razorPayKey, 
          // in the smallest 
          // currency sub-unit.
          'amount': amount, 
          'name': 'Company Name.',
          // Generate order_id 
          // using Orders API
          'order_id': orderId, 
          // Order Description to be 
          // shown in razor pay page
          'description':
              'Description for order', 
          // in seconds
          'timeout': 60, 
          'prefill': {
            'contact': '9123456789',
            'email': '[email protected]'
          } // contact number and email id of user
        };
       
      } else {}
    });

Step 8: Open Checkout Page

Now just open the checkout page and pay with different payment methods

_razorpay.open(options);

Step 9: Store fields in the server

For a better user experience and data security kept these 3 fields in your database. This will be returned in the successful event function if the transaction is successfully made.

{
  "razorpay_payment_id": "pay_29QQoUBi66xm2f",
  "razorpay_order_id": "order_9A33XWu170gUtm",
  "razorpay_signature": "9ef4dffbfd84f1318f6739a3ce19f9d85851857ae648f114332d8401e0949a3d"
}

Step 10: Verify signature and payment

This step is necessary to verify the validity of the information returned to the Checkout form for successful payments.

generated_signature = hmac_sha256(order_id + "|" + razorpay_payment_id, secret);

 if (generated_signature == razorpay_signature) {
   payment is successful
 }

Output:

Github Source Code: Click here

flutterwings

Follow

Improve

Article Tags :

• GBlog
• Technical Scripter
• Flutter
• Technical Scripter 2022