
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
react-native-razorpay
Advanced tools
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
Using npm:
npm install --save react-native-razorpay
or using yarn:
yarn add react-native-razorpay
For Expo Users:
npx expo install react-native-razorpay
# 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 step
# run
yarn react-native run-ios
$ npm install react-native-razorpay --save
// Install the Razorpay React Native Standard SDK using the npm command.
react-native link react-native-razorpay
// 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.
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
In XCode, in the project navigator:
node_modules/react-native-razorpay
.xcodeproj
fileIn XCode, in the project navigator, select your project.
libRNDeviceInfo.a
from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries.xcodeproj
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
and $(SRCROOT)/../../React
Run your project (Cmd+R)
android/app/src/main/java/[...]/MainApplication.java
import com.razorpay.rn.RazorpayPackage;
to the imports at the top of
the filenew RazorpayPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-razorpay'
project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-razorpay/android')
android/app/build.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,
npx expo prebuild
After which the application will be installed on the device/emulator.
npx expo run:[ios|android] --device
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
Import RazorpayCheckout module to your component:
import RazorpayCheckout from 'react-native-razorpay';
Call RazorpayCheckout.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',
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(`Success: ${data.razorpay_payment_id}`);
}).catch((error) => {
// handle failure
alert(`Error: ${error.code} | ${error.description}`);
});
}}>
A descriptive list of valid options for checkout is available (under Manual Checkout column).
If you are using proguard for your builds, you need to add following lines to proguard files
-keepattributes *Annotation*
-dontwarn com.razorpay.**
-keep class com.razorpay.** {*;}
-optimizations !method/inlining/
-keepclasseswithmembers class * {
public void onPayment*(...);
}
LSApplicationQueriesSchemes
"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.
We ♥ open source software! See our other supported plugins / SDKs or contact us to help you with integrations.
FAQs
React Native wrapper for Razorpay
The npm package react-native-razorpay receives a total of 7,101 weekly downloads. As such, react-native-razorpay popularity was classified as popular.
We found that react-native-razorpay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.