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



alt text


This is Sample Coded Kit for Razorpay Standard integration in React.Js and Node.Js as Backend


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


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 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









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








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








Node.js & Express App



npm init -y



npm i express



npm i cors



npm i paytmchecksum



npm i razorpay



npm i shortid









Leave a Reply