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.

Create a new Paytm developer account | Mindbowser

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.

Collect the API keys | Mindbowser

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

Installing libraries for android | Mindbowser

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”

Installing Libraries For IOS | Mindbowser

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 .

Installing Libraries For IOS | Mindbowser

Installing Libraries For IOS | Mindbowser

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.)

Installing Libraries For IOS | Mindbowser

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.

Installing Libraries For IOS | Mindbowser

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

Paynow button to initiate transaction | Mindbowser

For Sample Example Here is the Code:-

Paynow button to initiate transaction | Mindbowser

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 Card Details | Mindbowser

Test Wallet Details

Test Wallet Details | Mindbowser

 

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 :

 

Screenshots of a Sample Project | Mindbowser

 

Screenshots of a Sample Project | Mindbowser

 

Screenshots of a Sample Project | Mindbowser

coma

Conclusion

In this blog, we saw in detail the Paytm payment gateway integration in React Native and also the Integration and implementation of All-in-One SDK, and how to use it for your Application for a better payment solution. 

Satyabrata

Tech Expert

Satyabrata is a React Native Developer with around 2.8+ years of experience in developing mobile applications. Skills like developing clean and reusable code, Creating responsive Mobile pages, API integration etc. 

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google