Creating a digital payment gateway in an app
may sound difficult but not with the React Native framework. Here, in this
tutorial blog, we will learn how you can embed a RazorPay interface in React
Native app. As specific to the context, we will be using the React Native app development company for completing this
task.
Let’s see how.
Before getting into the main steps, you have
to cover some prerequisite criteria.
Listing the Prerequisites criteria
Here, you have to meet two criteria as
pre-requisite knowledge.
- The first thing that you have to become familiar with is the setup procedures of the React Native environment. You have to install Node.js, Android Studio, and Visual Code editor. Check the blog article for a detailed explanation of the set-up procedures. Without setting the environment, you cannot move forward with using the cross-platform app development framework, React Native.
- Also, you have to understand the utility of API keys in building connections with the web server. Visit the linked article to get a clear knowledge of the API and its relevant calling process.
Now we will cover the section of dependencies
support that we will use to embed the RazorPay interface much easier.
Considering third-party RN library
It is the most important segment in the
current project. Installing a required third-party React Native library and
importing relevant components from the same has shortened the length of the
codebase.
You may be curious to know the name and its
installation steps. It is the react-native-razorpay. It has a simple installation process. Just
open cmd from your app folder and run
npm
install --save react-native-razorpay
It is as
simple as child's play but you have to take note of certain parameters. It is
that this command will be applicable only if you are using the React Native CLI
tool and not the Expo CLI tool. It is because the native SDKs that are embedded
in these third-party libraries do not meet the compatibility test with the Expo
CLI tool.
Learning to build a React Native app
Go to your home screen and make a folder of
any name. I have preferred to give it the name React-Native-Project.
Open the folder and open cmd from this folder. As the cmd opens, run react-native
init RazorPay --version 0.68.1. This will build an RN app named RazorPay.
Here as you can see, we are using the RN framework of version 0.68.1. You will
use the same version.
Wait for some time until the app is created
in your React-Native-Project folder. It is a basic app. You have to amend some
changes in the App.js file of this app. For this, go to the code editor from
the RazorPay app and start doing the changes.
Explaining the codebase formation in the App.js
Add the same code syntax as I specify in
segments. Here I will provide a detailed explanation for better understanding.
import { View, Text,Button } from
'react-native'
import React from 'react'
import RazorpayCheckout from
'react-native-razorpay';
As you can find, you need to import the core
RN components from the react and react-native libraries. The most
vital component that I was talking about earlier in this current project is RazorpayCheckout.
You need to import the component RazorpayCheckout from
the react-native-razorpay to ensure its use in the codebase.
You need to introduce an App named
function. Now, following this, you have to add a function payNow.it
will be called later in the codebase whenever the user clicks on a built
button. The payNow function will have several parameters namely
image, currency, description, amount, name, key, and prefill. As you can see,
there is a color specified for the function.
The most necessary parameter is the key. It
is an API key. Although the API key that you are using for the project is a
demo publishable key, you have to generate a live key when you will be building
a real app for your client and get an actual transaction. Since we are using a
fake key, the money transaction will not be possible in the app. You can use
the key to test the app and build a demo Razorpay payment interface in your
React Native app. To create an API key, you have to visit the official site of Razorpay and
generate one by logging into your account.
Here, the amount ‘101’
is in paise. This implies that the user will see INR1.01 on the app screen.
Here, it is in the INR currency format. ‘Foo’ as the
value of the name is a specific name given to the merchant. It will appear
on the final checkout screen of the app. You can find a URL given under the image.
It is a picture that will be also displayed on the checkout screen of the
payment gateway.
The other parameters are optional. Here is
the syntax given below.
const App = () => {
const
payNow = () => {
var
options = {
description: 'Credits towards consultation',
image: 'https://i.imgur.com/3g7nmJC.png',
currency: 'INR',
key: 'rzp_test_ZXKvfH48PobplE', // Your api key
amount: '101',
name: 'foo',
prefill: {
email: 'void@razorpay.com',
contact: '9191919191',
name: 'Razorpay Software',
},
theme: {color: '#F37254'},
};
Now, open the payment gateway of Razorpay.
For this, you have to use an object named options and consider it as the argument. Later, this
object will give you a promise. The nature of the promise will depend on the
status of the transaction.
It may be successful or not. If it is
successful, it will give you a Success alert with the user’s Razorpay Payment ID. On
the other hand, if it is not successful, you have to use the catch()
function to specify the error. Here, the error will
have a description and a code. The code syntax for this explanation is
given below.
RazorpayCheckout.open(options)
.then(data => {
// handle success
alert(`Success: ${data.razorpay_payment_id}`);
})
.catch(error => {
alert(`Error: ${error.code} | ${error.description}`);
});
};
Add styling objects to design the text elements
and the container which holds the text ‘100’. Here, you have to use flex, justifyContent,
and alignItems for the elements defined under the View component.
Use fontSize, alignSelf, marginVertical,
and color for the elements stored under the Text component.
Let’s see how you can use these styling objects.
return (
<View style={{flex: 1, justifyContent: 'center', alignItems:
'center'}}>
<Text
style={{
fontSize: 25,
alignSelf: 'center',
marginVertical: 20,
color: '#000000',
}}>
100
</Text>
Add a button with the label “Pay Now” on it.
Also, use an onPress prop with the button to call the payNow function
defined above in the codebase. Note that it should be wrapped under a View component. Close the codebase with the line export
default App. it will allow you to make the App function
available for use in different files. The code syntax is:
<Button title="Pay Now"
onPress={payNow} />
</View>
);
};
export default App;
As we are already done with creating the
codebase, let's see how you can test the app.
Executing the project on an emulator screen
Click on the cmd from your Razorpay app. Get
all the required packages using the command npm install.
After this step, pass npx react-native run-android.
This will make the emulator appear on your dev system. As soon as it pops up,
you will see a screen similar to image 1. Click on the pressable button to get
to the next screen as in image 2. This is the last screen that it will direct
you to. As we have not used a live API key, it won't go further to make the
money transaction successful.
I hope you have enjoyed the entire process
and acquired major learnings from the same. Now you can play with the codebase,
especially with the styling parameters to give it a unique touch.
