Build Node.js + React.js Razorpay Payment Gateway Integration Web App in Browser Using TypeScript Full Project For Beginners

 

 

alt text

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 run node server.js

Also do npm install in 📁 gateway after installing all modules run npm 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 👇

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 👇

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

 

 

 

 

Now create a components folder inside the src folder and create a component called as CourseCard.js

 

 

CourseCard.js

 

 

 

 

Now create a utils folder and inside that you need to create PaymentGateway.js file and copy paste the following code

 

 

PaymentGateway.js

 

 

 

 

Node.js & Express App

 

 

npm init -y

 

 

npm i express

 

 

npm i cors

 

 

npm i paytmchecksum

 

 

npm i razorpay

 

 

npm i shortid

 

 

index.js

 

 

 

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply