\
Hi! In this blog, we will see how to integrate paytm payment gateway in React-Native. Mobile wallets have become immensely popular in recent years, and paytm is highly trusted among online customers. Many people use it every day for doing online recharges, DTH & other bill payments. It reduces the risk of exposing customer’s banking credentials and credit card details to hackers. Therefore, Paytm is a good solution for online payments on your Website and Mobile Apps.

\
Before we begin integrating paytm gateway into our React-Native app, create an account on paytm as a merchant.

\
## **Step 1: Installing Required Libraries**

Install the following libraries in your React-Native app

\
```javascript
npm install paytm_allinone_react-native — save
npx react-native link
```

\
## **Step 2: Including the Necessary Maven Repository**

In the project level, build.gradle file add the following line in the repositories section

```javascript
allprojects {
  repositories {
      ...      maven {
          url "https://artifactory.paytm.in/libs-release-local"                   }   
}
 }
```

\
## **Step 3: Including Necessary Libraries to Make HTTP Requests**

Next in the app level build.gradle file add the following dependencies

```javascript
implementation "com.squareup.okhttp3:okhttp:4.2.1"
implementation "com.squareup.okhttp3:logging-interceptor:4.2.1" 
implementation "com.squareup.okhttp3:okhttp-urlconnection:4.2.1"
```

\
## **Step 4: Installing Core Node-js Module Crypto**

\
After all of this is done, some other things need to be done, which are not mentioned in the official documentation of PayTm. First of all, install core node-js module crypto as mentioned in this article in your react native app.

\
## **Step 5: Installing** React-Native**-Randombytes**

\
Once the crypto module is installed and React-Native-Randombytes is installed, go to the paytmchecksum folder located inside the node_modules folder. Make the following changes to paytmchecksum.js file.

\
```javascript
//import crypto module from root directory
const crypto = require('./../../crypto')
//Import randombytes dependency 
import { randomBytes } from 'react-native-randombytes'
```

\
Make sure your generateRandomString function located in paytmchecksum.js looks like this:

\
```javascript
static generateRandomString(length) {
   return new Promise(function (resolve, reject) {
      randomBytes((length * 3.0) / 4.0, function (err, buf){                       if (!err) {
             var salt = buf.toString("base64");
             resolve(salt);
       }
          else {
            console.log("error occurred in generateRandomString: " + err);
        reject(err);   }
    });
  });
 }
```

\
## **Step 6: Writing a Method to Initiate the Transaction and Generate Transaction Token**

\
Once all these things are done, we can actually start writing code for making payments. We will use the fetch module instead of the HTTPS module to make requests. To make any transaction, we first need to generate a transaction token.

\
```javascript
//method to get txn token 
import PaytmChecksum from 'paytmchecksum'
const merchantId ="Your merchant Id"
const data = {orderId:"01",txnAmount:"1",customerId:"001"}
export function getTxnToken(data){
   
           var paytmParams = {};
           paytmParams.body = {
             "requestType"   : "Payment",
             "mid"           : merchantId,
             "websiteName"   : "WEBSTAGING",
             "orderId"       : data.orderId+"",
             "callbackUrl"   : "https://merchant.com/callback",
             "txnAmount"     : {
                 "value"     : data.txnAmount,
                 "currency"  : "INR",
              },
             "userInfo"      : {
                 "custId"    : data.customerId,
             },
  //You can enable any other modes if you want 
   "enablePaymentMode":[
            {"mode" : "UPI",channel:     ["UPI","UPIPUSH"]}, {"mode":"DEBIT_CARD",channel:["RUPAY"]}
            ]
          };
PaytmChecksum.generateSignature(JSON.stringify(paytmParams.body), "L&qCdepjSHKzEX0l").then(function(checksum){
    paytmParams.head = {
       "signature"    : checksum
    };
     var post_data = JSON.stringify(paytmParams);
     var options = {
         /* for Staging */
         hostname: 'securegw-stage.paytm.in',
         /* for Production */
         // hostname: 'securegw.paytm.in',
          port: 443,
          path: '/theia/api/v1/initiateTransaction?'+    'mid='+merchantId+'&orderId='+data.orderId+'',
          method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           'Content-Length': post_data.length
         },
         body:post_data
};
fetch('https://securegw-stage.paytm.in/theia/api/v1/initiateTransaction?mid='+merchantId+'='+data.orderId+'',options)
.then((response)=>{
    response.json()
    .then((txnToken)=>{
//here call the method to start transaction.
     startTransaction({orderId:"01",txnToken:txnToken,amount:"1"});   
     })
   .catch((error)=>{
      //Handle the error
      console.log(error);
      })
    })
  })
 
}
```

\
\
## **Step 7: Writing a Method to Start a Transaction**

\
Once we have the method to generate a transaction token, we can write a method to start a transaction.

\
```javascript
import AllInOneSDKManager from 'paytm_allinone_react-native';
const data = {orderId:'01',txnToken:"",amount:"01"}
export function startTransaction(data){
   
       
       AllInOneSDKManager.startTransaction(      data.orderId,merchantId,data.txnToken,data.amount,"https://merchant.com/callback",true,false)
.then((txnDetails)=>{
   //txn is successful
   //Verify the txnDetails call fetchTxnStatus method
   fetchTxnStatus({orderId:"01"})
  }).catch((error)=>{
      //handle the error
      console.log(error);
   })
 
}
```

\
## **Step 8: Writing a Method to Fetch Transaction Status**

\
Once the transaction is successful, we have to fetch transaction status from paytm servers and then show the payment confirmation message to the user. Here’s how to fetch transaction status.

\
```javascript
//function to fetch transaction status of a transaction
export function fetchTxnStatus(data){
   
      
      var paytmParams = {};
      paytmParams.body = {
      "mid" : "your merchant Id",
      "orderId" : data.orderId+'',
    };
   PaytmChecksum.generateSignature(JSON.stringify(paytmParams.body),     "your_merchant_key").then(function(checksum){
   paytmParams.head = {
     "signature" : checksum
   };
  var post_data = JSON.stringify(paytmParams);
  var options = {
     hostname: 'securegw-stage.paytm.in',
     /* for Production */
    // hostname: 'securegw.paytm.in',
    port: 443,
    path: '/v3/order/status',
    method: 'POST',
    headers: {
       'Content-Type': 'application/json',
       'Content-Length': post_data.length
     },
    body:post_data
};
fetch("https://securegw-stage.paytm.in/v3/order/status",options)
.then((response)=>{
    response.json().then((txnStatus)=>{
    
    if(txnStatus.body.resultInfo.resultCode=="01"){
       //show that the transaction was successful
       //You can call a function to confirm the payment
       console.log("Transaction Successful");
}else{
       //show that there was some problem with transaction
       //txnStatus.body.resultInfo.resultCode=="400" means pending
       //complete list of responses and their meanings
}
  })
 .catch((error)=>{
     //handle error
     console.log(error);
    })
   })
 });
 
}
```

\
That’s all, folks! Now you can start receiving payments.

\

---

> **References**

<https://developer.paytm.com/docs/all-in-one-sdk/hybrid-apps/react-native/>

<https://developer.paytm.com/docs/api/initiate-transaction-api/?ref=payments>

<https://javascript.plainenglish.io/using-core-node-js-modules-in-react-native-apps-e6002a33b6ff>

<https://developer.paytm.com/docs/api/v3/transaction-status-api/?ref=payments>

\


Fetch

THEIA

2022 - Android Advocate of the Year

Nominated for 2022 - Android Advocate of the Year

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to Integrate the Paytm Payment Gateway in Your React Native Apps

Too Long; Didn't Read

Companies Mentioned

@suprith461

RELATED STORIES