Ticker

6/recent/ticker-posts

Embedding a RazorPay interface in React Native app

 

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.

RazorPay interface

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.