Step 1: you need to upload the script programmatically in reactJS.
Add this in App.js
import { useEffect } from "react";
import displayRazor from "./utils/paymentGateway";
function App() {
//programatically adding the script in html
const loadscript = (src)=>{
return new Promise((resolve)=>{
const script = document.createElement("script");
script.src = src;
script.onload = ()=>{
resolve(true);
}
script.onerror = ()=>{
resolve(false);
}
document.body.appendChild(script);
})
}
// on page Load , we are adding script.
useEffect(()=>{
loadscript("http://checkout.razorpay.com/v1/checkout.js")
},[])
return(
<>
<button onClick={displayRazor}>Buy Now</button>
</>
)
}
export default App
loadscript is taking src as the parameter which is returning a promise .
resolve is used by passing argument as true or false , indicating that script has been successfully loaded or not.
DOM manipulation is used for creation and appending the element.
"http://checkout.razorpay.com/v1/checkout.js" is the endpoint provided by Razorpay for orders.
Step 2:
Now we will create a function which will trigger a pop-up of razorPay on the screen.
create utils > paymentGateway.js
(you can create folder of your choice , this is what i personally prefer)
paymentGateway.js
export default async function displayRazor(){
const data = await fetch("http://localhost:3000/razorpay", {
method: "POST",
headers: {
"Content-Type": "application/json",
}
}).then((t) => t.json());
const option = {
key:"<your_key>",
currency:data.currency,
amount:data.amount,
description:"",
image:"http://localhost:3000/logo.jpg",
handler:(res)=>{
alert("order_id" + res.razorpay_order_id);
alert("payment_id" + res.razorpay_payment_id);
},
// name that will shown on the popUp
prefill:{
name:"",
email:"",
contact:""
}
}
const paymentObject = new window.Razorpay(option);
paymentObject.open();
}
displayRazor function will be triggered on click.
This will make a post request to the backend server.
instance of razorpay which accepts option as a parameter object.
Backend:
Note : in your package.json --> add type : "module"
step 1 : In cmd
npm i express path cors shortid razorpay url
step 2: add this in your index.js :
- import all the required libraries
import express from "express";
import path from "path";
import cors from "cors";
import shortid from "shortid";
import razorpay from "razorpay";
import { fileURLToPath } from "url";
import { dirname } from "path";
const PORT = 3000;
step 3: add a middleware for preventing cors error
app.use(cors())
step 4: create an instance of express:
const app = express();
step 5 : create an instance of razorpay:
const razorpayInstance = new razorpay({
key_id: "<key_id>",
key_secret: "<key_secret>"
});
- how to generate this key_id and key_secret will be explained in the end.
step 6 : (optional) --> add logo.png in your root directory
create a route handler for fetching the png:
app.get("/logo.png", async (req, res) => {
try {
// Use import.meta.url to get the current file's URL,
// then convert it to the file path using fileURLToPath.
const currentFilePath = fileURLToPath(import.meta.url);
// Get the directory name using the dirname function.
const currentDir = dirname(currentFilePath);
// Create the path to the logo.png file.
const imagePath = path.join(currentDir, "logo.png");
// Send the file as a response
res.sendFile(imagePath);
} catch (error) {
console.error("Error serving logo.png:", error);
res.status(500).send("Internal Server Error");
}
});
- fileURLToPath(import.meta.url): This is used to convert the file URL of the current module (where this code is located) to a file path.
- dirname(currentFilePath): This extracts the directory name from the file path.
- path.join(currentDir, "logo.png"): This creates the full file path by joining the directory path with the filename "logo.png".
step 7 :(important) create a route handler for the creating payment order
app.post("/razorpay",async (req,res)=>{
const payment_capture = 1;
// 1 means payment should be captured immediately
const amount = 2;
const currency = 'INR';
const option = {
amount: amount *100,
currency:currency,
receipt: shortid.generate(),
payment_capture
};
try{
const response = await razorpayInstance.orders.create(option);
console.log(response);
res.json({
id:response.id,
currency:response.currency,
amount:response.amount
})
}
catch(error){
console.log (error);
}
})
Our whole backend and frontend part is completed.
How to generate API keys in razorpay:
step1 : visit razorpay
step 2 : search api
step 3 : click on API keys
step 4 : generate your own API keys and replace it in the above code.
Github code : PaymentGatewayDemo
Top comments (0)