Razorpay Integration by shayaliza
Backend
Step 1. Install the dependency & Get the KeyID and keySecret from Razorpay Website
npm i express cors body-parser razorpay
Step 2. File Structure

Backend
│      server.js
|   
└──────Routes
│      │      paymentRoutes.js
│   
└──────Controller
       │      paymentController.js
  
Step 3. Server.js

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const paymentRoutes = require("./Routes/paymentRoutes");

const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(express.urlencoded({ extended: true }));

app.use("/api", paymentRoutes);

const PORT = 5000;
app.listen(PORT, () => {
  console.log("Server is Runnig");
});


Step 4. Payment Controller

const crypto = require("crypto");
const Razorpay = require("razorpay");

const keyID = "Paste your key ID";
const keySecret = "Paste your key Secret ";

const instance = new Razorpay({
  key_id: keyID,
  key_secret: keySecret,
});

const Checkout = async (req, res) => {
  try {
    const options = {
      amount: Number(req.body.amount) * 100,
      currency: "INR",
    };
    const order = await instance.orders.create(options);
    res.status(200).json({ success: true, order: order });
  } catch (error) {
    res.status(500).json({ success: false, error: "Internal server error" });
  }
};
const PaymentVerification = async (req, res) => {
  const { razorpay_order_id, razorpay_payment_id, razorpay_signature } =
    req.body;
  const body = razorpay_order_id + "|" + razorpay_payment_id;

  const expectedSignature = crypto
    .createHmac("sha256", keySecret)
    .update(body.toString())
    .digest("hex");

  const isAuthentic = expectedSignature === razorpay_signature;
  if (isAuthentic) {
    console.log("is authentic");
    res.redirect(); //redirect to payment success page of frontend
  } else {
    res.status(400).json({
      success: false,
    });
  }
};
module.exports = {
  PaymentVerification,
  Checkout,
};

Step 5. Payment Routes

const express = require("express");

const {
  Checkout,
  PaymentVerification,
} = require("./../Controller/paymentController");
const router = express.Router();

router.post("/checkout", Checkout);
router.post("/paymentverification", PaymentVerification);

module.exports = router;


Frontend
Step 1. Write this Script in index.html in body

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Step 2. Create React App and create component payment.jsx and use it in App.js
Step 3. payment.jsx

import React from "react";

function Payment() {
  const keyID = "your key id here";
  const checkoutHandler = async (amount) => {
    fetch("http://localhost:5000/api/checkout", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ amount }),
    })
      .then((response) => response.json())
      .then((data) => {
        const order = data.order;

        const options = {
          key: keyID,
          amount,
          currency: "INR",
          name: "Shayaliza",
          description: "Shayaliza Razorpay Integration",
          image: "your Profile URL",
          order_id: order.id,
          callback_url: "http://localhost:5000/api/paymentverification",
          prefill: {
            name: "Shayaliza",
            email: "sample@gmail.com",
            contact: "77777777777",
          },
          notes: {
            address: "Razorpay Corporate Office",
          },
          theme: {
            color: "#121212",
          },
        };
        const razor = new window.Razorpay(options);
        razor.open();
      });
  };

  return (
    <>
      <div onClick={() => checkoutHandler(8000)}>buy Now Rs 8000 </div>
      <div onClick={() => checkoutHandler(6000)}>buy Now Rs 6000 </div>
      <div onClick={() => checkoutHandler(200)}>buy Now Rs 200 </div>

    </>
  );
}

export default Payment;

Step 4.Test Card Number, CVV = Random Number , Expiry Date = Any Future Date
5267 3181 8797 5449
4111 1111 1111 1111
Bss Itna hi h
OK BYE