1. Build Integration

1.1 Install Razorpay Flutter Plugin

1.2 Add Dependencies

Add the below code to dependencies in your app's pubspec.yaml:

razorpay_flutter_customui: 1.0.0

Add Proguard Rules (Android Only)

If you are using Proguard for your builds, you need to add the following lines to the Proguard files:

-keepattributes *Annotation*
-dontwarn com.razorpay.**
-keep class com.razorpay.** {*;}
-optimizations !method/inlining/
-keepclasseswithmembers class * {
  public void onPayment*(...);
}

Know more about

Get Packages

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

1.3 Import Package

Use the below code to import the razorpay_flutter_customui.dart file to your project:

import 'package:razorpay_flutter_customui/razorpay_flutter_customui.dart';

1.4 Create Razorpay instance

For Android, use the below code to create a Razorpay instance:

_razorpay = Razorpay();

For iOS, you need to initialise and instantiate the SDK using the following method:

@override
void initState() {
  _razorpay = Razorpay();
  _razorpay.initializeSDK(key);
}

1.5 Attach Event Listeners

The plugin uses event-based communication and emits events when payments fail or succeed.

• The event names are exposed via the constants EVENT_PAYMENT_SUCCESS and EVENT_PAYMENT_ERROR from the Razorpay class.
• Use the on(String event, Function handler) method on the Razorpay instance to attach event listeners.

_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);

The handlers would be defined in the class as:

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

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

1.6 Create an Order in Server

Order is an important step in the payment process.

• An order should be created for every payment.
• You can create an order using the

  Orders API

  . It is a server-side API call. Know how to

  authenticate

  Orders API.
• The order_id received in the response should be passed to the checkout. This ties the order with the payment and secures the request from being tampered.

API Sample Code

Use this endpoint to create an order using the Orders API.

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": "MYR",
   "receipt": "qwsaq1",
   "partial_payment": true,
   "first_payment_min_amount": 230,
   "notes": {
     "key1": "value3",
     "key2": "value2"
   }
 }'

1.7 Add Checkout Options

Pass the Checkout options. Ensure that you pass the order_id that you received in the response of the previous step.

var options = {
                "key": key,
                "amount": 29935,
                "order_id": "order_EMBFqjDHEEn80l", // Generate order_id using Orders API,
                "card[cvv]": <CVV>,
                "card[expiry_month]": 11,
                "card[expiry_year]": 25,
                "card[name]": "Test User",
                "card[number]": "4111111111111111",
                "contact": "9900990099",
                "currency": "INR",
                "email": "gaurav.kumar@example.com",
                "description": "Fine T-Shirt",
                "method": "card"
            };
        _razorpay.submit(options);

You must pass these parameters in Checkout to initiate the payment.

Enable UPI Intent on iOS

Provide your customers with a better payment experience by enabling UPI Intent on your app's Checkout form. In the UPI Intent flow:

1. Customer selects UPI as the payment method in your iOS app. A list of UPI apps supporting the intent flow is displayed. For example, PhonePe, Google Pay and Paytm.
2. Customer selects the preferred app. The UPI app opens with pre-populated payment details.
3. Customer enters their UPI PIN to complete their transactions.
4. Once the payment is successful, the customer is redirected to your app or website.

To enable this in your iOS integration, you must make the following changes in your app's info.plist file.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>tez</string>
    <string>phonepe</string>
    <string>paytmmp</string>
    <string>credpay</string>
    <string>mobikwik</string>
    <string>freecharge</string>
    <string>in.fampay.app</string>
    <string>bhim</string>
    <string>amazonpay</string>
    <string>navi</string>
    <string>kiwi</string>
    <string>payzapp</string>
    <string>jupiter</string>
    <string>omnicard</string>
    <string>icici</string>
    <string>popclubapp</string>
    <string>sbiyono</string>
    <string>myjio</string>
    <string>slice</string>
    <string>bobupi</string>
    <string>shriramone</string>
    <string>indusmobile</string>
    <string>whatsapp</string>
</array>

Know more about

UPI Intent on Recurring Payments

Configure and initiate a recurring payment transaction on UPI Intent:

let options: [String:Any] = [
  "key": "YOUR_KEY_ID",  
  "order_id": "order_DBJOWzybfXXXX", 
  "customer_id": "cust_BtQNqzmBlXXXX",  
  "prefill": [
    "contact": "+919000090000",
    "email": "gaurav.kumar@example.com"
  ],
  "image": "https://spaceplace.nasa.gov/templates/featured/sun/sunburn300.png",
  "amount": 10000,  // Amount should match the order amount 
  "currency": "INR",
  "recurring": 1  // This key value pair is mandatory for Intent Recurring Payment.
]

1.8 Open Checkout

Use the below code to open the Razorpay checkout:

_razorpay.submit(options);

1.9 Store Fields in Server

A successful payment returns the following fields to the Checkout form.

• You need to store these fields in your server.
• You can confirm the authenticity of these details by verifying the signature in the next step.

1.10 Verify Payment Signature

This is a mandatory step to confirm the authenticity of the details returned to the Checkout form for successful payments.

To verify the razorpay_signature returned to you by the Checkout form:

1. Create a signature in your server using the following attributes:

   • order_id: Retrieve the order_id from your server. Do not use the razorpay_order_id returned by Checkout.
   • razorpay_payment_id: Returned by Checkout.
   • key_secret: Available in your server. The key_secret that was generated from the
     Curlec Dashboard
     .

2. Use the SHA256 algorithm, the razorpay_payment_id and the order_id to construct a HMAC hex digest as shown below:

   HMAC Hex Digest

   copy

   generated_signature = hmac_sha256(order_id + "|" + razorpay_payment_id, secret);
   
     if (generated_signature == razorpay_signature) {
       payment is successful
     }

3. If the signature you generate on your server matches the razorpay_signature returned to you by the Checkout form, the payment received is from an authentic source.

Generate Signature on Your Server

Given below is the sample code for payment signature verification:

RazorpayClient razorpay = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");


String secret = "EnLs21M47BllR3X8PSFtjtbd";


JSONObject options = new JSONObject();
options.put("razorpay_order_id", "order_IEIaMR65cu6nz3");
options.put("razorpay_payment_id", "pay_IH4NVgf4Dreq1l");
options.put("razorpay_signature", "0d4e745a1838664ad6c9c9902212a32d627d68e917290b0ad5f08ff4561bc50f");


boolean status =  Utils.verifyPaymentSignature(options, secret);

Post Signature Verification

After you have completed the integration, you can

M1 MacBook Changes

If you use M1 MacBook, you need to make the following changes in your podfile.

installer.pods_project.build_configurations.each do |config|
  config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
end

1.8 Verify Payment Status

You can track the payment status in three ways:

Verify Status from Dashboard

Subscribe to Webhook Events

Poll APIs

To verify the payment status from the Dashboard:

1. Log in to the

   Dashboard

   and navigate to Transactions → Payments.
2. Check if a Payment Id has been generated and note the status. In case of a successful payment, the status is marked as Captured.

Next Steps