You will discover how to incorporate UPI Payment Gateway into your Flutter app in this article.
Payment gateways are now an essential component of mobile applications due to the increase in online transactions. Customers can instantly transfer money between bank accounts in India using the UPI (Unified Payment Interface) payment gateway without any hassle. A great way to give your users a safe and practical payment option is by integrating UPI payment gateway in a Flutter app. We will go over the exact steps for integrating a UPI payment gateway in a Flutter app in this blog post.
Requirements for UPI payments gateway 👍 in flutter
Make sure you have the following prerequisites before we begin:
- Setup of the Flutter development environment on your computer
- A tool or emulator to test the application
- having a functional UPI payment gateway account
Step to Implement UPI Payment in Flutter App
Step 1) : project with the plugin upi_india add this dependency in pubspec.yaml file
upi_india: ^any
Step2) :Run the flutter pub get command to install the plugin after adding the dependency.
Step 3) : import the package named upi_India
We must import the upi_india package in our Dart file after adding the upi_india plugin to the project.
import 'package:upi_india/upi_india.dart';
Step 4) : Initialize UpiIndia
The UpiIndia object needs to be initialized with the necessary configuration information after the upi_india package has been imported. The amount to be transferred, the recipient’s UPI ID, the transaction note, and the payment app the user will use to complete the transaction are all included in the configuration information. An illustration of how to initialize UpiIndia is given below:
UpiIndia upi = UpiIndia(); await upi.initiateTransaction( amount: "10.0", app: UpiApp.amazonPay, receiverName: "Name", receiverUpiAddress: "example@upi", transactionNote: "Test Transaction", );
The UpiIndia object is initialized in the code above with a payment of 10 INR to be sent to example@upi. The payment will be made using the Amazon Pay app, and the transaction note is set to “Test Transaction”.
Step 5) : Handle the UPI payment response
The user will be redirected to the UPI payment gateway app to complete the transaction after the payment has been started. The user will be directed back to our app once the transaction has been completed. To ascertain whether the transaction was successful or not, we must manage the UPI payment response. The onTransactionResponse and onTransactionError listeners of the UpiIndia object can be used to handle the payment response. An example of how to handle the payment response is given below:
upi.onTransactionResponse.listen((transactionDetails) {
print("Transaction done successfully :: ${transactionDetails.toString()}");
});
upi.onTransactionError.listen((error) {
print("Transaction failed with this error :: ${error.toString()}");
});
In the code above, we are watching for the UpiIndia object’s onTransactionResponse and onTransactionError events. The onTransactionResponse event is triggered if the transaction is successful.
Finally, call the initiateTransaction method when the user clicks on the payment button:
onPressed: () {
initiateTransaction();
},
child: Text("Pay with UPI"),
That’s it! You have successfully integrated the UPI payment gateway in your Flutter app using the upi_india plugin.
For full example code , click here…..
Conclusion
Additionally, the upi_india plugin offers a getAllUpiApps method that can be used to obtain a list of all UPI apps that are currently installed on the user’s device. This method is helpful for showing the user a list of UPI apps and allowing them to select their preferred app for the transaction.
It is more assential part of flutter application to integratr UPI payment gateway in online mode.
The upi_india plugin handles UPI transactions and provides callbacks for transaction success and failure, making it simple to integrate the UPI payment gateway in a Flutter app.
Thanks for reading this article 💙…..
Have a beautiful day….
