How to Integrate Razorpay Payment Gateway in FlutterFlow (Without Firebase )

FlutterFlow doesn’t provide built-in support for Razorpay integration with custom authentication or API-based payment verification. However, you can still implement it using a custom action and a custom API. This guide walks you through integrating Razorpay into your FlutterFlow app without Firebase.

Steps to Implement Razorpay in FlutterFlow:

Step 1. Add the razorpay_flutter Package

Before proceeding, add the razorpay_flutter package to your FlutterFlow project. Here's how to do it:

Navigate to Settings > Project Dependencies > Custom Pub Dependencies in FlutterFlow.
Add the dependency razorpay_flutter: ^2.0.0

Step 2. Create the Custom Action

Go to Custom Code > Actions in FlutterFlow.
Click Create New Action and name it razorpayCheckout.
Add the following arguments:
- amount (double): Payment amount in rupees (e.g., 500 for ₹500).
- name (String): Your app or company name.
- description (String): Payment description.
- prefillContact (String): User’s phone number.
- prefillEmail (String): User’s email address.
- accessToken (String): API authentication token.
- orderId (String): Razorpay Order ID generated by your backend.

Copy and paste the following custom action code into the editor:

import 'package:flutter/material.dart';
import 'package:razorpay_flutter/razorpay_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';

Future<dynamic> razorpayCheckout(
  BuildContext context,
  double amount,
  String name,
  String description,
  String prefillContact,
  String prefillEmail,
  String accessToken,
  String orderId,
) async {
  final Razorpay razorpay = Razorpay();
  final Completer<dynamic> completer = Completer<dynamic>();

  razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, (PaymentSuccessResponse response) async {
    final apiUrl = "https://api.domain.com/api/v1/orders/confirm-payment"; // Replace with your API

    final requestBody = {
      "orderId": orderId,
      "paymentId": response.paymentId,
      "signature": response.signature,
    };

    try {
      final res = await http.post(
        Uri.parse(apiUrl),
        headers: {
          "Authorization": "Bearer $accessToken",
          "Content-Type": "application/json",
        },
        body: jsonEncode(requestBody),
      );

      final responseBody = jsonDecode(res.body);
      if (res.statusCode == 200) {
        completer.complete({
          "success": true,
          "message": "Payment confirmed successfully",
          "parameters": requestBody
        });
      } else {
        final errorMessage = responseBody["message"] ?? "Payment verification failed";
        completer.complete({
          "success": false,
          "message": "API Error: $errorMessage",
          "parameters": requestBody
        });
      }
    } catch (e) {
      completer.complete({
        "success": false,
        "message": "Error verifying payment: ${e.toString()}",
        "parameters": requestBody
      });
    }
  });

  razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, (PaymentFailureResponse response) {
    completer.complete({
      "success": false,
      "message": "Payment failed: ${response.message}",
      "parameters": {}
    });
  });

  razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, (ExternalWalletResponse response) {
    completer.complete({
      "success": false,
      "message": "External wallet selected, payment not completed",
      "parameters": {}
    });
  });

  var options = {
    'key': 'my_api_key', // Replace with your Razorpay Key
    'amount': (amount * 100).toInt(),
    'name': name,
    'description': description,
    'order_id': orderId,
    'prefill': {
      'contact': prefillContact,
      'email': prefillEmail,
    },
    'currency': 'INR',
  };

  try {
    razorpay.open(options);
    return await completer.future;
  } catch (e) {
    return {
      "success": false,
      "message": "Error opening Razorpay: ${e.toString()}",
      "parameters": {}
    };
  }
}

Save the custom action.

Step 3: Configure Your API for Payment Verification

Replace "https://api.domain.com/api/v1/orders/confirm-payment" with your custom backend API.
Ensure your backend correctly verifies the orderId, paymentId, and signature before confirming the payment.

Step 4: Add the Razorpay Checkout Action to Your Widget

Navigate to the widget (e.g., Payment Button) where you want to trigger Razorpay Checkout.
Assign the razorpayCheckout custom action to the widget’s action.
Pass the required parameters:
- amount: Payment amount.
- name: Your app or company name.
- description: Payment description.
- prefillContact: User’s phone number.
- prefillEmail: User’s email address.
- accessToken: Authentication token for the API.
- orderId: Razorpay Order ID generated by your backend.

Step 5: Test the Integration

Replace 'my_api_key' with your Razorpay API key.
Use test keys for development and live keys for production.
Run your FlutterFlow app and test the payment process.

By following these steps, you can successfully integrate Razorpay with FlutterFlow using a custom API. This method ensures a secure and flexible payment experience without relying on Firebase authentication.

If you have any questions or run into issues, feel free to ask in the comments below. Happy coding! 🚀