react-native-customui

React Native wrapper around our Android and iOS mobile SDKs

Installation
Linking
Usage

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

Linking

Automatic

iOS

$ 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

iOS (via CocoaPods)

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

iOS (without CocoaPods)

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)

Android

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 the getPackages() 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')
```

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 payment options. The method returns a JS Promise where then part corresponds to a successful payment and the catch part corresponds to payment failure.

<TouchableHighlight onPress={() => {
  var options = {
    description: 'Credits towards consultation',
    currency: 'INR',
    key_id: 'rzp_test_1DP5mmOlF5G5ag',
    amount: '5000',
    email: 'void@razorpay.com',
    contact: '9999999123',
    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}`);
  });
}}>

A descriptive [list of valid options for customui][options] is available [here] : https://docs.razorpay.com/v1/page/android-custom-ui-sdk-v2x

License

We ♥ open source software! See our other supported plugins / SDKs or contact us to help you with integrations.

scripbox / react-native-customui