Paytm Payment Gateway Integration in React JS

Learn how to seamlessly integrate Paytm Payment Gateway into your ReactJS application with this step-by-step guide.

Himanshu Pant

Published: January 9, 2024

Key takeaways

Integrating Paytm into a ReactJS app involves setting up a developer account, obtaining API keys, and configuring the Paytm payment module to enable seamless transactions.
The integration includes creating a "Pay Now" button and using the Paytm modal for checkout, enhancing user experience by providing a streamlined and secure payment process.
After coding the payment functionality, the PaytmButton component should be tested within the app to ensure a smooth and reliable payment process, suitable for e-commerce and financial services applications.

Seamless online transactions are essential in today’s e-commerce and financial services software. Payment gateways play a critical role in providing secure and efficient processing for customers, and integrating them has become a common task for developers, especially those in industries like travel software.

Paytm’s payment gateway is popular due to its simplicity and effectiveness. This guide breaks down the process of integrating Paytm with a ReactJS application into clear, manageable steps, making it easy for developers to follow and implement.

How to Integrate Paytm Payment Gateway using ReactJS

Step 1: 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/, login if you are already a Paytm user, or you can create a new account for payment gateway integration.

Step 2: Collect the API keys

Upon successful login, proceed directly to the Dashboard and verify the Test API Details. Feel free to test the APIs using the test API keys.

create-react-app < app - name >

1	create-react-app < app - name >

Create a new project with the default folder structure as shown below.

Adding the scripts to index.html

You need to link the Paytm library using the script tag in public/index.html file. For that use the below snippet.

<script 
type="text/javascript" crossorigin="anonymous" src="https://securegw-stage.paytm.in/merchantpgpui/checkoutjs/merchants/.js" 
>
< /script >

<script

type="text/javascript" crossorigin="anonymous" src="https://securegw-stage.paytm.in/merchantpgpui/checkoutjs/merchants/.js"

< /script >

Logic & UI: Paytm Payment Integration

Create a new file paytmButton.js inside /paytm-button folder. This file will contain the main logic and functionality for the Paytm payment gateway integration using ReactJS.

The user interface would have a “Pay Now” button that will trigger the Paytm checkout modal. Create a new function named initializePaytm() that will encompass all the initialization configurations and token generation steps. Trigger this function on page load using useEffect.

useEffect(() => {
   initialize();
 }, []);

useEffect(() => {

initialize();

}, []);

The initializePaytm() function will make use of the Paytm checksum file and it will generate a token.

const initialize = () => {
   let orderId = "Order_" + new Date().getTime();
 
   // Sandbox Credentials
   let mid = ""; // Merchant ID
   let mkey = ""; // Merchant Key
   var paytmParams = {};
 
   paytmParams.body = {
     requestType: "Payment",
     mid: mid,
     websiteName: "WEBSTAGING",
     orderId: orderId,
     callbackUrl: "https://merchant.com/callback",
     txnAmount: {
       value: 100,
       currency: "INR",
     },
     userInfo: {
       custId: "1001",
     },
   };
 
   PaytmChecksum.generateSignature(
     JSON.stringify(paytmParams.body),
     mkey
   ).then(function (checksum) {
     console.log(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=${mid}&orderId=${orderId}`,
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         "Content-Length": post_data.length,
       },
     };
 
     var response = "";
     var post_req = https.request(options, function (post_res) {
       post_res.on("data", function (chunk) {
         response += chunk;
       });
       post_res.on("end", function () {
         console.log("Response: ", response);
         // res.json({data: JSON.parse(response), orderId: orderId, mid: mid, amount: amount});
         setPaymentData({
           ...paymentData,
           token: JSON.parse(response).body.txnToken,
           order: orderId,
           mid: mid,
           amount: 100,
         });
       });
     });
 
     post_req.write(post_data);
     post_req.end();
   });
 };

const initialize = () => {

let orderId = "Order_" + new Date().getTime();

// Sandbox Credentials

let mid = ""; // Merchant ID

let mkey = ""; // Merchant Key

var paytmParams = {};

paytmParams.body = {

requestType: "Payment",

mid: mid,

websiteName: "WEBSTAGING",

orderId: orderId,

callbackUrl: "https://merchant.com/callback",

txnAmount: {

value: 100,

currency: "INR",

userInfo: {

custId: "1001",

};

PaytmChecksum.generateSignature(

JSON.stringify(paytmParams.body),

mkey

).then(function (checksum) {

console.log(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=${mid}&orderId=${orderId}`,

method: "POST",

headers: {

"Content-Type": "application/json",

"Content-Length": post_data.length,

};

var response = "";

var post_req = https.request(options, function (post_res) {

post_res.on("data", function (chunk) {

response += chunk;

});

post_res.on("end", function () {

console.log("Response: ", response);

// res.json({data: JSON.parse(response), orderId: orderId, mid: mid, amount: amount});

setPaymentData({

...paymentData,

token: JSON.parse(response).body.txnToken,

order: orderId,

mid: mid,

amount: 100,

});

post_req.write(post_data);

post_req.end();

});

};

Explanation

Call this method on page load to obtain a transaction token from Paytm, which will later be used to initiate the Paytm checkout modal.
To retrieve the token, we will make an API call to /theia/api/v1/initiate transaction which will expect a basic transaction object in the request body along with a hashed value created using the transaction object. The paytmParam.body is a transaction object with basic fields like orderId, value, and currency.

paytmParams.body = { ... };

1	paytmParams.body = { ... };

A hash value should be using this transaction object. For that, Paytm provides a library – PaytmChecksum using which we can generate a hashed value by passing the transaction object as arguments.

PaytmChecksum.generateSignature(
JSON.stringify(paytmParams.body),mkey ).then(function(checksum){  ... // logic };

1 2	PaytmChecksum.generateSignature( JSON.stringify(paytmParams.body),mkey ).then(function(checksum){ ... // logic };

Send this hash value along with the transaction object in the initiateTransaction API. The API will provide the transaction token in response. Later, use this token when the user clicks on the ‘Pay Now’ button to trigger the payment checkout modal.

Create a new function called makePayment() that will be triggered on the button click. This function will utilize the previously generated token and display the checkout modal to the user. In this function, you can modify the style of the Paytm checkout modal and change the color code and add your logo.

const makePayment = () => {
        var config = {
            "root":"",
            "style": {
              "bodyBackgroundColor": "#fafafb",
              "bodyColor": "",
              "themeBackgroundColor": "#0FB8C9",
              "themeColor": "#ffffff",
              "headerBackgroundColor": "#284055",
              "headerColor": "#ffffff",
              "errorColor": "",
              "successColor": "",
              "card": {
                "padding": "",
                "backgroundColor": ""
              }
            },
            "data": {
              "orderId": paymentData.order,
              "token": paymentData.token,
              "tokenType": "TXN_TOKEN",
              "amount": paymentData.amount /* update amount */
            },
            "payMode": {
              "labels": {},
              "filter": {
                "exclude": []
              },
              "order": [
                  "CC",
                  "DC",
                  "NB",
                  "UPI",
                  "PPBL",
                  "PPI",
                  "BALANCE"
              ]
            },
            "website": "WEBSTAGING",
            "flow": "DEFAULT",
            "merchant": {
              "mid": paymentData.mid,
              "redirect": false
            },
            "handler": {
              "transactionStatus":
function transactionStatus(paymentStatus){
                console.log(paymentStatus);
              },
              "notifyMerchant":
function notifyMerchant(eventName,data){
                console.log("Closed");
              }
            }
        };
      
        if (window.Paytm && window.Paytm.CheckoutJS) {
       	window.Paytm.CheckoutJS.init(config).
then(function onSuccess() {
      window.Paytm.CheckoutJS.invoke();
}).catch(function onError(error) {
      console.log("Error => ", error);
});
}}

const makePayment = () => {

var config = {

"root":"",

"style": {

"bodyBackgroundColor": "#fafafb",

"bodyColor": "",

"themeBackgroundColor": "#0FB8C9",

"themeColor": "#ffffff",

"headerBackgroundColor": "#284055",

"headerColor": "#ffffff",

"errorColor": "",

"successColor": "",

"card": {

"padding": "",

"backgroundColor": ""

}

"data": {

"orderId": paymentData.order,

"token": paymentData.token,

"tokenType": "TXN_TOKEN",

"amount": paymentData.amount /* update amount */

"payMode": {

"labels": {},

"filter": {

"exclude": []

"order": [

"CC",

"DC",

"NB",

"UPI",

"PPBL",

"PPI",

"BALANCE"

]

"website": "WEBSTAGING",

"flow": "DEFAULT",

"merchant": {

"mid": paymentData.mid,

"redirect": false

"handler": {

"transactionStatus":

function transactionStatus(paymentStatus){

console.log(paymentStatus);

"notifyMerchant":

function notifyMerchant(eventName,data){

console.log("Closed");

}

};

if (window.Paytm && window.Paytm.CheckoutJS) {

window.Paytm.CheckoutJS.init(config).

then(function onSuccess() {

window.Paytm.CheckoutJS.invoke();

}).catch(function onError(error) {

console.log("Error => ", error);

});

}}

Call the makePayment() method on click event of the button.

return (
   < div >
     {loading ? (
       < img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" / >
     ) : (
       < button onClick={makePayment}>Pay Now< /button >
     )}
   < /div >
 );

return (

< div >

{loading ? (

< img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" / >

) : (

< button onClick={makePayment}>Pay Now< /button >

)}

< /div >

);

Import PaytmButton in App.js

After completing the main logic implementation, it’s time to import the file into App.js.

import "./App.css";
import { PaytmButton } from "./paytm-button/paytmButton";
 
function App() {
 return (
   < div >
     < PaytmButton / >
   < /div >
 );
}
 
export default App;

import "./App.css";

import { PaytmButton } from "./paytm-button/paytmButton";

function App() {

return (

< div >

< PaytmButton / >

< /div >

);

}

export default App;

Run the Server

Finally, we have completed the tutorial on how to integrate the Paytm Payment Gateway using ReactJS. Now using the below command, run your server.

npm  start

npm start

Visit http://localhost:3000/ and test the demo app.

Why Innostax is Your Partner for Payment Gateway Integration and ReactJS Development

At Innostax, we know that seamless payment processing is essential to any e-commerce or financial services application. Our team specializes in integrating payment gateways with a focus on security, speed, and reliability. Using popular solutions like Paytm, we ensure each transaction is protected through high-level encryption, strict security protocols, and detailed error handling, safeguarding both businesses and their customers.

Our expertise in ReactJS development further enhances this offering, allowing us to create applications that handle high transaction volumes with efficiency and responsiveness. With a focus on scalability and smooth user experience, our solutions are designed to support future growth. We keep up with the latest frameworks and best practices, so your applications remain adaptable to changing needs and evolving technology.

Innostax combines technical precision with a commitment to quality, offering tailored payment gateway integrations and full-featured ReactJS applications that are reliable, secure, and built for long-term success.

Conclusion

Integrating a payment gateway Paytm into a ReactJS application is a crucial skill for modern web development. Through this step-by-step guide, we’ve demystified the process and made it accessible for developers at all levels. We’ve seen how, with a clear understanding of the process and the right tools, we can successfully add a robust payment solution to our ReactJS project in just seven easy steps. As we continue to explore and innovate in the realm of e-commerce and financial services software development, such skills will only grow in importance. Whether you’re engaged in custom financial software development, heading an iOS mobile app development company, or focusing on software development for healthcare, this holds true. Remember, the journey of learning and improvement never ends. Keep exploring, keep implementing, and keep growing.