How to Integrate Paytm Payment Gateway using ReactJS in Seven Easy Steps by Bacancy Technology

How to Integrate Paytm Payment Gateway using ReactJS in Seven Easy Steps www.bacancytechnology.com

Introduction

02 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’s get started with our tutorial.

Tutorial Goal: Integrate Paytm Payment Gateway using ReactJS

04 You might be wondering what we are going to do in this tutorial. We will build a small demo application consisting of a button ‘Pay Now’. 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.

Create a new Paytm developer account

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

Collect the API keys

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

Create a ReactJS Application

10 Use the following command to create a new reactJs application.

create-react-app < app - name >

A new project would be created with the default folder structure as shown below.

Adding the scripts to index.html

12 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://securegwstage.paytm.in/merchantpgpui/checkoutjs/ merchants/.js” >< /script >

Hire ReactJS developer 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

Logic & UI: Paytm Payment Integration

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

The user interface would have a “Pay Now” button that will trigger the Paytm checkout modal.

Create a new function initializePaytm() that will contain all the initialization configurations and token generation steps that will be triggered on page load using useEffect.

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

15 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",

17 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({

18 ...paymentData, token: JSON.parse(response).body.txnToken, order: orderId, mid: mid, amount: 100, }); }); }); post_req.write(post_data); post_req.end(); }); };

Explanation

20 This method is called on page load which will return a transaction token from Paytm which will be later used for initiating the Paytm checkout modal. To retrieve the token, we will make an API call to /theia/api/v1/initiateTransaction 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 = { ... };

21 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 }

This hash value will be sent along with the transaction object in the initiateTransaction API and will provide the transaction token in response. Later this token will be used when the user clicks on the ‘Pay Now’ button and will be helpful for triggering the payment checkout modal.

22 Create a new function makePayment() that will be triggered on click of the button, which will use the already 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": "",

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

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

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

Import PaytmButton in App.js

28 Once we are done with the main logic implementation it’s time to import the file into App.js.

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

Run the Server

30 So, finally, we are done with the tutorial: How to Integrate Paytm Payment Gateway using ReactJS. Now using the below command, run your server.

npm start

Visit http://localhost:3000/ and test the demo app. The entire source code is available on the github repo: paytm-payment-gatewayintegration. Feel free to clone the repository and play around with the code.

Conclusion

32 I hope the tutorial has helped you learn how to integrate Paytm payment gateway using ReactJS. We value your feedback and suggestions, so feel free to write back. Our team is trying to explore and add more such topics to ReactJS tutorials. If you are a ReactJS enthusiast, visit the ReactJS tutorials page without wasting your time, clone the github repository, and polish your technical side.

Thank You