React Native Razorpay

Introduction to react-native-razorpay Package

react-native-razorpay is a package that provides an easy way to integrate Razorpay payment gateway in React Native apps. It supports both iOS and Android platforms and exposes the native Razorpay SDKs to JavaScript.

react-native-razorpay allows you to open a checkout form in your app and collect payment details from your customers. It also supports various features such as custom UI, pre-filled fields, callback events, etc.

Prerequisites

To use react-native-razorpay in your React Native project, you need to have the following:

• A Razorpay account with an API key and a secret key. You can sign up for a free account at https://razorpay.com/ and get your keys from the dashboard.
• A React Native project with React Native version 0.60 or higher. You can create a new project using the command:

To create and set up a new Razorpay account API key and a secret key, you need to do the following steps:

1. Go to https://razorpay.com/ and sign up for a free account with your email or Google account.
2. Log into your dashboard with your credentials and select the mode (Test or Live) for which you want to generate the API key.
3. Click on Settings and then click on API Keys.
4. Click on Generate Test Key or Generate Live Key depending on your mode.
5. The Client Id and Secret Key will appear. Copy these keys and click on OK.
6. Now you can use these keys in your app to integrate with Razorpay payment gateway.
7. You can find more details about how to generate API keys on Razorpay in their official documentation: https://razorpay.com/docs/payment-gateway/webhooks/

Required Installations

To install react-native-razorpay in your React Native project, you can use either npm or yarn:

If you are using Expo, you cannot use react-native-razorpay as it requires native modules. You need to eject your Expo project or use Expo Custom Development Client.

Important Linkings

To use react-native-razorpay in your app, you need to do some additional steps depending on your platform and use case.

iOS

For iOS, you need to do the following steps:

• Add the following line to your Podfile:

• Run the following command to install the pods:

• Add the following line to your Info.plist file:

• Add the following code to your AppDelegate.m file:

Android

For Android, you need to do the following steps:

• Add the following line to your android/app/build.gradle file:

• Add the following line to your android/settings.gradle file:

• Add the following line to your MainApplication.java file:

Custom UI

If you want to use a custom UI for your checkout form, you need to do the following steps:

• Create a custom layout file in your android/app/src/main/res/layout folder. For example, you can create a file named razorpay_custom_layout.xml with the following content:

• Add the following line to your android/app/src/main/res/values/strings.xml file:

Add the following line to your Info.plist file:

Setting Up the Payment Gateway With React Native App

To set up the React Native Razorpay payment gateway with your app, you need to do the following steps:

• Import react-native-razorpay in your app component:

• Create a function that opens the checkout form and handles the payment events:

In this function we will:

1. Create an options object with payment details such as amount, currency, description, etc.
2. Open the checkout form with the options object
3. Handle payment success event
4. Handle payment error event
5. Handle external wallet selection

Call the function when you want to initiate the payment:

In the above code, we used a single method called open() that takes an options object as a parameter and opens the Razorpay React Native checkout UI in a webview. The options object contains various parameters that we can customize according to our needs. Some of the important parameters are:

• key: This is the API key that we get from our Razorpay account. We need to use the test key for testing purposes and the live key for production purposes.
• amount: This is the amount that we want to charge from the user in paise. For example, if we want to charge Rs. 100, we need to pass 10000 as the value.
• currency: This is the currency code that we want to use for the payment. For example, INR for Indian Rupee, USD for US Dollar, etc.
• name: This is the name of our app or business that will be displayed on the checkout UI.
• description: This is an optional description that we can provide for the payment.
• order_id: This is an optional parameter that we can use to link the payment to an order. An order is a Razorpay entity that represents a payment request with a fixed amount and currency. We can create an order using the React Native Razorpay API and pass its id as the value of this parameter. This will ensure that the payment amount and currency are consistent with the order and also enable us to track the payment status using the order id.
• prefill: This is an optional object that we can use to prefill some fields on the checkout UI such as email, contact, method, etc. This can improve the user experience and reduce the chances of errors.
• theme: This is an optional object that we can use to customize the appearance of the checkout UI such as color, image, etc.

The open method returns a promise that resolves with a response object if the payment is successful or rejects with an error object if the payment fails or is cancelled by the user. The response object contains some useful information about the payment such as id, order_id, signature, etc. The error object contains some details about the error such as code, description, source, etc.

We can also use the onExternalWalletSelection callback to handle the case when the user selects an external wallet such as Paytm, PhonePe, etc. This callback takes two parameters: walletName and paymentData. The walletName is the name of the wallet that the user selected and the paymentData is an object that contains some information about the payment such as id, order_id, signature, etc. We can use this callback as follows: