React Native wrapper for Razorpay
npm install react-native-razorpay
React Native wrapper around our Android and iOS mobile SDKs
* Prerequisites
* Installation
* Requirements
* Linking
* Usage
* Example App
* Proguard Rules
* Notes
* FAQ's
* Contributing
* License
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:
- Learn about the Razorpay Payment Flow.
- Sign up for a Razorpay Account and generate the API Keys from the Razorpay Dashboard. Using the Test keys helps simulate a sandbox environment. No actual monetary transaction happens when using the Test keys. Use Live keys once you have thoroughly tested the application and are ready to go live.
Using npm:
``shell`
npm install --save react-native-razorpay
or using yarn:
`shell`
yarn add react-native-razorpay
For Expo Users:
`shell`
npx expo install react-native-razorpay
- iOS 10.0+ / macOS 10.12+ / tvOS 10.0+ / watchOS 3.0+
- Xcode 11+
- Swift 5.1+
iOS
`sh`install
npm install react-native-razorpay --save
cd ios && open podfile # Change the platform from iOS 9.0 to 10.0
pod install && cd .. # CocoaPods on iOS needs this extra steprun
yarn react-native run-ios$3
1. $ npm install react-native-razorpay --save // Install the Razorpay React Native Standard SDK using the npm command.
2. react-native link react-native-razorpay // Link the SDK with React Native Project using Xcode.
3. 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.
6. 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.
iOS (via CocoaPods)
Add the following line to your build targets in your Podfile
pod 'react-native-razorpay', :path => '../node_modules/react-native-razorpay'
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-razorpay.xcodeproj
* Add the 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_.xcodeproj
* Click file you added before in the project navigator and go the _Build Settings_ tab. Make sure _All_ is toggled on (instead of _Basic_).$(SRCROOT)/../react-native/React
* Look for _Header Search Paths_ and make sure it contains both and $(SRCROOT)/../../React
* Mark both as recursive (should be OK by default).
Run your project (Cmd+R)
Android
1. Open up android/app/src/main/java/[...]/MainApplication.javaimport com.razorpay.rn.RazorpayPackage;
- Add to the imports at the top ofnew RazorpayPackage()
the file
- Add to the list returned by the getPackages() methodandroid/settings.gradle
2. Append the following lines to :`
gradle`
include ':react-native-razorpay'
project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-razorpay/android')
android/app/build.gradle
3. Insert the following lines inside the dependencies block in:`
gradle`
implementation project(':react-native-razorpay')
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,`shell`
npx expo prebuild`
After which the application will be installed on the device/emulator.shell`
npx expo run:[ios|android] --device
Sample code to integrate with Razorpay can be found in
[index.js][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
1. Import RazorpayCheckout module to your component:
`js`
import RazorpayCheckout from 'react-native-razorpay';
2. Call RazorpayCheckout.open method with the payment options. The methodthen
returns a JS Promise where part corresponds to a successful paymentcatch
and the part corresponds to payment failure.`
jsSuccess: ${data.razorpay_payment_id}
var options = {
description: 'Credits towards consultation',
image: 'https://i.imgur.com/3g7nmJC.png',
currency: 'INR',
key: '', // Your api key
amount: '5000',
name: 'foo',
prefill: {
email: 'void@razorpay.com',
contact: '9191919191',
name: 'Razorpay Software'
},
theme: {color: '#F37254'}
}
RazorpayCheckout.open(options).then((data) => {
// handle success
alert();Error: ${error.code} | ${error.description}
}).catch((error) => {
// handle failure
alert();`
});
}}>
A descriptive [list of valid options for checkout][options] is available (under
Manual Checkout column).
-keepattributes Annotation
-dontwarn com.razorpay.**
-keep class com.razorpay.* {;}
-optimizations !method/inlining/
-keepclasseswithmembers class * {
public void onPayment*(...);
}
`Things to be taken care
- The react native plugin is wrapper around native SDK, so it doesn't work with the tools like expo which doesn't support native modules.
FAQ's
- For UPI Intent in iOS, the info.plist in iOS should be modified to include
LSApplicationQueriesSchemes
- For Bare React-Native Apps:
- info.plist can directly be modified from the xcode project. LSApplicationQueriesSchemes takes as array value and can currently include only ["tez","phonepe","paytmmp"]
- For Expo Apps:
- Directly modifying info.plist is discouraged, and hence this should be added in app.json
`shell
"ios": {
"infoPlist": {
"LSApplicationQueriesSchemes": [
"tez",
"phonepe",
"paytmmp"
]
}
}
``See the [CONTRIBUTING] document. Thank you, [contributors]!
react-native-razorpay is Copyright (c) 2020 Razorpay Software Pvt. Ltd.
It is distributed under [the MIT License][LICENSE].
We ♥ open source software!
See [our other supported plugins / SDKs][integrations]
or [contact us][contact] to help you with integrations.
[contact]: mailto:integrations@razorpay.com?subject=Help%20with%20React%20Native "Send us a mail"
[CONTRIBUTING]: CONTRIBUTING.md "Our contributing guidelines"
[contributors]: https://github.com/razorpay/react-native-razorpay/graphs/contributors "List of contributors"
[index.js]: example/SampleProject/index.js "index.js"
[integrations]: https://razorpay.com/integrations "List of our integrations"
[ios-docs]: https://docs.razorpay.com/v1/page/ios-integration "Documentation for the iOS Integration"
[LICENSE]: /LICENSE "MIT License"
[options]: https://docs.razorpay.com/docs/checkout-form#checkout-fields "Checkout Options"
[wiki]: https://github.com/razorpay/react-native-razorpay/wiki/Manual-Installation