Razorpay-Node-React-Sample-Kit
This is Sample Coded Kit for Razorpay Standard integration in React.Js and Node.Js as Backend
Set-Up
open terminal or command prompt Type
npm install
in 📁lib
after installing all modules runnode server.js
Also do
npm install
in 📁gateway
after installing all modules runnpm start
here
Explaination
in 📁 lib
you’ll find routes folder in which you’ll further find path.js in that file there’s path defined for post
request named as /api/razorpay/create-order
and will hit 👇
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
CreateOrder: <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">var</span> <span class="pl-v">OrderID</span><span class="pl-kos">;</span> <span class="pl-k">var</span> <span class="pl-s1">instance</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Razorpay</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">key_id</span>: <span class="pl-s">'<YOUR_KEY_ID>'</span><span class="pl-kos">,</span> <span class="pl-c">//you'll find this in settings panel in razorpay dashboard</span> <span class="pl-c1">key_secret</span>: <span class="pl-s">'<YOUR_SECRET_KEY>'</span> <span class="pl-c">//this one too</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-k">var</span> <span class="pl-s1">options</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">amount</span>: <span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-c1">amount</span><span class="pl-kos">,</span> <span class="pl-c1">receipt</span>: <span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-c1">receipt</span><span class="pl-kos">,</span> <span class="pl-c1">currency</span>: <span class="pl-s">"INR"</span><span class="pl-kos">,</span> <span class="pl-c1">payment_capture</span>: <span class="pl-s">'0'</span> <span class="pl-kos">}</span> <span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-c1">orders</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">,</span> <span class="pl-s1">order</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-s1">order</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> |
Now in this Code simply an instance is generated through razorpay constructor by passing key_id and secret which we can use in our further code to add other specifications but here we need to generate an Order Id on which we call our razor pay payment panel because it only be created or say called on every new and unique order id
and to generate order id we execute instance.orders.create()
and send the response to front-end which is nothing but reactjs
Now in reactjs i’ve render simply a button and a text box to enter and submit amount to our api now here is the code on button click submit 👇
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<span class="pl-v">RequestOrderPayment</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">let</span> <span class="pl-s1">amntTxt</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'amount'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-v">Axios</span><span class="pl-kos">.</span><span class="pl-en">post</span><span class="pl-kos">(</span><span class="pl-s">'http://localhost:2024/api/razorpay/create-order'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">amount</span>: <span class="pl-s1">amntTxt</span><span class="pl-kos">,</span> <span class="pl-c1">receipt</span>: <span class="pl-s">"gurkaran_order_54654"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">response</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">orderID</span>: <span class="pl-s1">response</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">id</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-k">var</span> <span class="pl-s1">options</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-s">"key_id"</span>: <span class="pl-s">"<YOUR_KEY_ID>"</span><span class="pl-kos">,</span> <span class="pl-s">"key_secret"</span>: <span class="pl-s">"<YOUR_SECRET_KEY>"</span><span class="pl-kos">,</span> <span class="pl-s">"amount"</span>: <span class="pl-s1">amntTxt</span><span class="pl-kos">,</span> <span class="pl-s">"currency"</span>: <span class="pl-s">"INR"</span><span class="pl-kos">,</span> <span class="pl-s">"name"</span>: <span class="pl-s">"Acme Corp"</span><span class="pl-kos">,</span> <span class="pl-s">"description"</span>: <span class="pl-s">"A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami"</span><span class="pl-kos">,</span> <span class="pl-s">"order_id"</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">orderID</span><span class="pl-kos">,</span> <span class="pl-en">handler</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">response</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s1">response</span><span class="pl-kos">.</span><span class="pl-c1">razorpay_payment_id</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s">"prefill"</span>: <span class="pl-kos">{</span> <span class="pl-s">"name"</span>: <span class="pl-s">"Gaurav Kumar"</span><span class="pl-kos">,</span> <span class="pl-s">"email"</span>: <span class="pl-s">"gaurav.kumar@example.com"</span><span class="pl-kos">,</span> <span class="pl-s">"contact"</span>: <span class="pl-s">"9999999999"</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s">"notes"</span>: <span class="pl-kos">{</span> <span class="pl-s">"address"</span>: <span class="pl-s">"note value"</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s">"theme"</span>: <span class="pl-kos">{</span> <span class="pl-s">"color"</span>: <span class="pl-s">"#F37254"</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">var</span> <span class="pl-s1">rzp1</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">Razorpay</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">)</span> <span class="pl-s1">rzp1</span><span class="pl-kos">.</span><span class="pl-en">open</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> |
using axios
we hit the post request to our nodejs server to generate order id and send back to client and we get it in response from promise i.e then, on gettign response we simply just reset or say setState for empty order id to value we get from response.data.id
as response is the overall result object giving whole information about success or failure about the request in which data
is the main response values we need! so, now on getting order id we generation option object to pass in our Razorpay constructor to open th Standard checkout window!
React.js App
npx create-react-app reactpaymentgateway
cd reactpaymentgateway
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React, { useEffect } from "react"; import "./App.css"; import CourseCard from "./components/CourseCard"; const App = () => { 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); }); }; useEffect(() => { loadScript("https://checkout.razorpay.com/v1/checkout.js"); }); return ( <section className="card-list"> <CourseCard /> </section> ); }; export default App; |
Now create a components
folder inside the src folder and create a component called as CourseCard.js
CourseCard.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React from "react"; import displayRazorpay from "../utils/PaymentGateway"; function CourseCard() { return ( <div> <br></br> <h1 style={{ textAlign: "center" }}> RazorPay Payment Gateway Integration in React </h1> <br></br> <button type="button" onClick={displayRazorpay} className="course-payment-button" > Buy Course </button> </div> ); } export default CourseCard; |
Now create a utils
folder and inside that you need to create PaymentGateway.js
file and copy paste the following code
PaymentGateway.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
export default async function displayRazorpay() { const data = await fetch("http://localhost:1337/razorpay", { method: "POST", }).then((t) => t.json()); console.log(data); const options = { key: process.env.RAZORPAY_KEY_ID, currency: data.currency, amount: data.amount, name: "Coding Shiksha", description: "Wallet Transaction", image: "http://localhost:1337/logo.jpg", order_id: data.id, handler: function (response) { alert("PAYMENT ID ::" + response.razorpay_payment_id); alert("ORDER ID :: " + response.razorpay_order_id); }, prefill: { name: "Gautam Sharma", email: "geekygautam1997@gmail.com", contact: "9821254649", }, }; const paymentObject = new window.Razorpay(options); paymentObject.open(); } |
Node.js & Express App
npm init -y
npm i express
npm i cors
npm i paytmchecksum
npm i razorpay
npm i shortid
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
const app = require("express")(); const path = require("path"); const cors = require("cors"); const shortid = require("shortid"); const Razorpay = require("razorpay"); const razorpay = new Razorpay({ key_id: "rzp_test_sWnSYKJEidnzo6", key_secret: "FxEvuLYvGUfYe6ylO3poldE3", }); app.use(cors()); // Serving company logo app.get("/logo.jpg", (req, res) => { res.sendFile(path.join(__dirname, "logo.jpg")); }); app.post("/razorpay", async (req, res) => { const payment_capture = 1; const amount = 499; const currency = "INR"; const options = { amount: amount * 100, currency, receipt: shortid.generate(), payment_capture, }; try { const response = await razorpay.orders.create(options); console.log(response); res.json({ id: response.id, currency: response.currency, amount: response.amount, }); } catch (error) { console.log(error); } }); app.listen(1337, () => { console.log("Backend running at localhost:1337"); }); |
DOWNLOAD FULL SOURCE CODE