API ReferenceIntegrationsKnowledge Base

React Native SDK for Custom UI

The React Native SDK acts as a wrapper around the Razorpay Custom UI SDK in order to build a dynamic and responsive Checkout interface for your iOS or Android application.

Generate API Key#

Note:
You have to generate separate API Keys for the test and live modes. No money is deducted from your account in test mode.

To generate API key:

  1. Log into your Dashboard.
  2. Select the mode for which you want to generate the API key from the menu ribbon.
  3. Navigate to Settings.
  4. Click API Keys.
  5. Click Generate Key to generate key for the selected mode.

The Key Id and Key secret appear in a pop-out window. You also have the option to download the Key Details.

Watch the short animation below for more information.

Note:
After generating the keys from the Dashboard, download and save them securely. If you do not remember your API Keys, you need to re-generate it from the Dashboard and replace it wherever required.

Usage#

Use the index.js file within the example folder as a reference to integrate React Native with Razorpay.

Tip:
To avoid duplicate module names, make a copy of the example project onto a separate folder and run the project.

Copy$ npm i

Steps#

  1. Import the Razorpay module to your component:

    Copyimport Razorpay from 'react-native-customui';
  2. Call the Razorpay.open method with the payment options as shown below:

    Copy<TouchableHighlight onPress={() => { var options = { description: 'Credits towards consultation', currency: 'INR', key_id: '<YOUR_KEY_ID>', amount: '5000', email: 'gaurav.kumar@example.com', contact: '9123456789', method: 'netbanking', bank: 'HDFC' } Razorpay.open(options).then((data) => { // handle success alert(`Success: ${data.razorpay_payment_id}`); }).catch((error) => { // handle failure alert(`Error: ${error.code} | ${error.description}`); }); }}>

    This method returns a JavaScript Promise where a then function is used for payment success and catch for payment failure.

Note: Click here to learn about passing callback URL.

Custom UI Options#

Following is a descriptive list of valid custom UI options:

Field Name

Valid in method

Sample Value

currency

all

INR

amount

all

5000

email

all

gaurav.kumar@example.com

order_id

all

order_9A33XWu170gUtm

contact

all

9123456780

method

all

card, netbanking, wallet

card[name]

card

Gaurav Kumar

card[number]

card

4111111111111111

card[expiry_month]

card

10

card[expiry_year]

card

20

card[cvv]

card

908

bank

netbanking

SBIN

wallet

wallet

Freecharge

vpa

UPI

gauravkumar@axis

notes[order_id]

all

123

description

all

Any description

License:
Razorpay-React Native SDK is Copyright (c) 2019 Razorpay Software Pvt. Ltd. It is distributed under the MIT License.

For any further assistance with integration, reach out to us from our support page.