Razorpay Payment Gateway Integration In Node JS & React JS | MERN Stack Tutorial

let's see a visual demo how we gonna integrate razor pay in march stack when user click on a buy button we send product id to the server here we fetch product price and send it to the browser to api then we get order id as response we're gonna pass that order id to the checkout after successful payment browser by sending payment id signature and order id in response we send them to our server to verify payment after verifying payment we update it in our database so this is how the razer p integration works so without wasting time let's get started [Music] let's go to the azure official site click on sign up button to create an account here i'm gonna sign up with my google account i'm gonna select demo account let's set business type will be unregistered name will be cyberbull and mobile number will be some random number click on next that's it we have successfully created our reserve account in order to get real payments you need to verify account after that you can switch to live mode we are just learning so let it be dash mode let's go to the settings in api case tab let's generate test keys copy both of them and save it somewhere for now [Music] ok first open up a command prompt and then create a folder named razer play then navigate into this folder here we create server folder and navigate into it then we gonna initialize this with mpf after that we install express dot emb razor pay and course packages after installing the businesses let's open this project in bs code in root directory let's create index.js file in this file let's import express course and dot enb we're gonna save express instant in app variable then configure environment variables next we're gonna add json and codes in middleware after that we will be listening to our app on port 8080. let's save this file and create dot enb file in root directory in this file add your result to key id and secret key let's save this file and create routes folder in root directory in this folder create payment.js file in this file let's import router from express browserpsdk and crypto which is a built-in module after importing modules we're gonna create async post request with try catch block in it before we move ahead first let's export this router in try block create result instance then in options object add amount from body and multiply it with hundred then add currency to be inr and received which is i'm creating random string with crypto modules after that we're gonna create a order with razer instance by passing options object if error occurred we console.log and send response with message else we send order in response in catch block if error occurred we console.log and send response with message we have successfully created order api now let's create payment verify api we're gonna create async post request with try catch block init same as before in catch block if error occurred click on console.log and send a response with message let's restructure request.body to get order id payment id and signature combine order id and payment id with vertical bar and save it in a variable razer pay give us a way to decrypt the payment signature checkout documentation you will find this particular code to decrypt the signature the signature which we get from request of body is equal to the signature we created then it's a valid signature after that we send a response with message if it's didn't match then we're gonna send a response with message invalid signature sent we are done with both apis let's save this file now let's open index.js file and here import payment routes just below the middleware let's use our routes we configured our routes let's save this file now [Music] let's go back to the root folder and here we're gonna create react app named client it's gonna take a while so i'll be back in a second after it's done we have successfully created react app let's navigate into this client folder and install xeos to call apis after installing this dependency open this project in vs code let's clean up some unwanted code and files in index.html add title to the wizardpay demo and paste this reservation script in app.js let's import axios and use it from react create book state and set initial values like name to be fault in our stars author to be john green image to be this url which i found this from google and price to be 250 rupees i will be pasting markup one after one write down along with me or copy it from source code okay we have added markup and also added state values let's save this file now and add css styles in app.css save this file also and run server with npm start command on clicking buy button we call handle payment function which we haven't created so let's create it's gonna be a async function and try catch block in it if error record we just console.log let's save order api url in a variable and next call this api and send rise of book in a body here i am sending price but you should never do that because user can manipulate markup so to resolve this problem send product id and in server find the price of product and create razor pay order id it's just a demo so i'm sending price directly here we're gonna console.log the response save this file and make sure to start backend server also by node index.js command in browser click on buy button and as you can see we got raspberry order id from our server now let's go to open checkout page after clicking on buy button and send order id into it we call this function init payment and pass the data here in options object add your result key id amount currency product name description product image result order id and a asynch handler function with try catch block image so what's this handler function this function will be called after successful payment so here we call verify api to verify this payment we gonna save verify api url in a variable and call this api and send response in a body which includes order id payment id and signature then we console.log the response you can also add theme color here next create new reserve instance by passing options and save it in a variable then open checkout page that's it save this file and test the application in browser you

Channel: CyberWolves

Views: 21,897

Keywords: razorpay, react, razorpay payment gateway integration, mern stack project, mern stack, payment gate, razorpay payment gateway integration in node js, payment gateway integration in mern stack, react js, node js, javascript, mern stack clone, node js project, react js project, mern app, mern auth, node js razorpay integration, react js razorpay integration, razorpay tutorial, tutorial, payment integration mern stack, razorpay wordpress integration

Id: eC73edQ5jmw

Length: 10min 10sec (610 seconds)

Published: Sun Feb 27 2022