#1: Razorpay + Node + React Tutorial - Accept payments with Razorpay

In this video, I'll show you how you can setup a Razorpay + Node + React project to start accepting payments worldwide as an Indian merchant.
Learn Node JS and React by building over 25 Projects: bit.ly/fullsta...
Code: github.com/meh...
------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: codedamn.com

[@ridz4912]

Yep, Just like you said I searched and found a lot of videos for stripe intregration but I really wanted to use Razorpay and finally I came across this video of yours and its been a life-saver ! Keep making awesome content like this ! Cheers !

[@PIYUSH-lz1zq]

can you tell me how to take user desire amount input please ? and how to send mail to correspond user ?

[@codedamn]

Learn Node JS and React by building over 25 Projects: bit.ly/fullstack-codedamn

[@consoledoterror971]

Pin this comment

[@AjayYadav-sm8lc]

things to be fetched from the backendv 17:50 using razorpay sdk for the node backend 22:45 creating an order 23:45 setting payment capture to 1, 26:48 creating a receipt 28:05 getting back the order created from the razorpay API and sending it to the frontend 31:38 cors error 33:00 verifying the payment with webhook 38:21

[@kartikkatahrekartikkatahre2478]

Really loved it 🙂 It was not about only the payment gateway integration but you have shown what are the good practices when you code or implement something step by step. Very informative video overall🙂

[@mamtachahal1277]

This is amazing. I was fiddling with the documentation and couldn't come any close to figuring it out. But then I came across your channel and wow. Everything was perfect. You are very very skilled and thanks a lot man. Love from India.

[@rishabhgupta2085]

You are awesome. Any other KZbin would have edited the video past that had errors but you showed us how you debug them. Great 👍

[@ojasmaywade3757]

Thank for this simple yet powerful tutorial 🙏

[@yashanand4313]

Thanks a lot man. It's a superb tutorial, easy to follow. I was looking for some tutorial to help me integrate online payment gateway in my MERN stack project of ecommerce website and finally after following this awesome tutorial, I was successful. Thank a lot man.

[@PIYUSH-lz1zq]

can you tell me how to take user desire amount input please ? and how to send mail to correspond user ?

[@vedantlahane8893]

@@PIYUSH-lz1zq Just pass in the total amount (bill) in the amount entity of useEffect.

[@PIYUSH-lz1zq]

I want to take from frontend

[@kartikpawar7320]

Amazing tutorial. Super easy to follow. Waiting for part 2.

[@codedamn]

Part 2 is out! kzbin.info/www/bejne/h6XWp3p7d5yhZtU

[@PIYUSH-lz1zq]

can you tell me how to take user desire amount input please ? and how to send mail to correspond user ?

[@gadgetvala]

Big Fan of your explanation skills :)

[@gjdeep]

Thank you so much! i was searching for this!!

[@kanakagarwal7320]

Thanks mehul bhaiya, it was so helpful for me

[@YatheeshRaju]

❤ thankyou amazing finally able to add payment to my app

[@AlbertoRodriguez-oe6jo]

Extremely useful, thank you so much.

[@ATHULYALOGISTICS-pt3pe]

Can you make a Razorpay subscription tutorial for WordPress website with complete guide...

[@musictrader8990]

You made my life much easier. Thank you for the video.

[@codedamn]

Thank you too Vivek!

[@indu3084]

U r such a good person. Thank u sooo much for the video

[@BharathA-bq6bc]

Hey thanks man it is very help full

[@SinghJasmohan]

very helpful... thanks and please keep making such videos.

[@codedamn]

Thanks Jasmohan!

[@saurabh1745]

It was really helpful .........can you please make video on spliting of payment in different account on same project?

[@underdoggaming5880]

Can you please make a quick video or article on how to send payment receipt via email on successful payment please.

[@taalmalesolution]

Sir I have razor pay marchent acount but not received bajaj emi payments by customers plz help to intricate payment method with bajaj emi cArd show

[@akhileshkanse6020]

I want to build payment gateway through firebase. Any help available here?

[@siddharthalagesan4460]

Can you solve this issue for me please stackoverflow.com/q/65048376/13280288

[@jannath-hussain]

Awesome 👏, i want the extensions or plugin names which you are using in visual code

[@malharjajoo7393]

Would it be a better (from efficiency/security point of view) to fill the Razorpay checkout form in backend and then fetch it in the frontend ?

[@smitagravat1063]

Can u make tutorial for subscription base model with razorpay

[@vaitheeswaranj7736]

Hey, amazing tutorial series, I found the docs pretty hard to understand. I have a problem where my json returned from my backend (the promise that gets stored in 'data') has a value of null. I followed through the rest of this tutorial using hardcoded order_id values. Can you help me with this?

[@thecomputermind1]

How to create your own wallet system

[@shivamnirne788]

How you are handeling the late authorized payments ?

[@mrbizapps2551]

Explained well...can you plz mk video on how to implement Razorpay subscriptions plz

[@yadneshkhode3091]

Bhaaaaaaaai ek number !!!!!

[@kishanbs4320]

hi while using test key its working fine but in production key is showing technical issues why?

[@amanali9501]

Plz 🙏 make a video on integration of PayU on MERN Stack

[@prakad97]

Glad you did it man..thanks..!

[@codedamn]

Thank you too Prakad

[@praveen_javali]

Thank you , very helpful .

[@sourabhbankar9380]

Thank you it helped me alot

[@codedamn]

Thank you too Sourabh

[@atulsharma6296]

I was making an eCommerce website using redux I am not getting what I need I m new to the react world and I am stuck on this for more than 3 days if possible I already have backend and frontend setup but I need to know where all the code go while using redux useDispatch and useSelector useEffect what code should go in the controllers and server.js and so on

[@trap4089]

Can't we just directly put that script tag?

[@donaldtrump1902]

I keep getting error Amount should be in Paisa integer and minimum is 1 rupees I converted amount to Paisa still the error

[@firdousProgrammer]

Why every video on youtube is showing the integration with razorpay standard checkout ? No one has shown the custom checkout page.

[@consoledoterror971]

Most people have problems with standard checkout. So ....

[@malharjajoo7393]

Great tutorial !

[@lavanyacheemakurthy]

wow.... This is so amazing!!

[@PIYUSH-lz1zq]

can you tell me how to take user desire amount input please ? and how to send mail to correspond user ?

[@nicetomeetugaming7024]

Very good idea sir!

[@kumaresansampathkumar9633]

thank you so much for your videos

[@reaper6449]

I am getting only payment id in response, there is no order id and signature id. I am generating order id from backend and using it in front end but still having the same problem

[@iHariPatel]

I think razorpay automatically validate checksum.

[@nidhisbhat3473]

You have not generated orderId . its showing error when on live mode

[@adi-kotkar]

Well prepared tutorial!!!, It worked completely fine for me...Thanks

[@codedamn]

Thank you Aditya

[@dhananjaydhoke6101]

I am not getting that js code on rozarpay site

[@shraddhabhaik6638]

Showing Error ERROR ReferenceError: RazorPay is not defined

[@ashutoshpanda4336]

Hey man it's beautiful but do you have this with angular.... I've my final assessment in my Company if you can help... Please I couldn't find any good resource..... IF you've the code kindly

[@codedamn]

I believe the core concept with Angular is also same. Create click handler, call Razorpay API and it’s done

[@saunaknandi1814]

Is using razorpay completely free or it will charge after time?

[@nicetomeetugaming7024]

Razorpay charges few % on every payment + gst.

[@chinmaykulkarni2879]

The razorpay console is not showing the right amount, the amount in the response is ₹75999 but it shows only ₹759...... same is the case even if i did amount*100

[@Fairybook1997]

Working man awesome

[@dante_ele]

How to get that colorful terminal?

[@rohankarmakar8868]

How can I change the amount in the backend depending on the cart's total amount...instead of using just an integer?

[@himalayshankar9882]

You will have to send the total cart amount as a body when you will be using fetch the razorpay api

[@aayushishah512]

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'create' of undefined razorpay.orders is showing as undefined.. Any idea what could be wrong?

[@codedamn]

How are you creating the 'razorpay' object? Can you post some code

[@aayushishah512]

Sure.. This my React component github.com/aayushah711/revv-hackathon/blob/master/porfolio/src/Components/Razorpay.jsx This is the part where express comes in picture github.com/aayushah711/revv-hackathon/blob/master/porfolio/src/backend/index.js

[@anurag9110]

We are using the API keys in the App. How can we keep them safe and secure?

[@codedamn]

You should need only one key exposed to client side. That is fine, you can use the razorpay webhook secret to verify the transaction integrity

[@menacerify]

Would this work with a nextjs application ? I just created a server/index.js file, But what about routing ? Do I need to serve the pages from the express app itself ?

[@codedamn]

It would work. You do not need to create custom server. You can make use of Next.js API routes for this. I'll probably create a video on Next.js + Razorpay integration soon

[@menacerify]

@@codedamn Yes please! That would be super helpful. So I created a custom express server mainly because I need to integrate razorpay into my nextjs app. Thanks for your content btw, really helpful 😁

[@menacerify]

@@codedamn This worked! I used Next.js API routes and it worked like a charm. Thanks my guy :)

[@damandeepsingh8412]

@@menacerify Hey, i am also impleting it in NextJS, can you please share your code, it would be helpful.

[@user-zp1dv4yh5e]

Hey, how to integrate this with Firebase

[@ashwingowda2604]

Here, you are fixing the amount to $5 or ₹5. But what if I want it to be Dynamic? How to work on dynamic amount?

[@codedamn]

You can get the dynamic amount from client side (in case of like donations), validate the amount on backend, and create an order dynamically on backend replacing the constant price with a variable.

[@venkatesh2788]

Sir please make razorpay onboarding like stripe express like automate user payment

[@arpitkumarmishra6220]

thanks for this awesome video.................well I am getting the error ""serviceworker" must be a dictionary in your web app manifest."..... if anyone else has faced the same while using Razorpay with react.....kindly suggest a solution

[@PIYUSH-lz1zq]

can you tell me how to take user desire amount input please ? and how to send mail to correspond user ?

[@temirbekerkinbekov34]

What countries does it support? Can it support Kyrgyzstan?

[@codedamn]

For receiving payments? I think yes. As merchants, I believe India only for now.

[@PrinceUpadhyayneeraj]

Make Tutorial on razorpay integration with python django

[@codedamn]

Django isn't really my stack. The concepts remain same though :)

[@suraj1990ify]

Bro how to customize payment link please make a video in this regarding

[@codedamn]

What do you mean?

[@prachisingh7030]

Will I get notification on my mobile if I choose UPI payment in test mode?

[@pranavkumar1818]

no!

[@prachisingh7030]

@@pranavkumar1818 Thank you! Can you please tell- after verification of signature how to send response to the front-end(React) that the payment is successful?

[@pranavkumar1818]

@@prachisingh7030 Hey Prachi, he explains that in the video around 38:03 . Thats what razorpay send back in case of a confirmed payment. However he suggests not to depend on that and instead use webhooks to make sure payment capture (money actually transferred to your account). I am a bit confused there myself. a webhook will tell my server that money is actually transferred. But how do I tell my client that (react-native app in my case).

[@prachisingh7030]

@@pranavkumar1818Can we do a thing! When the signature is verified we save the transaction id , order id etc in mongodb and then in the client side fetch the data inside handler according to Order id.(If the data of that particular order id was saved then It would be fetched otherwise no data!)

[@pranavkumar1818]

@@prachisingh7030 I will tell what i did. Dont know if its correct (i think it is), also I am building on react-native. After payment is done, i am sending the signature , paymentId & orderId to my server. Here i am fetching my document containing this orderId n other info (amount, timestamp etc) & fetching the orderId. I am taking this orderId(from my doc) and along with signature, generating the hmac digest. matching it with the signature. If the signature matches, I am using razorPay.orders.fetch(req.body.order_id) to get the current status of the orderId. if its "paid", that means my order was captured, so I am returning an OK along with some message to my client to do further processing. Hope this helps.

[@tarunkishore4574]

Is the Verification part in the back end a necessary ?

[@codedamn]

Yes. You don’t want people to fake payments

[@Fairybook1997]

Ya, U need to have a grip on node.js bro, Hope this reply is worth 2 u

[@ankurUdey]

Thank you so much :)

[@nothingbutspace8422]

Does this work only for web or for android too?

[@codedamn]

Backend will be the same, the frontend could also technically work if you're using something like Ionic. Otherwise, try using the razorpay android SDK or something, not sure what they provide on mobile.

[@nothingbutspace8422]

@@codedamn Thank you. I'll check out the razorpay android SDK

[@hardikdesai7693]

Hey there How do I pass dynamic amount and name .

[@tarunbisht2000]

server code me db se price leke amount me bhej de frontend ko

[@gauthamkshatriya2953]

is it possible to add addional value in handler? to send it to database? like ammount and order id?

[@husler7424]

It would have been better if you had provided Demo first

[@ganapathisubramanyamjayam]

can this be used in react native?

[@mayuraitavadekar7968]

is this production ready code? can I use your github code in prouduction?

[@codedamn]

Yes you can. It has backend validation in place which is important

[@arihanthirawat6574]

can i use this same for react native? please reply fast.

[@codedamn]

For React Native your frontend react code would be different. Your backend validation could remain same

[@arihanthirawat6574]

@@codedamn can you please make a video on that too

[@kamilakin6866]

Hey codedamn, I really appreciate for your effort to prepare those videos. But man, I watched like 200 ad in 20 min, just release your courses on Udemy or somewhere some patreon link something. This doesn't helping to learn

[@abhishekkumarsingh8833]

Thanks a lot bro

[@whit3rose]

TBH I am grateful for the video but please you are confusing by changing the function names and moving the code all over the place. I'm really sorry for the rude comment.

[@Aakash-lz5ou]

Doubt sir: React is updated, now it don't have "Backend" folder, it directly have "node modules" folder So, How to make index.js API ?

[@jitho7596]

Thankss a lot...............................................................................................................................

[@rounak308]

make some content for type script too

[@aseemsavio6696]

29:02 Been there, done that LMAO

[@codedamn]

Haven't we all, haha 😂

[@gantavyasaraswat2130]

Reduce the background music please , thats very loud .

[@bestclips3046]

What if the amount is entered by the user?

[@iHariPatel]

It's easier than Paytm ,

[@neilkapadia7]

So many ads in one tutorial

[@siddarthbhave8642]

Yo how tf are you soo smart

[@codedamn]

I just read docs lol

[@adarshs1750]

: - )

[@shivrajnag12]

Razorpay Sucks.....

[@codedamn]

We don’t have a lot of good alternatives in India apart from Razorpay