Are you struggling with integrating Paytm Payment Gateway into your website? We’ll worry not; we will put all your doubts to rest today in this blog. Payment solutions are an important part of the user experience and sales facilitation of any online business.

Paytm is currently one of the most popular payment gateways available for your business. It provides seamless integration with both custom websites and other platforms such as WordPress. So, let’s see How to Integrate Paytm UPI Payment Gateway in Website.

Why Use Paytm Payment Gateway?

Paytm is one of the most widely used UPI payment apps in India, and the same can be said for its payment gateway. Paytm PG offers seamless integration with different websites, making it a viable choice for your business. Another reason why it is popular is because of the different payment options it offers. Paytm PG allows payments from Cards, UPI, EMI, Net Banking, and pay later, making it a favourite amongst customers.

How to Integrate Paytm Payment Gateway in a Website Using React.js

If you have a technical background, then you should use this step, or you should consult a professional developer for this task. Here, we’ll learn how to integrate Paytm PG into websites using React.js.

Prerequisites

• A Paytm merchant account with access to your Merchant ID and Merchant Key.
• Basic knowledge of React.js and server-side development.
• Node.js installed on your local environment.

Step 1: Set Up the Backend

We’ll start by setting up a backend for ourselves, as it is important that we handle sensitive operations such as generating payment tokens on the server side for security reasons.

1. 1. Create a Node.js Server: Set up a new Node.js project by running:

      mkdir Paytm-server
      cd Paytm-server
      npm init -y
      npm install express body-parser crypto-js request
      

   2. Create server.js: Create a server.js file and add the following code:

      const express = require('express');
      const bodyParser = require('body-parser');
      const checksum_lib = require('paytmchecksum');
      const request = require('request');
      
      const app = express();
      app.use(bodyParser.json());
      const PORT = 5000;
      
      const PAYTM_MID = 'YourMerchantID';
      const PAYTM_MERCHANT_KEY = 'YourMerchantKey';
      const PAYTM_WEBSITE = 'WEBSTAGING';
      const PAYTM_CHANNEL_ID = 'WEB';
      const PAYTM_INDUSTRY_TYPE_ID = 'Retail';
      const PAYTM_CALLBACK_URL = 'http://localhost:5000/callback';
      
      app.post('/payment', (req, res) => {
        const { amount, customerId, orderId } = req.body;
      
        const params = {
          MID: PAYTM_MID,
          WEBSITE: PAYTM_WEBSITE,
          CHANNEL_ID: PAYTM_CHANNEL_ID,
          INDUSTRY_TYPE_ID: PAYTM_INDUSTRY_TYPE_ID,
          ORDER_ID: orderId,
          CUST_ID: customerId,
          TXN_AMOUNT: amount.toString(),
          CALLBACK_URL: PAYTM_CALLBACK_URL,
        };
      
        checksum_lib.generateSignature(params, PAYTM_MERCHANT_KEY, (err, checksum) => {
          if (err) {
            return res.status(500).send({ error: 'Failed to generate checksum' });
          }
          params.CHECKSUMHASH = checksum;
          res.json(params);
        });
      });
      
      app.post('/callback', (req, res) => {
        res.send('Payment Successful');
      });
      
      app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));
      

   3. Run the Server: Use command: node server.js

Make sure to replace placeholders like ‘YourMerchantID’ and ‘YourMerchantKey’ with actual values from your Paytm merchant account.

Step 2: Frontend Integration in React.js

1. Create a React Component: In your React project, create a new component PaytmPayment.js.
2. Set Up the Component:

   import React, { useState } from 'react';
   import axios from 'axios';
   
   const PaytmPayment = () => {
     const [amount, setAmount] = useState('');
     const [orderId, setOrderId] = useState(`ORDER_${new Date().getTime()}`);
     const [customerId, setCustomerId] = useState(`CUST_${new Date().getTime()}`);
   
     const handlePayment = async () => {
       try {
         const { data } = await axios.post('http://localhost:5000/payment', {
           amount,
           customerId,
           orderId,
         });
   
         const form = document.createElement('form');
         form.setAttribute('method', 'post');
         form.setAttribute('action', 'https://securegw-stage.paytm.in/order/process');
         Object.keys(data).forEach((key) => {
           const input = document.createElement('input');
           input.setAttribute('type', 'hidden');
           input.setAttribute('name', key);
           input.setAttribute('value', data[key]);
           form.appendChild(input);
         });
   
         document.body.appendChild(form);
         form.submit();
       } catch (error) {
         console.error('Payment initiation failed:', error);
       }
     };
   
     return (

   Paytm Payment

   setAmount(e.target.value)} /> 

   ); }; export default PaytmPayment;

Step 3: Test the Integration

Now to test the integration, you’ll have to start your Node.js server and React application. After that, navigate to the PaytmPayment component and click on “Pay Now” after entering the amount. You’ll then be redirected to the payment gateway page.

Step 4: Go Live

• Switch from Staging to Production: After testing, replace the Paytm staging URL (https://securegw-stage.paytm.in) with the production URL (https://securegw.paytm.in).
• Update API Keys: Use the live Merchant ID and Merchant Key for real transactions.
• Enable SSL: Make sure your website uses HTTPS, as this is a requirement for secure payment processing.

How to Add Paytm Payment Gateway to WordPress Website

Now, WordPress offers one of the easiest Paytm PG integration. So let’s have a look at it.

1. Install the Paytm Payment Gateway Plugin: Go to your WordPress dashboard and then go to the Plugins menu. From there, click on Add New and search for Paytm Payment Gateway. Click on Install and activate it.
2. Configure the Plugin: Once the plugin is activated, go to the payment settings in WooCommerce and select Paytm as the payment gateway. After that, Paytm settings will be opened, and you’ll be asked to enter your Merchant ID and Merchant Key along with other credentials.
3. Customise Checkout: Now Paytm as a payment option will be added to the checkout menu. You can further customise it as per your needs.
4. Testing: Use the sandbox credentials provided by Paytm to test the integration before making it live. Check for successful payments and refund processes during the testing phase.
5. Go Live: Switch to live mode by updating the plugin settings with production API keys and making Paytm available as a payment method for your customers.

So this was the complete information about how to integrate Paytm PG with your website or your WordPress store. Paytm also offers technical support, which you can use to handle any technical issue that arises during integration. The technical team is available 24*7 at Paytm. We hope that you have all the information you need and that you have successfully integrated Paytm Payment Gateway with your website.