Integration des Paytm-Zahlungsgateways in React Native Apps

Hallo! In diesem Blog werden wir sehen, wie man das Zahlungsgateway paytm in reaktiv-native integriert . Mobile Wallets haben in den letzten Jahren enorm an Popularität gewonnen und paytm genießt bei Online-Kunden hohes Vertrauen. Viele Leute verwenden es jeden Tag für Online-Aufladungen, DTH und andere Rechnungszahlungen. Es verringert das Risiko, dass Hacker die Bankdaten und Kreditkartendaten des Kunden preisgeben. Daher ist Paytm eine gute Lösung für Online-Zahlungen auf Ihrer Website und mobilen Apps.

Bevor wir mit der Integration von paytm gateway in unsere React-Native-App beginnen, erstellen Sie als Händler ein Konto bei paytm .

Schritt 1: Erforderliche Bibliotheken installieren

Installiere die folgenden Bibliotheken in deiner React native App

npm install paytm_allinone_react-native — save 
npx react-native link

Fügen Sie in der Datei build.gradle auf Projektebene die folgende Zeile im Abschnitt Repositorys hinzu

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

Fügen Sie als Nächstes in der Datei build.gradle auf App-Ebene die folgenden Abhängigkeiten hinzu

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"

Nachdem all dies erledigt ist, müssen noch einige andere Dinge getan werden, die in der offiziellen Dokumentation von PayTm nicht erwähnt werden. Zunächst einmal installieren Kernknoten-js Modul Krypto wie in erwähnt diesen Artikel in Ihrer reagieren native App.

Schritt 5 : React-native-randombytes installieren

Installieren Sie Reactive-Native-Randombytes, das beim Generieren der Prüfsumme erforderlich ist.

npm install react-native-randombytes

Sobald Krypto - Modul installiert ist und reagieren-native-randombytes ist unterwegs installiert paytmchecksum innen liegenden Ordner node_modules Ordner. Nehmen Sie die folgenden Änderungen an der Datei paytmchecksum.js vor

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

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);   }
    });
  });
 }

Sobald all diese Dinge erledigt sind, können wir tatsächlich damit beginnen, Code für Zahlungen zu schreiben. Wir werden das Fetch-Modul anstelle des https-Moduls verwenden, um Anfragen zu stellen. Um eine Transaktion durchzuführen, müssen wir zuerst ein Transaktionstoken generieren.

//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);
      })
    })
  })
 
}

Sobald wir die Methode zum Generieren von Transaktionstoken haben, können wir eine Methode zum Starten einer Transaktion schreiben.

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);
   })
 
}

Sobald die Transaktion erfolgreich ist, müssen wir den Transaktionsstatus von den paytm-Servern abrufen und dem Benutzer dann die Zahlungsbestätigungsnachricht anzeigen. So rufen Sie den Transaktionsstatus ab

//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);
    })
   })
 });
 
}

R eferenzen