Razorpay

Razorpay is a leading online payment gateway widely used by businesses in India to accept and process digital payments securely.

It provides a platform for merchants and businesses to integrate payment solutions into their websites and mobile apps. It allows customers to make online payments using various payment methods such as credit cards, debit cards, net banking, UPI (Unified Payments Interface), and digital wallets.

Currently, publishing to the web with Razorpay enabled is restricted due to some regulations.

Prerequisites

Before starting to set up payments, make sure you have,

  1. Completed all the steps of Firebase Setup for your project.

  2. Enabled Firebase Authentication for your project.

  3. Upgraded your Firebase project to Blaze Plan. We use Firebase Cloud Functions to process a transaction.

Razorpay Integration

Integrating Razorpay in your app comprises the following steps:

1. Setup Razorpay

Setting up the Razorpay payments includes creating an account, enabling test mode, acquiring the keys from your Razorpay account, and adding them to your project.

You should always try out payments in a test mode before releasing them to your production application. Hence, the instructions below will guide you on how to get the test keys.

Here are the steps:

  1. Create a new Razorpay account from here. If you already have an account, log in.

  2. Once you are logged in, turn on the Test Mode. Test mode helps you simulate the payments without involving real money transactions.

  3. From the left side menu, select Account & Settings > Under Website and app settings section, select API keys.

  4. If you're asked to add a website link but your app isn't published yet, you can temporarily publish it to a subdomain using our web publishing feature. Later, you can update this to your actual domain in both FlutterFlow and Razorpay.

  5. Click Generate Test Key and copy the Key Id and Key Secret. To regenerate, click on Regenerate Test Key and choose how you want to deactivate the old key.

Regenerate Test Key
  1. Return to the FlutterFlow project, navigate to Settings and Integrations > In App Purchases & Subscriptions > Razorpay. Use the toggle to Enable Razorpay Payments.

  2. Under Test Credentials, paste the Key ID ad Key Secret obtained in the previous step.

  3. Set your Business Name.

  4. Click the Deploy button.

2. Trigger Razorpay payment

To initiate a payment using Razorpay, you must use the Razorpay Payment action. See how to use this action on the following page:

pageRazorpay Payment

3. Testing

You can test Razorpay payments on Run mode, Test mode, an emulator/Simulator, or a physical device.

To test payments in Test or Run mode:

  1. In your FlutterFlow project, navigate to Settings and Integrations > In App Purchases & Subscriptions > Razorpay.

  2. Make sure the Is Production is disabled.

  3. Make sure you have entered the correct Test Credentials.

  4. Run your app in Test mode.

  5. To test the purchase, you can try any method from here.

4. Releasing to production

Once you are done testing your Razorpay integration and you are ready to go live, follow the steps below:

  1. Complete KYC (or the Activation Form) to access the Razorpay Live API.

  2. Log into the Razorpay Dashboard and switch to Live Mode on the menu.

  3. From the left side menu, select Account & Settings > Under Website and app settings section, select API keys.

  4. Click Generate Live Key and copy the Key Id and Key Secret. To regenerate, click on Regenerate Live Key and choose how you want to deactivate the old key.

  5. Return to the FlutterFlow project, navigate to Settings and Integrations > In App Purchases & Subscriptions > Razorpay. Turn on the Is Production.

  6. Under Production Credentials, paste the Key ID and Key Secret obtained in the previous step.

  7. Click the Deploy button.

  8. Test your app.


Last Updated Date: February 6, 2024

Last updated