{"id":22583,"date":"2021-12-29T12:23:20","date_gmt":"2021-12-29T12:23:20","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=22583"},"modified":"2025-04-22T09:53:12","modified_gmt":"2025-04-22T09:53:12","slug":"integrate-paytm-payment-gateway-using-reactjs","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/integrate-paytm-payment-gateway-using-reactjs","title":{"rendered":"How to Integrate Paytm Payment Gateway using ReactJS in Seven Easy Steps"},"content":{"rendered":"

Are you stuck with a requirement of integrating a payment gateway into your project? Are you aggressively looking for a simple tutorial regarding the same? If yes, this tutorial: Integrate Paytm payment gateway using ReactJs is for you! In this step-by-step guide, we will learn how to implement a payment gateway in seven easy steps. So, without further ado, let\u2019s get started with our tutorial.<\/p>\n

Tutorial Goal: Integrate Paytm payment gateway using ReactJs<\/h2>\n

You might be wondering what we are going to do in this tutorial. We will build a small demo application consisting of a button \u2018Pay Now\u2019. With the click of the button a modal will be displayed as shown below. The library allows you to customize the modal and add various payment methods the way you want.<\/p>\n

\"Paytm<\/p>\n

Create a Paytm Developer Account<\/h2>\n

We would need to create new secret keys by creating a new developer account. <\/p>\n

Go to https:\/\/developer.paytm.com\/, login if you are already a Paytm user, or you can create a new account.<\/p>\n

\"Create<\/p>\n

Collect the API keys<\/h2>\n

Once you are logged in successfully, you can directly go to Dashboard<\/a> and check the Test API Details. Feel free to test the APIs using the test API keys. <\/p>\n

\"Collect<\/p>\n

Create a ReactJS Application<\/h2>\n

Use the following command to create a new reactJs application.<\/p>\n

\"Create<\/p>\n

A new project would be created with the default folder structure as shown below.<\/p>\n

\"Create<\/p>\n

Adding the scripts to index.html<\/h2>\n

\"Adding<\/p>\n

Hire ReactJS developer<\/a> from us to add varied skillset to your existing in-house development. We can help you develop next-gen web solution from ideation to development to final delivery.<\/p>\n

Logic & UI: Paytm Payment Integration<\/h2>\n

Create a new file paytmButton.js<\/mark> inside \/paytm-button<\/mark> folder. This file will contain the main logic and functionality for the Paytm payment integration using ReactJS.<\/p>\n

The user interface would have a \u201cPay Now\u201d button that will trigger the Paytm checkout modal.<\/p>\n

Create a new function initializePaytm()<\/mark> that will contain all the initialization configurations and token generation steps that will be triggered on page load using useEffect.<\/p>\n

const initialize = () => {\r\n   let orderId = \"Order_\" + new Date().getTime();\r\n \r\n   \/\/ Sandbox Credentials\r\n   let mid = \"\"; \/\/ Merchant ID\r\n   let mkey = \"\"; \/\/ Merchant Key\r\n   var paytmParams = {};\r\n \r\n   paytmParams.body = {\r\n     requestType: \"Payment\",\r\n     mid: mid,\r\n     websiteName: \"WEBSTAGING\",\r\n     orderId: orderId,\r\n     callbackUrl: \"https:\/\/merchant.com\/callback\",\r\n     txnAmount: {\r\n       value: 100,\r\n       currency: \"INR\",\r\n     },\r\n     userInfo: {\r\n       custId: \"1001\",\r\n     },\r\n   };\r\n \r\n   PaytmChecksum.generateSignature(\r\n     JSON.stringify(paytmParams.body),\r\n     mkey\r\n   ).then(function (checksum) {\r\n     console.log(checksum);\r\n     paytmParams.head = {\r\n       signature: checksum,\r\n     };\r\n \r\n     var post_data = JSON.stringify(paytmParams);\r\n \r\n     var options = {\r\n       \/* for Staging *\/\r\n       \/\/ hostname: \"securegw-stage.paytm.in\" \/* for Production *\/,\r\n \r\n       hostname: \"securegw.paytm.in\",\r\n \r\n       port: 443,\r\n       path: `\/theia\/api\/v1\/initiateTransaction?mid=${mid}&orderId=${orderId}`,\r\n       method: \"POST\",\r\n       headers: {\r\n         \"Content-Type\": \"application\/json\",\r\n         \"Content-Length\": post_data.length,\r\n       },\r\n     };\r\n \r\n     var response = \"\";\r\n     var post_req = https.request(options, function (post_res) {\r\n       post_res.on(\"data\", function (chunk) {\r\n         response += chunk;\r\n       });\r\n       post_res.on(\"end\", function () {\r\n         console.log(\"Response: \", response);\r\n         \/\/ res.json({data: JSON.parse(response), orderId: orderId, mid: mid, amount: amount});\r\n         setPaymentData({\r\n           ...paymentData,\r\n           token: JSON.parse(response).body.txnToken,\r\n           order: orderId,\r\n           mid: mid,\r\n           amount: 100,\r\n         });\r\n       });\r\n     });\r\n \r\n     post_req.write(post_data);\r\n     post_req.end();\r\n   });\r\n };\r\n\r\n<\/pre>\n
Explanation<\/strong><\/p>\n