Production Grade PAYTM Payment Gateway Integration in React Native App

So recently when I was developing my mobile application using react native, I want to integrate the payment gateway into my app to make transactions happen in flash of a second, instead of an admin manually collecting the money and updating the payment from his interface.

I won’t dig deeper into what my application does but, from payment gateway perspective its like a user has to pay certain amount of money every month based on the bill generated and he can pay the amount in installments.

What you will learn in this article ?

You will get a hands on integrating paytm at production level in a react native application. So what are we waiting for ? Let’s get started.

First,we will get to see the interface part and dig deeper into the code.

So this is how the pending payment’s page looks like. It has few details

• Which team does the payment belong to.
• Who is maintaining that team.
• What’s the amount I have to pay.
• What’s the amount I’ve already paid and finally
• What’s the due amount that I have to pay.

So when I click on Pay Now it opens up a modal asking me, how much of the due amount I am willing to pay.

Once I’ve entered the amount that I am willing to pay currently, it pop’s up with available payment gateways that are currently supported through which I can make a payment.

For this article I will be demonstrating about paytm. So once user clicks on the paytm button, that will redirect to paytm page where you can send the amount via different options available (BHIM UPI, Net Banking, Credit or Debit Cards or Paytm Wallet Balance).

Once I agree and select Pay Now, it will make a transaction and all we have to do is to display the transaction status to the user(There are whole bunch of things to be done in the back end which we will be going through).

This is a dummy page I’ve created on successful or failure transaction, but it can be beautified using necessary CSS.

So that we’ve got a basic end to end understanding of what my app does, its time to dig into some code.

I will be using native-base(library for react native components) as I’ve found that’s the best possible library in react-native. Let me explain you what the code does.

Starting from Line No: 97 it basically displays the payment details on a card component. At the end, there is a button named Pay Now on Line:177.

Once I click on the button, it changes the state of one variable modalVisible to true. Which allows the a modal t be popped up on the screen that asks what’s the amount I am willing to pay.

Once I’ve clicked on the Pay Now(Button created on Line No: 58) button on the modal after entering the transaction Amount, it sets modalVisible to false and isBottomModalVisible to true, which mean the modal sets its visibility to false and let the bottom modal which has all the payment options popped over.

Starting from line no:64 my bottom modal code starts where it has two buttons. Once is for paytm and one is for google pay.

Once I’ve made an onPress event on paytm button, I generate orderID, customerID, transactionAmount entered in the previous modal and navigate to another component using react-navigation.

This is where all the magic starts

What I am doing over here is, I am getting the orderID, customerID,transactionAmount passed from my previous component and I am rendering my backend server API via WEBVIEW with those parameters passed.

Now before going to the backend implementation of how we process a transaction, we need to perform couple of steps.

You should actually get a doubt, how do paytm transfer money to the admin account with providing any details.If you got the point, you are on the right track. So lets fetch our merchant details (The admin is an merchant to paytm now).

Paytm Checkout: Payment Gateway integration for your website

Go to the above mentioned page, and then login with your mobile number and password( If not created an account, create one with your mobile number).

Once logged in there are few options available in paytm out of which click on the Setup Payment gateway Button

Once You click onthe payment Gateway button, you will be presented with a screen Test API Details, Production API Details

• Test API Details -> You don’t actually make a transaction but it will give you an overview.
• Production API Details -> Will make a transaction happen end to end.

In this article, I am going to focus on Production Level Integration, so I am going with production API Details. On the top right corner, you will get an option to activate your account, which indeed asks your bank account details to which all the payments made by clients are credited.

On the first screen, specify your pan number.

As we are not an enterprise or large scale product, we will go with starter plan that covers small scale businesses as well and it’s an instant activation.

Once you’ve clicked on Activate Now for Starter plan, it prompts you to enter your bank details to which the payments had to be credited. Please Enter those details and Click on Start Accepting Payments.

Once the step is done, it will provide you with

• Merchant ID
• Account Secret Key
• Website (DEFAULT for production)
• Industry Type ( Retail in my case)

Now copy all those details as we are gonna use them shortly in our server.

Now that we have paytm credentials, our client ready to call the server, its time for us to spin up a node JS server.

We need to create two API’s

• one to make a transaction with PAYTM
• Second, to get the transaction response from paytm and call react native’s component to notify about the transaction status.

Steps to start a nodeJS server(Using express framework). Prerequisites -> node,npm installed in the system

sudo npm install -g express
cd <workspace_dir>
express <project_name>
npm install (To install all the dependencies that are required to start a nodeJS server).

Once the server initialisation is done, lets go to our app.js and change some code and expose two API’s.

First change these two lines from

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());

to

app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json())

This will ensure a POST request body will be sent to server.

At the end of the file, add these few lines to start the server by listening to a port of your wish

app.listen("5000", (err, data) => {
if (err) {
    console.log(err)
}
    console.log("Server started listening at 5000")
})

Once the backend server is set, go to this directory and copy checksum.js and crypt.js into your server root folder inside a directory called paytm(You need to create a directory called paytm)

Paytm-Payments/Paytm_App_Checksum_Kit_NodeJs

Your project directory has to look this way.

So, its time to create our two API’s that’s required for the integration.

• One which is being rendered from the react native App.
• Second, a callback URL or probably webhook which we pass to paytm, which internally makes a callback to this once to notify about the transaction status.

My first API -> /createCheckSum

Let me get you through each and every parameter.

MID -> Merchant ID (Which is generated on our paytm console. Based on this payments are transacted. So be careful to provide a valid one)

ORDER_ID -> Each order has to be unique (Better to generate with a combination of timeStamp+ customerName+<addOns>)

CUST_ID -> The ID of the customer

INDUSTRY_TYPE_ID -> Provided by PAYTM along with merchant ID.

CHANNEL_ID -> WAP(for react native or mobile applications). WEB(for web applications)

TXN_AMOUNT -> Amount to be transacted.

WEBSITE -> Should be default(for production), webstaging(for debug)

CALLBACK_URL -> This is the Second URL that we are going to build to which paytm makes a callback once the transaction is complete.

EMAIL -> EmailID of the customer( Once transaction is made an email with invoice is sent to customer from paytm)

MOBILE_NO -> Mobile Number of the customer( Once transaction is made an SMS with invoice is sent to customer from paytm)

Now comes the CHECKSUMHASH -> This genchecksum is in the checksum.js file which we downloaded from paytm git repo. Call the function with 3 parameters

• The paramArray with all the details filled.
• The merchant key which is a secret key given by paytm
• A callback which will send the checksum hash after successfull completion of the function.

Now with all the data, you need to create a dynamic form with and make a submit request to https://securegw.paytm.in/order/process which will redirect to paytm page.

Once this step is successfully done, it means we have successfully handed over the transaction to the next phase and from now its all paytm’s responsibility to make the transaction succesfull.

Make a payment through whatever method you want and once the payment is done, paytm will call our callback url which is a POST API. So let’s have a look at that.

So once we receive the callback we need to check is a transaction is successful or not based on the body sent by PAYTM.

It has a field called STATUS which has two values (TXN_SUCCESS and TXN_FAILED) . Based on the status we need to render a dynamic HTML template with title (‘true’ or ‘false’) which we will later use in our react component. (Paytm actually sends the ChecksumHash which has to be validated on our callback, but for time being I didn’t do that).

Once we sent a response in form of HTML on a callback, its time to come out of the webView in our react native app and redirect that to a component.

If you look into our webView component, it had onNavigationStateChange. So basically what it does is whenever there is a change in URL being rendered, it gets triggered(event listener) with access to few properties, in which title of the web Page is one.

So we use that title and check if its true (transaction success) and if yes we navigate to the next page to greet the user with a successful transaction response, if not specify the user that transaction had failed.

This is my final component that gets triggered once the transaction is complete.

You can implement your custom logic in Back To Home button.

Points to be noted :

• When rendering the server’s URL in react Native, if you are running server on localhost, provide the IP Address and not the localhost Name (If localhost is provided it will search for an URL inside the android Emulator and not the server).
• WebView is deprecated in react-native(>0.60). so its suggested by react-native to use a npm package called react-native-webview.
• The transaction money will be credited into your account after 24 hours of payment. So don’t worry if your account balance isn’t reflecting instantaneously.

I hope I’ve summed up the integration part from the root. In case if anyone requires further clarifications you can always reach out to me at venkatamourya@yahoo.com