In this blog, we will learn how to integrate payment method using SDK in flutter i.e., “Integrate RazorPay in Flutter using SDK”.
In E-commercial Applications, we need to integrate online payment methods as per the user’s requirements.
there are two methods to integrate payment methods in your flutter application:-
a)Using Web view
b)Using SDK
Here, we will integrate RazorPay using SDK.So without wasting time, Let’s start the stepwise implementation of integrating RazorPay in flutter using SDK.
Check out more about our Flutter app development.
1.Add the Dependency
First of all, you need to add the following flutter Razorpay SDK dependency in your flutter project. I am also adding the flutter toast dependency because I will show the toast message on the success or failure of payment.
you can do whatever you want on success or failure of payment.
|
1 2 3 4 5 6 |
dev_dependencies: flutter_test: sdk: flutter razorpay_flutter: ^1.2.7 fluttertoast: ^8.0.8 |
2.Import the package
Add the following code for importing the packages.
|
1 2 |
import 'package:razorpay_flutter/razorpay_flutter.dart'; import 'package:fluttertoast/fluttertoast.dart'; |
3.Code Implementation
I am creating a dummy project in which I am adding a button. With the click of a button, I am navigating on Razorpay SDK and after success or failure of payment, I am showing the toast message.
Add the following code to your project. In the block of code, I am calling 3 methods in my initState.
these methods will handle the success/failure of payments.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@override 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); } @override void dispose() { super.dispose(); _razorPay?.clear(); } |
Now let’s creating the above called methods.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
void _handlePaymentSuccess(PaymentSuccessResponse response) { Fluttertoast.showToast( msg: "SUCCESS: " + response.paymentId!, toastLength: Toast.LENGTH_SHORT); } void _handlePaymentError(PaymentFailureResponse response) { Fluttertoast.showToast( msg: "ERROR: " + response.code.toString() + " - " + response.message!, toastLength: Toast.LENGTH_SHORT); } void _handleExternalWallet(ExternalWalletResponse response) { Fluttertoast.showToast( msg: "EXTERNAL_WALLET: " + response.walletName!, toastLength: Toast.LENGTH_SHORT); } |
Now let’s create the last method open the checkout method and call it at the click of button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
void openCheckout() async { var options = { 'key': 'rzp_test_1DP5mmOlF5G5ag', 'amount': 2000, 'name': 'Acme Corp.', 'description': 'Fine T-Shirt', 'prefill': {'contact': '8888888888', 'email': 'test@razorpay.com'}, 'external': { 'wallets': ['paytm','phonepe','tez'] }, }; ///calling the above method on button click. body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton(onPressed: openCheckout, child: const Text('Open')) ])), |
I am using all the dummy data in the openCheckout method.
4.Check the Output
Now the code implementation has been completed and it’s time to check the implementation.
Refer to the attached video for the output.
Output when the payment is successful.you can see message is coming after successful payment.
Output when the payment is fail.
Congratulations!!!! you have learned how to integrate razorpay payment method in flutter using SDK.
For more details and methods you can refer to the official doc of flutter here.
For more interesting blogs check out here – https://mobikul.com/blog/
Hope this blog helped you with a better understanding that integrate razorpay payment method in flutter using SDK.
Thanks for reading.😇