How to integrate Stripe Payment in React and Node.js (Step by Step)!
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- In this video we will see how to integrate stripe payment gateway in React.js and Node.js
🎁Complete Full Stack Ecommerce Application With Stripe Integration Source Code-
☑ / complete-full-stack-ec...
👋Connect With Me:
▶Facebook - / official.codewithmasood
▶Instagram - / codewithmasood.official
▶Blog - / codewithmasood
▶Pinterest - / codewithmasood
📙Must Read Books That Will Transform Your Thinking-
▶Psychology of Money: amzn.to/3jqvhyp
▶How to Win Friends and Influence People: amzn.to/3GifLh7
▶Power of Habit: amzn.to/3FRszcW
▶Ego is the Enemy: amzn.to/3GmZA26
▶Cracking the Coding Interview: amzn.to/3C2bYBW
▶Introduction to Algorithms: amzn.to/3jzkt1f
▶Cryptography and network security: amzn.to/3WQrol3
#react
#stripe
#mernstack
#codewithmasood
#programming
#coding
DISCLAIMER: Some of the links in the description above are affiliate links, which means that if you click on one of the links and make a purchase, I will receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for your support!
Where is the Github code repo??
The code is in patreon brother, shared as the first link in description box below:)
This video is very helpful for me and everyone who stuck any E Commerce payment section. in this video you can explain strips in a very simple and clear way thanks a lot
Simple and straight to the point. Thank you very much
I tried many, this is the first one that worked wow
Glad to hear that!
Thank you very much, friend! Your video helped me a lot, I was racking my brain all day and your video was spot on in solving my problem. Watching from Brazil.
Glad to hear that my friend! Thanks
Great video make on recurring payment
Best Tutorial ever...
Thanks
Thank you very informative,
keep going
This is awesome! I am using this same stack and was struggling at this point, can't wait to give your solution a try.
okay it worked lol thank you :)
Happy to hear that. Great
you are the goat
Good work Masood, enjoyed your tutorial. Keep it up.👏
Thanks
Unfortunately this video did not clarify anything for me. I still do not know how to integrate stripe into MY own code
Love from India bro
Sir I am using real cards in test more . What error message should it show.
I would love to see recurring payments videos too
Thanks
Okay, now I understand why stripe gives error when I choose India Location, Thank You Bro for making this amazing video
Hey! Bro I am also getting error....... How Can I fix it ?
it is showing me a error related to indian regulations
does it not work in india
i have a doubt i am creating dummy project of ecommerce website so i want to use test mode only, i don't want user to lose any real time payment using stripe test mode if i deploy the stripe of test mode will it work for my dummy project? let me know quickly
Yes
At 6:33 what exactly are you supposed to put in the place of ${apiURL} ? This is not explained
i keep getting 500 error @codewithmasood
Ok this is the api key for server like, where your server is running put that here,
@@CodeWithMasood So if my backend is localhost5000 am I entering it as /localhost5000/create-checkout-session on the frontend code? And the same for the backend?
@@CodeWithMasood the docs said to put it as /create-checkout-session for both… am i supposed to put it as localhost:5000/create-checkout-session for the frontend if my backend is coming out on port 5000?
6:30 why u dont use axios its short your code
thank you, it works!
So stripe redirects to FE appliction after success. How does server knows about it?
Cuz we are using both FE and backend and it is a full stack application, we are using custom pages for checkout and redirections
@@CodeWithMasood Ok got it, suppose FE and BE are separate app, then how it will happen, any idea?
How to get the webhook call to save checkout information in local DB?
Search it up on official stripe react and node docs man!
how to get checkout transaction details after payment is successful ?
Thanks very much bro, it's really useful video
Thanks a lot. this video is very helpfull.
Glad to hear that
Thank you, Are you going to post the source code of the complete site or do a tutorial so that we can reproduce it?
Join me on Patreon and I will share the source code with you. You can message me their once you joined!
@@CodeWithMasoodi got an error
@@CodeWithMasood laalchi bhikari
@@imvikashkkme too the frontend keeps throwing 500 error.
@@CodeWithMasood please give source code i will face problem from three days
Thank you, you are amazing!
You are welcome!
I have generated API key in stripe.i am in a test mode
Pop up appears that complete your account details to recey payments
Many things are there which are unnecessary for me as I am in a test mode
If I don't fill account details and try to make test do I receive payment
Really good video brother, you are amazing
Can anyone tell me which library is using in this video for Toasts/notification
react-toast
pnpm add react-hot-toast
Make a detailed video on Redux.
I will create this tutorial soon!
Hi @CodeWithMasood Thank you for the tutorial! But I have one query. What if the customer without doing any payment manually enters the success url in the address bar and gets redirected to the success page without doing any actual payment? Is there anything we can do to first confirm whether the payment has really been done?
Yep in that case the payment would not be done of course but you can also fix it with some logic in the backend or by making this success url bugger and harder to remember and other expiring techniques in the server
saying apiURL is not definet , what to do?
thanks bro that was useful
Thank you, you saved my day😊
Is that safe to store secret key in frontend? (env file)
please tell will it word for subscription model
When/where do you save it in your database when the payment is succesfull?
I guess store it in the orders module, after successful payments
hello brother please make a video how to desing the product list in strip
When I import {loadStripe} from '@stripe/stripe-js' my browser console shows the error "refused to apply inline style because it violates the following content security policy directive...". Does anyone know how to fix the issue?
it is showing me a error related to indian regulations
does it not work in india
No it should work cuz stripe is available in india
Do we get money , i mean do transition happens? after integrating this?...
Certainly, if stripe is available in your country and if you switch to actual payment details that you need to put in to your stripe account instead of test mode. You will definitely get payments,
Hello can you please help me out I got trouble
@@fitNdedicated Certainly please reach out on insta or Patreon
well done
Thanks man
Does it works in Philippines?
Can i use in Pakistan
i try to make it what you teach but im getting 401 unauthrorized can explain to me? what happen?
same happend with me
his not interested replying us thats sad@@sikusk7422
can i accept INR if possible please guide ??
Please visit official docs
Bro y btana k jb payment successful hojegi, then is ko db m kis trah store krwaen g? Aur bijae har bar stripe dashbard pr jany k tmam transactions ka data hm apny custom react dashboard pr kesy show krwaein gyy btw thanks for tutorial ❤
I am using the content of ur project,can i get copyright issue
No problem dude, feel free from my side
what is apiURL
This is backend api node.js server
helpfull
Stripe integration k leye account hona zarori hai
Yes bro
waiting for redux course
its for professional revision video not for beginners
video is not in detail and also unable to learn it
bhai aoa subscription base b veido banao pls
Will create the subscription version soon!
hey broh can you help me polease?
Hey, sorry for late reply but yes please message me on insta or fb and i can help you out
❤
Worst video .... not telling the process you just wanted to create the video
👍
this was such a confusing and rushed video... holly shit.
Dude, you're clicking too fast and jumping from page to page too fast!
Thanks for your feedback!
change stupid theme... I can even see what you have written even though in retina disaply..... pure black is distracting.... just use normal one came by default.... otherwise thanks for tutorial...
Address people with courtesy….. this is not a good way to give feedback
This is stupied comment