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 installin 📁libafter installing all modules runnode server.jsAlso do
npm installin 📁gatewayafter installing all modules runnpm starthere
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 👇
CreateOrder: (req, res) => {
var OrderID;
var instance = new Razorpay({
key_id: '<YOUR_KEY_ID>', //you'll find this in settings panel in razorpay dashboard
key_secret: '<YOUR_SECRET_KEY>' //this one too
})
var options = {
amount: req.body.amount,
receipt: req.body.receipt,
currency: "INR",
payment_capture: '0'
}
instance.orders.create(options, function (err, order) {
res.send(order)
})
}
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 👇
RequestOrderPayment = () => {
let amntTxt = document.getElementById('amount').value
Axios.post('http://localhost:2024/api/razorpay/create-order', { amount: amntTxt, receipt: "gurkaran_order_54654" })
.then(response => {
this.setState({
orderID: response.data.id
})
var options = {
"key_id": "<YOUR_KEY_ID>",
"key_secret": "<YOUR_SECRET_KEY>",
"amount": amntTxt,
"currency": "INR",
"name": "Acme Corp",
"description": "A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami",
"order_id": this.state.orderID,
handler: function (response) {
alert(response.razorpay_payment_id);
},
"prefill": {
"name": "Gaurav Kumar",
"email": "gaurav.kumar@example.com",
"contact": "9999999999",
},
"notes": {
"address": "note value",
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new window.Razorpay(options)
rzp1.open();
})
}
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!
DOWNLOAD FULL SOURCE CODE
