How to Integrate Razorpay Payment Gateway in FlutterFlow Web Apps

FlutterFlow currently does not provide built-in support for Razorpay on web platforms, but you can still implement it using a custom action. This guide provides a step-by-step explanation and the custom code required to integrate Razorpay into your FlutterFlow web project.

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:

1. Navigate to Settings > Project Dependencies > Custom Pub Dependencies in FlutterFlow.

2. Add the dependency razorpay_flutter: ^2.0.0 as show below

   

Step 2. Create the Custom Action

Go to App Settings > Web Deployment > Custom Header in FlutterFlow and add the below script :

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Step 3. Create the Custom Action

1. Go to Custom Code > Actions in FlutterFlow.

2. Create a new action called razorpayCheckout.

3. Define the below Arguments :

   

4. 

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

   Copy

   // Automatic FlutterFlow imports
   import '/backend/backend.dart';
   import '/backend/schema/structs/index.dart';
   import '/flutter_flow/flutter_flow_theme.dart';
   import '/flutter_flow/flutter_flow_util.dart';
   import '/custom_code/actions/index.dart'; // Imports other custom actions
   import '/flutter_flow/custom_functions.dart'; // Imports custom functions
   import 'package:flutter/material.dart';
   // Begin custom action code
   // DO NOT REMOVE OR MODIFY THE CODE ABOVE!
   
   import 'package:razorpay_web/razorpay_web.dart';
   
   Future razorpayCheckout(
     BuildContext context,
     int amount,
     String name,
     String description,
     String contact,
     String email,
   ) async {
     Razorpay razorpay = Razorpay();
   
     // Configure options
     var options = {
       'key': 'rzp_test_abcdefgh', // Replace with your Razorpay Key
       'amount': amount * 100, // Amount is in the smallest currency unit
       'name': name,
       'description': description,
       'prefill': {
         'contact': contact,
         'email': email,
       },
       'external': {
         'wallets': ['paytm'],
       },
     };
   
     // Event Handlers
     razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, (PaymentFailureResponse response) {
       showAlertDialog(
         context,
         'Payment Failed',
         'Code: ${response.code}\nDescription: ${response.message}',
       );
     });
   
     razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS,
         (PaymentSuccessResponse response) {
       showAlertDialog(
         context,
         'Payment Successful',
         'Payment ID: ${response.paymentId}\nOrder ID: ${response.orderId}',
       );
     });
   
     razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET,
         (ExternalWalletResponse response) {
       showAlertDialog(
         context,
         'External Wallet Selected',
         response.walletName ?? 'No Wallet Selected',
       );
     });
   
     // Open Razorpay Checkout
     razorpay.open(options);
   }
   
   // Utility function for showing alert dialogs
   void showAlertDialog(BuildContext context, String title, String message) {
     showDialog(
       context: context,
       builder: (BuildContext context) {
         return AlertDialog(
           title: Text(title),
           content: Text(message),
           actions: [
             ElevatedButton(
               onPressed: () {
                 Navigator.of(context).pop();
               },
               child: const Text('Continue'),
             ),
           ],
         );
       },
     );
   }
   

6. Save the custom action.

Step 4. Configure the Razorpay API Key

• Replace 'rzp_test_abcdefgh' in the code with your Razorpay API Key.

  • Test keys are used for development purposes, while live keys are used for production.

Step 5. Add the Action to Your Widget

1. Navigate to the widget (e.g., a payment button) where you want to trigger Razorpay Checkout.

2. Assign the razorpayCheckout custom action to the widget’s action.

3. Pass the required parameters:

   • amount: Payment amount in rupees (e.g., 500 for ₹500).

   • name: Your app or company name.

   • description: Payment description.

   • contact: User’s phone number.

   • email: User’s email address.

That's how it will look after you successfully integrate it 👇

By following these steps, you can seamlessly integrate Razorpay into your FlutterFlow web app using custom actions. This approach provides greater flexibility and ensures a smooth payment experience for your users.

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