Step-by-Step Guide for Razorpay Integration in a Flutter App

Integrating Razorpay into your Flutter app is a great way to handle payments seamlessly. Razorpay is a popular payment gateway in India that supports various payment methods, including credit/debit cards, net banking, UPI, and wallets. This guide will walk you through the process of integrating Razorpay into your Flutter app.

Prerequisites

Before you start, make sure you have the following:

1. Flutter Environment: Ensure you have Flutter installed and set up on your machine.

2. Razorpay Account: Sign up for a Razorpay account and get your API keys.

3. Basic Flutter App: Have a basic Flutter app ready where you can integrate Razorpay.

Step 1: Add Dependencies

First, you need to add the Razorpay Flutter plugin to your pubspec.yaml file. Open the file and add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  razorpay_flutter: ^1.2.7

Run flutter pub get to install the new dependency.

Step 2: Import Razorpay in Your Dart File

Import the Razorpay package in your Dart file where you want to handle payments:

import 'package:razorpay_flutter/razorpay_flutter.dart';

Step 3: Initialize Razorpay

Create an instance of the Razorpay class and initialize it with your Razorpay API key. You can do this in the initState method of your StatefulWidget:

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  Razorpay _razorpay;

  @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);
  }

  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    // Do something when payment succeeds
    print("Payment Success: ${response.paymentId}");
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    // Do something when payment fails
    print("Payment Error: ${response.message}");
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    // Do something when an external wallet is selected
    print("External Wallet: ${response.walletName}");
  }

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

  // Rest of your widget code
}

Step 4: Open the Payment Interface

Create a method to open the Razorpay payment interface. You need to provide the order details, such as amount, currency, and order ID:

void openCheckout() async {
  var options = {
    'key': 'YOUR_RAZORPAY_KEY',
    'amount': 100, // Amount in smallest currency unit (e.g., paise for INR)
    'name': 'Your App Name',
    'description': 'Payment for your order',
    'prefill': {
      'contact': '9123456789',
      'email': 'test@example.com'
    },
    'external': {
      'wallets': ['paytm']
    }
  };

  try {
    _razorpay.open(options);
  } catch (e) {
    print("Error: $e");
  }
}

Step 5: Handle Payment Responses

You have already set up handlers for payment success, error, and external wallet selection in the initState method. You can customize these handlers to update your UI or perform other actions based on the payment status.

Step 6: Test Your Integration

Run your Flutter app and test the payment flow. Make sure to use test API keys and test card details provided by Razorpay for testing purposes.

Conclusion

Integrating Razorpay into your Flutter app is straightforward with the Razorpay Flutter plugin. By following these steps, you can easily add a robust payment gateway to your app and provide a seamless payment experience for your users.