Razorpay Payment Integration in Flutter


In this article, let we will see how to integrate Razorpay in Flutter. Thanks to the Team Razorpay for providing this easy to use package razorpay_flutter.


To understand more about the payment flow with Razorpay, you can go through the official docs of Razorpay. To summarize in short :

  1. User will click on the checkout button. You will have to call /orders API of Razorpay, which will return you the orderId of the created order.
  2. Pass this orderId to the Razorpay Checkout plugin.
  3. Now depending on the payment was successful or failed, you will receive the callbacks in the app. But I will suggest you to use these callbacks only to show payment success/failure dialogs. And you can handle other things related to payment(verifying payment signature, storing payment_id against the generated order_id etc.) on the server side itself, using Razorpay webhooks integration.

In this article, we won’t go into details of how to handle this webhooks on server side. So let us see what all things you will need to do in your app.

Step 1) Signup for razorpay account and generate the API keys.

Step 2) Add razorpay_flutter package in your dependencies in pubspec.yaml file.

pubspec.yaml

Make sure minSdkVersion of your app in /android/app/build.gradle file is greater than or equal to 19 (this is the declared version in the razorpay library).

Step 3) Create Razorpay() instance.

Razorpay _razorpay = Razorpay();

Step 4) Attach event listeners:

There will be basically 3 events – EVENT_PAYMENT_SUCCESS, EVENT_PAYMENT_ERROR and EVENT_EXTERNAL_WALLET. And we will have to write listeners for them, i.e. what to be done when payment is successful or payment failed/cancelled or user chose external wallet. We will show respective success/failure message in this example.

We will add following event listeners in the initState() method of the widget.


@override
void initState() {
super.initState();
_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
}
void _handlePaymentSuccess(PaymentSuccessResponse response) {
showPaymentPopupMessage(context, true, 'Payment Successful!');
}

void _handlePaymentError(PaymentFailureResponse response) {
showPaymentPopupMessage(context, false, 'Payment Failed!');
}

void _handleExternalWallet(ExternalWalletResponse response) {
print('You have chosen to pay via : ${response.walletName}. It will take some time to reflect your payment.');
}

Finally we will clear the listeners on widget’s dispose() method.

@override
void dispose() {
super.dispose();
_razorpay.clear();
}

Step 5) Pass checkout options and open Razorpay checkout.

In the checkout options, parameters such as key, amount, name etc are mandatory. You can also provide other options for custamization, such as theme (color theme as per your app theme), prefill (here you can pass mobile number and email of the user) etc.

Note: Make sure to multiply your amount by 100 (in case currency is INR), as we have to pass the amount in subunit (paise in case of INR).

void _openRazorpay() async {
var options = {
'key': 'YOUR_API_KEY',
'amount': (200 * 100),
'name': 'Razorpay Inc.',
'description': 'Thank you for shopping with us!',
'theme': {
'color': '#008000',
}
};

try {
_razorpay.open(options);
} catch (e) {
print('Error: ${e.toString()}');
}
}

That’s it! Once you open the checkout, and proceed with the payment, you will receive the events in your listeners.


Common problem:

  • Now if you run the app, it will run as expected in debug mode. But if you build the apk, and test on real device, app will crash on checkout.
  • This is due to proguard rules related issue. You can refer here for more details about the same.
  • Simple fix is to add proguard-rules.pro file inside android > app.
-keepclassmembers class * {
@android.webkit.JavascriptInterface <methods>;
}

-keepattributes JavascriptInterface
-keepattributes *Annotation*

-dontwarn com.razorpay.**
-keep class com.razorpay.** {*;}

-optimizations !method/inlining/*

-keepclasseswithmembers class * {
public void onPayment*(...);
}
  • And in build.gradle file inside android > app, add following in buildTypes:
buildTypes {
release {
// TODO: Add your own signing config for the release build.
signingConfig signingConfigs.debug
minifyEnabled true
useProguard true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}


Github link: https://github.com/Amitbhave/flutter-razorpay

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s