Razorpay streamlines online payments for businesses, supporting various methods like cards, net banking, and UPI. This guide offers a step-by-step approach to integrate Razorpay into Flutter apps, ensuring smooth payment processing and enhancing user engagement.
Table of Contents
Integrating Razorpay Payment Gateway into Your Flutter App
Razorpay facilitates online payments for both online and offline businesses, offering support for credit cards, debit cards, net banking, wallets, and UPI payments with seamless Mobile App integration. In this guide, we’ll walk you through the implementation of a payment gateway in your Flutter app.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To begin, set up Flutter Development on Android Studio following the instructions for Flutter Development Setup. Then, create a new project in Android Studio.
Step 2: Add Razorpay in pubspec.yaml file
Include the Razorpay package in your Flutter project’s dependencies.
razorpay_flutter: ^1.3.4Version may vary depending on the time of implementation.
| Step | Description |
|---|---|
| 1 | Create a New Project in Android Studio |
| 2 | Add Razorpay in pubspec.yaml file |
| 3 | Obtain API_key and API_secret for Razorpay |
| 4 | Create Razorpay Instance |
| 5 | Attach Event Listeners |
| 6 | Create Order in Razorpay |
| 7 | Add Checkout Sessions |
| 8 | Open Checkout Page |
| 9 | Store Fields in the Server |
| 10 | Verify Signature and Payment |
Step 3: Obtain API_key and API_secret for Razorpay
Navigate to the Razorpay site to obtain API credentials. Sign up with your email, add basic information, and create testing credentials. The key-id will begin with “rzp_test”.
For securing Razorpay key and secret in the Flutter app without sharing on version control, refer to this guide: How to Add .env File in Flutter.
Step 4: Create Razorpay Instance
Instantiate Razorpay to access its functions and variables.
final Razorpay _razorpay = Razorpay();Step 5: Attach Event Listeners
Define functions to handle different events such as payment success, failure, and external wallet selection. Then, attach these functions to event listeners.
void _handlePaymentSuccess(PaymentSuccessResponse response) {
// Handle payment success
}
void _handlePaymentError(PaymentFailureResponse response) {
// Handle payment failure
}
void _handleExternalWallet(ExternalWalletResponse response) {
// Handle external wallet selection
}
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 either from the server using Razorpay API or within the app itself.
For server-based order creation, use the provided curl request. To create an order within the app, refer to the provided Dart code.
Step 7: Add Checkout Sessions
Call the create order function to obtain the order ID and prepare parameters for the Razorpay checkout page.
createOrder(amount: amount).then((orderId) {
if (orderId.toString().isNotEmpty) {
var options = {
'key': razorPayKey,
'amount': amount,
'name': 'Company Name',
'order_id': orderId,
'description': 'Description for order',
'timeout': 60,
'prefill': {
'contact': '9123456789',
'email': 'example@example.com'
}
};
// Open the checkout page
_razorpay.open(options);
}
});Step 8: Open Checkout Page
Open the Razorpay checkout page to proceed with the payment using different methods.
Step 9: Store Fields in the Server
For data security and a better user experience, store essential fields in your database, which will be returned in the successful event function upon a successful transaction.
Join Our Whatsapp Group
Join Telegram group
Step 10: Verify Signature and Payment
Verify the validity of the information returned to the Checkout form for successful payments by verifying the signature.
generated_signature = hmac_sha256(order_id + "|" + razorpay_payment_id, secret);
if (generated_signature == razorpay_signature) {
// Payment is successful
}Integrating Razorpay into your Flutter app enables seamless payment processing, enhancing user experience and facilitating transactions.
FAQs for Integrating Razorpay Payment Gateway into Your Flutter App
How do I obtain API credentials for Razorpay?
To obtain API credentials for Razorpay, navigate to the Razorpay site, sign up with your email, and add basic information. You can create testing credentials, and the key-id will begin with “rzp_test”. For securing Razorpay key and secret in the Flutter app without sharing on version control.
How can I handle different payment events in my Flutter app?
You can handle payment events such as success, failure, and external wallet selection by defining functions for each event. Then, attach these functions to event listeners using the Razorpay instance. Here’s an example:
void _handlePaymentSuccess(PaymentSuccessResponse response) {
// Handle payment success
}
void _handlePaymentError(PaymentFailureResponse response) {
// Handle payment failure
}
void _handleExternalWallet(ExternalWalletResponse response) {
// Handle external wallet selection
}
void initiateRazorPay() {
_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
}How can I create an order in Razorpay?
You can generate an order ID either from the server using Razorpay API or within the app itself. For server-based order creation, you can use a provided curl request. To create an order within the app, refer to the provided Dart code in the implementation guide.
How do I open the Razorpay checkout page in my Flutter app?
To open the Razorpay checkout page and proceed with the payment using different methods, you need to call the create order function to obtain the order ID and prepare parameters for the checkout page. Here’s an example:
createOrder(amount: amount).then((orderId) {
if (orderId.toString().isNotEmpty) {
var options = {
'key': razorPayKey,
'amount': amount,
'name': 'Company Name',
'order_id': orderId,
'description': 'Description for order',
'timeout': 60,
'prefill': {
'contact': '9123456789',
'email': 'example@example.com'
}
};
// Open the checkout page
_razorpay.open(options);
}
});How can I verify the signature and payment for successful transactions?
To verify the validity of the information returned to the Checkout form for successful payments, you need to verify the signature. Here’s an example of how you can do it:
generated_signature = hmac_sha256(order_id + "|" + razorpay_payment_id, secret);
if (generated_signature == razorpay_signature) {
// Payment is successful
}Join Our Whatsapp Group
Join Telegram group
What are the benefits of integrating Razorpay into a Flutter app?
Integrating Razorpay into your Flutter app enables seamless payment processing, enhancing user experience and facilitating transactions. With support for various payment methods including credit cards, debit cards, net banking, wallets, and UPI payments, Razorpay provides a comprehensive solution for online and offline businesses.