We all know about the recent innovations and technology upgrades happening in the finance industry. Fintech has completely revolutionized the way we make and receive payments.

With the ever-changing technology, businesses want to make their online payment processes as simple as possible. So, many prefer integrating a payment gateway in their applications.

Paytm is among the most popular payment solution providers, and numerous businesses prefer its payment gateway due to its ease of use. And if you also want to integrate the Paytm payment gateway into your application, we are going to help you.

Whether you're running an e-commerce platform, a subscription-based service, or simply want to accept payments online, our blog is your comprehensive guide to integrating Paytm Payment Gateway with ReactJS. Let's start our journey together and unlock the potential to boost your business's online revenue effortlessly!
 

To create new secret keys, you must establish a new developer account.

Go to https://developer.paytm.com. If you're already a Paytm user, please log in; otherwise, you can create a new account.
 

After logging in, go to the dashboard and check "Test API Details”. You can also test APIs using test API keys.

 

Create a new reactJS application by using this command:

create-react-app < app - name >

 

Now, link the Paytm library using the script tag in the public/index.html file. Use this code snippet:
 

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

 

To begin, generate a new file named "paytmButton.js" within the "/paytm-button" folder. This file will contain the logic and functionality for implementing Paytm payment integration using ReactJS.

The user interface should include a "Pay Now" button, which, when clicked, will activate the Paytm checkout modal.

Next, create a new function called "initializePaytm()" to contain all the initialization settings and token generation processes. This function will be triggered on page loading through the useEffect hook.

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

The initializePaytm() function will use 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();
   });
 };

 

• This function is called on page load, and its purpose is to obtain a transaction token from Paytm. This token will be utilized later to launch the Paytm checkout modal.
• To obtain the token, we will send an API request to /theia/api/v1/initiateTransaction. This request should include a basic transaction object in the request body, along with a hashed value generated using the transaction object. The paytmParam.body contains basic transaction details such as orderId, value, and currency.

paytmParams.body = { ... };

• A hash value should be generated using this transaction object. Paytm offers a library - PaytmChecksum that allows us to create a hashed value by providing the transaction object as arguments.

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

• The hash value will be included with the transaction object when using the initiateTransaction API. It will then generate a transaction token as a response. This token will be used when the user clicks the 'Pay Now' button, triggering the payment checkout modal.

Now, develop a new function "makePayment()" that activates when the button is clicked. This function will utilize the previously generated token and display the checkout modal to the user. In this function, you can customize the style of the Paytm checkout modal by adjusting the color scheme and adding your own 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);
});
}}

Call the makePayment() method on the 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 >
 );

 

Once you have implemented the logic, import the file into App.js:

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

 

So, you have successfully integrated the Paytm payment gateway into your application now. Run the server using this command:

npm start

Now, visit http://localhost:3000/ and test the demo app.

 

Integrating the Paytm payment gateway with ReactJS can be beneficial for your online store or application. With this, you can offer your customers a secure and convenient payment experience, which can boost their trust and loyalty towards your brand.

With these steps, you can now seamlessly integrate Paytm into your application. So, start integrating today and enhance your user experience, along with boosting conversions.
 

---

You might also like:

• Read Also: Laravel Deployments using Envoy - A Step-by-Step Guide
• Read Also: How to Integrate Razorpay Payment Gateway in Laravel
• Read Also: Testing Cypress E2E With React.js
• Read Also: How To Create PDF File In React JS