Greetings, Flutter Enthusiasts!
Welcome to another exciting tutorial from [Your Blog Name]! Today, we're exploring the world of online payments by integrating Razorpay into your Flutter application. Razorpay serves as a versatile solution, allowing your app to accept credit cards, debit cards, net banking, wallet, and UPI payments. Let's dive into the step-by-step implementation for a smooth payment gateway experience.
Step 1: Create a New Project in Android Studio
Begin by setting up Flutter Development in Android Studio. If you're new to Flutter, follow our guide on Android Studio Setup for Flutter Development. Once set up, create a new Flutter project using Android Studio.
Step 2: Add Razorpay in pubspec.yaml file
In your pubspec.yaml file, add the Razorpay package as a dependency:
yaml code:
dependencies: razorpay_flutter: ^1.3.4
Note: The version may vary, so check for the latest version when implementing.
Step 3: Get API Key and API Secret for Razorpay
Visit the Razorpay site, sign up, and obtain your API key and API secret. For testing purposes, use the key ID starting with "rzp_test." Ensure the confidentiality of these keys to maintain security.
Step 4: Create Razorpay Instance
Create an instance of Razorpay to access its functions and variables in your Flutter code.
dartCopy code
final Razorpay _razorpay = Razorpay();
Step 5: Attach Event Listeners
Handle different events in Razorpay by creating functions for success, failure, and external wallet selection.
dart code:
void _handlePaymentSuccess(PaymentSuccessResponse response) { // Do something when payment succeeds } void _handlePaymentError(PaymentFailureResponse response) { // Do something when payment fails } void _handleExternalWallet(ExternalWalletResponse response) { // Do something when an external wallet is selected } // Attach functions to event listeners void initiateRazorPay() { _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess); _razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError); _razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet); }
Step 6: Create Order in Razorpay
Generate an order ID using either the Razorpay API or by creating an order ID in the app itself. If opting for the latter, you can refer to the provided Postman request to create an order ID.
Step 7: Add Checkout Sessions
Create a function to call the create order function and prepare parameters to be sent to the Razorpay checkout page.
dart code:
createOrder(amount: amount).then((orderId) { // Prepare options for the Razorpay checkout page var options = { 'key': razorPayKey, 'amount': amount, 'name': 'Company Name', 'order_id': orderId, 'description': 'Description for order', 'timeout': 60, 'prefill': { 'contact': '9123456789', 'email': 'flutterwings304@gmail.com', }, }; // Open the checkout page _razorpay.open(options); });
Step 8: Open Checkout Page
Invoke the _razorpay.open(options) function to open the Razorpay checkout page and proceed with different payment methods.
Step 9: Store Fields in the Server
For enhanced user experience and data security, store three fields - razorpay_payment_id, razorpay_order_id, and razorpay_signature - in your database. These will be returned in the successful event function upon a successful transaction.
Step 10: Verify Signature and Payment
Verify the validity of the information returned to the checkout form for successful payments. Use the generated signature and compare it with the received razorpay_signature for authentication.
Congratulations! You've successfully implemented Razorpay into your Flutter app, paving the way for seamless and secure online transactions. Stay tuned to [Your Blog Name] for more insights and tutorials.
Happy coding!
Warm regards, The FizonTech Team
