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