react-native-customui
v2.2.5
Published
React Native wrapper for Razorpay SDK
Downloads
6,315
Readme
react-native-customui
React Native wrapper around our Android and iOS mobile SDKs
The following documentation is only focussed on the react-native wrapper around our Android and iOS sdks. To know more about our react-native SDK, refer to the following documentation -
https://razorpay.com/docs/payment-gateway/react-native-integration/
To know more about Razorpay payment flow and steps involved, read up here: https://docs.razorpay.com/docs
Installation
Using npm:
npm install --save react-native-customui
or using yarn:
yarn add react-native-customui
For Expo Users:
npx expo install react-native-customui
Linking
Automatic
$ npm install react-native-customui --save
// Install the Razorpay React Native Custom UI SDK using the npm command.react-native link react-native-customui
// Link the SDK with React Native Project using Xcode.Drag the
Razorpay.framework
file from the Libraries folder and drop it under the root folder, for more info follow this link, after this go to Target > General Settings> Framework, Libraries and Embedded Content section, set the Embed status of Razorpay.framework to Embed & Sign.Also make sure the razorpay framework is added in the embedded binaries section and you have Always Embed Swift Standard Binaries set to yes in build settings.
Manual
Add the following line to your build targets in your Podfile
pod 'react-native-customui', :path => '../node_modules/react-native-customui'
Then run pod install
In XCode, in the project navigator:
- Right click Libraries
- Add Files to [your project's name]
- Go to
node_modules/react-native-customui
- Add the
.xcodeproj
file
In XCode, in the project navigator, select your project.
- Add the
libRNDeviceInfo.a
from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries - Click
.xcodeproj
file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic). - Look for Header Search Paths and make sure it contains both
$(SRCROOT)/../react-native/React
and$(SRCROOT)/../../React
- Mark both as recursive (should be OK by default).
Run your project (Cmd+R)
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.razorpay.rn.RazorpayPackage;
to the imports at the top of the file - Add
new RazorpayPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-razorpay' project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-customui/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':react-native-customui')
Note for Expo Applications:
After adding the react-native-razorpay package,the option to prebuild
the app must be used(this generates the android/ios platform folders in the project to use native-modules). Command for which,
npx expo prebuild
After which the application will be installed on the device/emulator.
npx expo run:[ios|android] --device
Usage
Sample code to integrate with Razorpay can be found in index.js in the included example directory.
To run the example, simply do the following in example directory and then link iOS SDK as explained in the previous section:
$ npm i
Steps
Import Razorpay module to your component:
import Razorpay from 'react-native-customui';
Call
Razorpay.open
method with the paymentoptions
. The method returns a JS Promise wherethen
part corresponds to a successful payment and thecatch
part corresponds to payment failure.<TouchableHighlight onPress={() => { var options = { description: 'Credits towards consultation', currency: 'INR', key_id: 'rzp_test_1DP5mmOlF5G5ag', amount: '5000', // amount in currency subunits. Defaults to INR. 100 = 100 paise = INR 1. email: '[email protected]', contact: '9999999123', 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}`); }); }}>
UPI Intent flow
For using UPI Intent flow in Razorpay's React Native Custom UI plugin, you have to follow below steps.
Steps
Call getAppsWhichSupportUPI function for getting all the available apps in users phone.
Razorpay.getAppsWhichSupportUPI((data) => { console.log("Supported Apps",data); });
Ensure that the
upi_app_package_name
is passed from thegetSupportedUPIApps()
method value. Otherwise, it will not pass the validation.var options = { description: 'Credits towards consultation', currency: 'INR', key_id: 'rzp_test_1DP5mmOlF5G5ag', amount: '5000', // amount in currency subunits. Defaults to INR. 100 = 100 paise = INR 1. email: '[email protected]', contact: '9999999123', method: 'upi', upi_app_package_name : "google_pay", '_[flow]' : "intent" }
Your iOS app must seek permission from the device to open the UPI PSP app that the customer selects on the Checkout. For this, you must make the following changes in your iOS app's info.plist file.
<key>LSApplicationQueriesSchemes</key> <array> <string>tez</string> <string>phonepe</string> <string>paytmmp</string> </array>
A descriptive list of valid options for customui options is available here.
License
react-native-customui is Copyright (c) 2021 Razorpay Software Pvt. Ltd. It is distributed under the MIT License.
We ♥ open source software! See our other supported plugins / SDKs or contact us to help you with integrations.