Integrating Razorpay Payment Gateway to your React Native application
Razorpay is an Indian payments solution provider that allows businesses to accept the process and refund payments with its partners.
Steps involved
- Package Installation
- Environment setup for Android and IOS
- Build Integration
Sign up for Razorpay Account and generate the API Keys from the Razorpay Dashboard. With the help of Test, keys simulate a sandbox environment. No actual monetary transaction happens by using the Test keys. Use Live keys once you have thoroughly and end-to-end tested the application and are ready to go live.
Package Installation
Install a Razorpay package using the node package manager (npm) or Yarn
npm i react-native-razorpay
or using yarn:
yarn add react-native-razorpay
Environment setup for Android and IOS
For IOS
Cd ios and open podfile
And change the platform from IOS 9.0 to 10.0
Pod install // cocoapods need this extra step to install required modules
For Android
Open the mainApplication.java file and do below necessary changes
- To the imports section at the top of the file, add import com.razorpay.rn.RazorpayPackage.
- Add new RazorpayPackage() to the list returned by the getPackages() method
Open android/settings.gradle file and add below changes
Add below code inside settings.gradle file
include ':react-native-razorpay' project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-razorpay/android')
The dependents block in the code should have the following lines added.
android/app/build.gradle: implementation project(':react-native-razorpay')
Build Integration
Import below line to the file to use razorpay in the app
Import RazorpayCheckout from ‘react-native-razorpay’
Add the below code to the file inside render to enable the payments page when clicking on the button.
It will open Razorpay SDK and it will return a success or failure response
Call RazorpayCheckout.open the method with the payment options described in Document. The method returns a JS Promise where the part corresponds to a successful payment and the catch part corresponds to payment failure if any Error happens.
<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}`); }); }}>