Are you looking to integrate a secure and reliable payment gateway into your web application? Look no further! In this detailed tutorial, we’ll walk you through setting up the PayU Payment Gateway using Node.js for the backend and React for the frontend. By the end, you’ll have a fully functional payment flow ready to go. Let’s get started!

What is PayU?

PayU is a trusted payment gateway that simplifies the process of accepting online payments. It supports multiple payment methods, including credit/debit cards, UPI, wallets, and net banking. PayU provides robust security features and a seamless user experience, making it a great choice for businesses of all sizes.

Setting Up the Backend with Node.js

The backend will handle the payment initiation and verification process using the PayU SDK. Follow these steps:

Step 1: Install Required Packages

First, set up a new Node.js project and install the necessary packages:

mkdir payu-integration
cd payu-integration
npm init -y
npm install express payu-websdk dotenv cors crypto
  • express: For creating the API server.
  • payu-websdk: PayU’s SDK for managing payments.
  • dotenv: For environment variable management.
  • cors: To handle cross-origin requests.
  • crypto: For generating secure hashes.

Step 2: Configure Environment Variables

Create a .env file in the project root and add the following configuration:

MERCHANT_KEY=your-merchant-key
MERCHANT_SALT=your-merchant-salt
MERCHANT_MODE=TEST

Replace your-merchant-key and your-merchant-salt with your actual credentials from PayU. Set MERCHANT_MODE to LIVE for production environments.

Step 3: Write the Backend Code

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

const express = require("express");
const PayU = require("payu-websdk");
const crypto = require("crypto");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config();

const app = express();
app.use(cors({ origin: "*" }));
app.use(express.json());

const payuClient = new PayU(
  {
    key: process.env.MERCHANT_KEY,
    salt: process.env.MERCHANT_SALT,
  },
  process.env.MERCHANT_MODE
);

app.post("/initiate-payment", async (req, res) => {
  try {
    const { txnid, amount, productinfo, firstname, email, phone } = req.body;

    let data = {
      isAmountFilledByCustomer: false,
      txnid,
      amount,
      currency: "INR",
      productinfo,
      firstname,
      email,
      phone,
      surl: `http://localhost:3000/verify/${txnid}`,
      furl: `http://localhost:3000/verify/${txnid}`,
    };

    const hashString = `${process.env.MERCHANT_KEY}|${data.txnid}|${data.amount}|${data.productinfo}|${data.firstname}|${data.email}|||||||||||${process.env.MERCHANT_SALT}`;
    const hash = crypto.createHash("sha512").update(hashString).digest("hex");
    data.hash = hash;

    let response = await payuClient.paymentInitiate(data);
    res.send(response);
  } catch (error) {
    console.error("Error initiating payment:", error);
    res.status(500).send(error);
  }
});

app.get("/verify/:id", async (req, res) => {
  try {
    const data = await payuClient.verifyPayment(req.params.id);
    const status = data.transaction_details[req.params.id];
    if (status.status === "success") {
      res.redirect("http://localhost:5173/success");
    } else {
      res.redirect("http://localhost:5173/failed");
    }
  } catch (error) {
    console.error("Error verifying payment:", error);
    res.status(500).send(error);
  }
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Key Points

  • Hash Calculation: Ensures secure communication between your server and PayU.
  • Redirect URLs: Handles success and failure cases.

Run the server:

node server.js

Building the Frontend with React

The frontend will allow users to select a product and initiate payments.

Step 1: Set Up React Project

Create a new React project and install required packages:

npx create-react-app payu-frontend
cd payu-frontend
npm install axios lucide-react
  • axios: For making HTTP requests to the backend.
  • lucide-react: For adding icons.

Step 2: Add Payment Functionality

Replace the contents of src/App.js with the following code:

import { useState, useEffect } from "react";
import { User, Mail, Phone, IndianRupee } from "lucide-react";
import axios from "axios";

const PRODUCTS = [
  { id: 1, name: "Vikas T-Shirt", price: 400 },
  { id: 2, name: "Web Codder Hoodie", price: 600 },
  { id: 3, name: "Developer Mug", price: 200 },
];

const App = () => {
  const [formData, setFormData] = useState({ firstname: "", email: "", phone: "", amount: "" });
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [response, setResponse] = useState(null);

  const handleProductSelect = (product) => {
    setSelectedProduct(product);
    setFormData((prev) => ({ ...prev, amount: product.price.toString() }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!selectedProduct) return alert("Please select a product");

    try {
      const txnid = `T${Date.now()}`;
      const result = await axios.post("http://localhost:3000/initiate-payment", {
        ...formData,
        txnid,
        productinfo: JSON.stringify(selectedProduct),
      });
      setResponse(result.data);
    } catch (error) {
      console.error("Error initiating payment:", error);
      alert("Payment initiation failed");
    }
  };

  return (
    <div>
      {/* Product Selection */}
      {PRODUCTS.map((product) => (
        <div key={product.id} onClick={() => handleProductSelect(product)}>
          {product.name} - ₹{product.price}
        </div>
      ))}

      {/* Form */}
      <form onSubmit={handleSubmit}>
        <input type="text" name="firstname" value={formData.firstname} onChange={(e) => setFormData({ ...formData, firstname: e.target.value })} placeholder="Name" required />
        <input type="email" name="email" value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value })} placeholder="Email" required />
        <input type="tel" name="phone" value={formData.phone} onChange={(e) => setFormData({ ...formData, phone: e.target.value })} placeholder="Phone" required />
        <button type="submit">Pay Now</button>
      </form>
    </div>
  );
};

export default App;

Testing Your Integration

  1. Start the backend: node server.js
  2. Start the frontend: npm start
  3. Navigate to http://localhost:3000 to test the payment flow.

Download the ZIP File

 Subscribe To Download

Conclusion

Integrating the PayU Payment Gateway into your application is a straightforward process when broken down into manageable steps. This tutorial covered everything from setting up the backend with Node.js to building the frontend with React. Once deployed, this setup ensures secure and seamless transactions for your users.

Feel free to reach out if you have questions or need further assistance. Happy coding!

Categorized in:

Node JsPayment Getway