Razorpay Payment Gateway Integration with Flutter and Dart

Integrating a payment gateway is crucial for any Flutter application that involves financial transactions. Razorpay is a popular choice in India, offering a robust and developer-friendly platform. This blog post will guide you through the process of integrating Razorpay into your Flutter application using Dart, ensuring a seamless and secure payment experience for your users.

Setting Up Your Razorpay Account and Obtaining API Keys

Before diving into the code, you'll need a Razorpay account. Head over to the Razorpay website and create an account. Once your account is set up and activated, navigate to the API Keys section in the Razorpay dashboard. Generate API keys; you'll receive a Key ID and a Key Secret. Treat these keys with utmost care, as they grant access to your Razorpay account. Store them securely and avoid committing them directly to your code repository. Consider using environment variables or secure storage mechanisms.

Important Note: While in development, use the test keys provided by Razorpay to avoid real transactions. Switch to live keys only when your application is ready for production.

Installing the Razorpay Flutter Plugin

Flutter provides a convenient plugin for integrating Razorpay. To add the plugin to your Flutter project, open your pubspec.yaml file and add the following dependency:

dependencies:
  razorpay_flutter: ^1.3.6 # Use the latest version

Replace ^1.3.6 with the latest version available on pub.dev. After adding the dependency, run flutter pub get in your terminal to download and install the plugin.

Implementing the Payment Flow in Your Flutter App

Now, let's implement the payment flow in your Flutter application. First, import the Razorpay plugin into your Dart file:

import 'package:razorpay_flutter/razorpay_flutter.dart';

Next, initialize the Razorpay instance:

Razorpay _razorpay = Razorpay();

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

Implement the handler functions:

void _handlePaymentSuccess(PaymentSuccessResponse response) {
    // Payment successful
    print("Payment Successful: ${response.paymentId}");
}

void _handlePaymentError(PaymentFailureResponse response) {
    // Payment failed
    print("Payment Error: ${response.code} - ${response.message}");
}

void _handleExternalWallet(ExternalWalletResponse response) {
    // External wallet selected
    print("External Wallet: ${response.walletName}");
}

@override
void dispose() {
  super.dispose();
  _razorpay.clear();
}

Finally, create the options object and open the Razorpay checkout when the user initiates the payment:

var options = {
  'key': 'YOUR_KEY_ID', // Replace with your Key ID
  'amount': 100 * 100, // Amount in paise (e.g., 100 INR = 10000 paise)
  'name': 'Your Company Name',
  'description': 'Payment for your product/service',
  'prefill': {
    'name': 'Customer Name',
    'email': 'customer@example.com',
    'contact': '9876543210'
  },
  'theme': {
    'color': '#F37254'
  }
};

try {
  _razorpay.open(options);
} catch (e) {
  debugPrint('Error: $e');
}

Remember to replace YOUR_KEY_ID with your actual Key ID and adjust the other parameters (amount, name, description, etc.) accordingly.

Handling Payment Success and Failure

The _handlePaymentSuccess and _handlePaymentError functions are crucial for handling the different outcomes of the payment process. In _handlePaymentSuccess, you can verify the payment status with Razorpay's servers and update your application's state accordingly (e.g., mark the order as paid). In _handlePaymentError, you should display an appropriate error message to the user and allow them to retry the payment.

• Important: Always verify the payment status on your server-side to prevent fraudulent transactions.
• Consider implementing retries and offering alternative payment methods in case of failure.

Conclusion

Integrating Razorpay into your Flutter application opens up a world of possibilities for accepting payments seamlessly. By following the steps outlined in this guide, you can create a secure and user-friendly payment experience. Remember to prioritize security, handle errors gracefully, and always verify payment status on your server-side. Happy coding!

Key Takeaways:

• Securely store and manage your Razorpay API keys.
• Utilize the official Razorpay Flutter plugin for easy integration.
• Implement robust error handling and payment verification.

Automated post via TechCognita Automation Framework