Implementing Razorpay Payment Gateway In Flutter/Dart

Akshay Papneja
2 min readJan 7, 2021

Hello Folks

Flutter made it easy by providing razorpay payment gateway. In this article I’ll show you how to implement payment gateway of razorpay. First off all you need to Signup with razorpay to generate API key. Go to the link here to generate that key.

Note : Will use the test key for debug, so that no payment will deducted from your account while UT.

Also note that, razorpay requires min API level 19 or higher.

First we have to add razorpay package to our pubspec.yaml file like this.

pubspec.yaml

razorpay_flutter: ^1.2.3

get dependency using

flutter pub get

imports

import 'package:razorpay_flutter/razorpay_flutter.dart';

And now just initialize the razorpay instance where you want to implement the functionality.

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

Fill out the details for checkout, where ‘key’ parameter will be your razorpay API key, Fill the amount, name, description and image for your wallet in side options.

void openCheckout() async {
var options = {
'key': 'rzp_test_1DP5mmOlF5G5ag',
'amount': 2000,
'name': 'Acme Corp.',
'description': 'Fine T-Shirt',
'image' : 'https://firebasestorage.googleapis.com/v0/b/mytestApp.appspot.com/o/images%2FpZm8daajsIS4LvqBYTiWiuLIgmE2?alt=media&token=3kuli4cd-dc45-7845-b87d-5c4acc7da3c2',
'prefill': {'contact': '8888888888', 'email': 'test@razorpay.com'},
'external': {
'wallets': ['paytm']
}
};

try {
_razorpay.open(options);
}
catch (e) {
debugPrint(e);
}
}

Now let’s handle the response of razorpay payment. To handle payment success for the user. Use the code snippet below.

void _handlePaymentSuccess(PaymentSuccessResponse response) {
// handle response....
}

If payment failed

void _handlePaymentError(PaymentFailureResponse response) {
// handle response
}

For external wallet

void _handleExternalWallet(ExternalWalletResponse response) {
// handle response
}

Now just update your initstate(). by adding handlers.

void initState() {
super.initState();
_razorpay = Razorpay();
_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
}

And call the method on press of that button, where you wanna access the razorpay payment gateway like this.

RaisedButton(onPressed: openCheckout, child: Text('Pay'))

Note : It will be working fine in debug build , but for release build we have to add proguard-rules.pro Otherwise it will make the application crash. And will not run.

For adding proguard-rules

Step 1:
Make a file name of
proguard-rules.pro inside android>app
that should be :
android/app/proguard-rules.pro
then paste below code inside
proguard-rules.pro file.

-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*(...);
}

Step 2
Go to
android>app>build.gradle and find buildTypes
inside
buildTypes>release add some lines

buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
minifyEnabled true
useProguard true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}

Now razorpay payment gateway will work fine for both debug and release, Here is all I can show you how to implement razorpay payment gateway to our flutter app. I hope this article will help you to implement payment gateway. Thanks for reading this article….

For reference go to the link here.

If you liked this article, don’t forget to Clap

Happy Coding !!

--

--