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.

Download the SDK#

Download the Razorpay-React Native SDK (Bitcode enabled) SDK v2.0.7

Minimum software requirements:

  • React version 16.5.0
  • React Native version 0.57.1
    This version of the Razorpay-React Native SDK supports Xcode 10. We have fixed the [known issues of React Native on Xcode 10] in the current version of our SDK and can be implemented(https://github.com/facebook/react-native/issues/19573) until the next release React Native.

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: 'netbaking', 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.

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

paytm

notes[order_id]

all

123

description

all

Any description

License:
Razorpay-React Native SDK is Copyright (c) 2018 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.