Learn Paytm Payment Gateway Integration In React Native

In this blog, we will see Paytm payment gateway integration in react native apps. Mobile wallets and UPI payments have become immensely popular in recent years and Paytm is highly trusted among online customers for payments for their daily essentials on the offline stores as well as the online platforms.

Many people use it every day for doing online recharges, DTH & other bill payments. It reduces the risk of exposing customers’ banking credentials and credit card details to hackers. Therefore, Paytm is a good solution for online payments on your Website and Mobile Apps.

Create a new Paytm developer account

We would need to create new secret keys by creating a new developer account.

Go to https://developer.paytm.com/, log in if you are already a Paytm user, or you can create a new account.

Collect the API keys

Once you are logged in successfully, you can directly go to Dashboard and check the Test API Details. Feel free to test the APIs using the test API keys. For Production, you can generate the production API Details after submitting the proper details of your business.

AllInOneSDKManager

AllInOneSDKManager means It manages Wallet Transaction, Internet Banking Transaction, UPI Transaction as well as Credit and Debit card transactions in one platform/application with strong security of the transaction. 

Installing Libraries:-

Install the following libraries in your react native app

    ->   npm install paytm_allinone_react-native — save 

    ->   npx react-native link

For Android

Including the necessary maven repository

Including necessary libraries to make HTTP requests

Next is the app-level build.Gradle file add the following dependencies

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"

For IOS

Step- 01

Open Podfile and Update Platform Version

Navigate to the ios folder and open Podfile. You can do this using the following code.

    $ cd ios && open podfile

Step-02

Install Pods Using Cocoapods

Install pods after updating the iOS platform. : pod install && cd ..

Step-03

Open the projectName.workspace in the ios folder.

Step-04

Open Info.plist : Add LSApplicationQueriesSchemes. Change its type to Array. Create a new item in it and set its value as “Paytm”

Step-05

Go to Info tab -> URL Types : Add a new URL Type that you’ll be using as the callback from Paytm App (URL Scheme: “paytm”+” MID “). Example: paytmMid1234567890 .

Step-06

Open AppDelegate.m: Add the following method before the end of the file ended by @end

Import LinkingManager to the top of the file which has delegate methods for implementing and handling URLScheme(response from Paytm invoke will be received here in this method. Which in turn notifies the Plugin.)

Let’s start with the implementation

Import  React from react and other fundamental components from  React Native for building a user interface (like View, Button, etc). Also import AllInOneSDKManager from paytm_allinone_react-native , which was installed on our project before.

Then we have to make a payNow button which going for initiate our transaction 

For Sample Example Here is the Code:-

In there we have to generate our order id from the back as well as our transaction id also generate from backed.

URL scheme is used for IOS build only. 

On Paytm, their checksum signature is used to ensure that API requests and responses shared between your application and Paytm over a network have not been tampered with. We use SHA256 hashing and AES128 encryption algorithms to ensure the safety of transaction data.

The checksum generation and validation utility are supported for multiple languages. some of the most used languages e.g. Java, Python, PHP and Node.js.

Here is the full Example 

After calling the startTransaction method, it returns a promise. In case of success, the result can be consumed in the “then” block.

Sample success response

Payment Gateway – Test Instruments

The Test instrument details which you can use to attempt a transaction on the staging environment. For card and net banking transactions, you will be redirected to a Paytm maintained page in your App. Here you will have an option to make the transaction successful or failed. This is to provide a comprehensive integration experience.

Test Card Details

Test Wallet Details

For NetBanking and UPI Payments it shows all the Banks in India and the UPI Service providers.

Here are the Screenshots of a Sample Project :