Your channel is one of those that deserve way more exposure - the fact that you don't have at least half a million sub is beyond me Greetings from Lebanon!
Thank You! Thank You! Thank You! I've been slamming my head against the wall trying to figure this stuff out and hear you are the only tutorial that actually bothers to explain anything completely and fully. This is a lifesaver.
@@leighhalliday I'm making my first real project after doing a Udemy course! It's an art site for my sister so she'll be the one making the money :P I'll just be taking that experience. Maybe I'll charge her 😆
Great tutorial, i got how the front-end library worked from stripe's docs but i couldn't figure out the backend. It was easier than i thought, thanks. I managed my checkout by simply getting the paymentMethod object into my api so that i could look up the database for the user cart, get the total and charge the total directly from the backend, not a fan of having the amount sent from the client because i feel like it's not that safe and something i would never do, the less i trust the information from the client the better it is, unless obviously, it's signed or hashed for backend verification.
Hey Riva! What about a donation or something like that where it the amount is user entered? If it were a store, I would probably not be sending dollar amounts anyway, but some reference to a shopping card which contains products and quantities, where the amount is calculated based on the cart contents.
@@leighhalliday That would make sense, if you suppose the amount to be paid is a choice made by the user then it becomes a normal input, what i was saying is, in a real scenario where you have a ecommerce website or something based on listing->products->prices it's not the best idea to recive the amout of the cart from the client, it should always be read server-side, pretty much that!
Excellent tutorial. Straight to the point. One thing I would personally change is simply not use Next.js as it doesn't really have any purpose for this, and some viewers would skip the video as soon as they hear that you're using Next.js, not wanting to deal with it simply because they don't know what it's about. Anyway, excellent tutorial, once again!
Hey kcrckyboy! Thanks :) The reason I used Next.js is because I love it haha! Plus, to process a Stripe charge you need both a frontend and a backend... so I could either do it in 2 separate apps, or I could do it all within a single Next.js app.
you are right people will prefer react because most of the people dont really know nextjs. they will think they have to learn nextjs in order to follow your tutorial. excelent anyway
Excellent tutorial ... very well explained everything ... I had an implementation with the previous library ... that did not work at all well ... with this I have solved my problem ... greetings from México...
@@leighhalliday i had a challenge to solve, and it required stripe integration :D. it was my first time doing it and you helped me. I received a job offer few days after that and really happy about it and thank you alot again
Thank you very much for this amazing tutorial ! I was just wandering if you could make some kind of tutorial on Stripe Connect (for instance if we do not want the money to go to a single institution but users paying between themselves) ?
Ppl who make stuff like this shouldn't pay taxes. You already contributed enough to society thanks man. Have you used the premade checkout element provided by stripe itself? Is it even easier than this method?
Haha... I'll tell the CRA (canada revenue agency) that I didn't pay my taxes because Carlos said it was ok. Hmm... not entirely sure what the premade checkout element is... isn't that what this is?
This was really great and made it pretty straightforward to get a payment form going. My question is, do you have any recommendations for integrating the PaymentRequestButtonElement for Apple Pay into this setup? Getting the element to show up is easy enough, but what to do with the payment Request afterwards in the setup where we have our API for the payment intent has me stumped a bit.
Hey Mike! I think that's a little too specialized for me right now... unless I had an actual use-case, it's probably not the sort of tech I'd dive into.
Thanks for the wonderful explanation :) but there is one question at 2:15 you told that stripe publishable key should not be on environmental variables like you directly used it but what about us , where we will passing publishable key to get it into react component any help would be greatly appreciated
Hey Amit! Stripe always has 2 keys... the public key, and the secret key. Publish key can be exposed in the client (react), and secret should only ever be on the server. For both keys, it's ideal to avoid committing them into your repository, but instead storing them in environment variables. Next.js just revamped how they do env variables.. check that out here: nextjs.org/docs/basic-features/environment-variables
Hey Marek! I don't believe gatsby has any form of runtime server side code... you'd probably want to take a look into hosting serverless functions somewhere to execute your backend code... if deploying to Netlify, they have: docs.netlify.com/functions/overview/
hello Leigh, your videos are amazing! thank you very much. Do you have any tutorial about "Enable other businesses to accept payments directly" cause I have created an app like Amazon. But I really don't know how to use Stripe with this. My app was created with Symfony5/ApiPlatform/Reactjs. Thanks for you help!
CardElement isn't working for me :( I wrap it up in Elements with promise. It loads but the style shows the width of 1px and 19px for height...no idea where it's wrong.
I'm just kinda confused as to where everything should go. As per the docs, it seems like they're creating payments right in React which I would assume is a bad idea because your build will have a secret key in it. I've seen others do a separate Express/CRA setup and others do SSR with Next.js. Can you clarify and please cite the docs if you can?
Hey Malik! Stripe always has 2 parts: Client side + Server side. On the client side it sends the credit card data to Stripe and they return with a token. On the server side is where you can actually charge money to that token... so you could do the server side part either in a separate express app, or within an API route / page within Next.js since that runs entirely on the server. I wouldn't think about SSR which is all about rendering react server side, but more about the API routes which is what we did in this video.
@@leighhalliday Hey Leigh, can you do a fullstack tutorial on concurrency. I've seen multiple resources on Redis or Websockets but the use cases have been really limited to user chat rooms. If there are users A and B and A is viewing a detail page while B deletes it, how should your frontend handle that stale page on every client that accesses it. If multiple users edit a resource in close succession how should that be resolved? I'd really appreciate the explanation, especially with deeply relational data.
what if we want to save customers credentials so he can use them later on and pay without refilling the form again? does this mean that he must have a unique publishable key and if thats the case, how can we produce it?
I think if you want to do this you would create a "customer" in Slack... but it's a bit more involved because you would need to store it in a database, and associate it to a user, meaning you'd need authentication too.
@@leighhalliday yeah i use react native expo and firebase as aunthetication, my question is, what i need to store in database in order to make payments without refilling forms? do i need a unique token or every credential? and one last thing, what should i change in the form in order to run the programm for android emulators
Hi Leigh, if possible, would you mind doing a video shot on deploying a stripe + nextjs app (eg: donation page) host on AWS? I am sorry to ask, but if possible, I really wish to learn that part. If not worth, just ignore me. Thank you. BTW, I am your big fan, I watched every single episode. I really love your videos. Great stuff.
Hey Damon! Sorry, being honest I probably won't tackle how to deploy a nextjs app to AWS... I find AWS the most confusing stuff in the world... am I going straight EC2, am I going on a lightsail server... having to worry about hosting an app is one of my least favourite things of being a developer, which is why I love services like Vercel, Heroku, etc...
Hi Leigh, hate to be picky, but as far as I can see there is no 3D authentication here? Would that be something you would consider covering in the future please? I've been struggling with this for 4 days now and I'm just trying to create a variable amount donation page for a charity im doing front-end web development work for :( Otherwise great video
Hey! Ah interesting... I've never worked with this before actually. Didn't realize it was regulation in the EU. stripe.com/docs/payments/3d-secure I'll keep it in mind... but I'm not sure when I'll get around to it. I'll do my best!
@@leighhalliday Thank you so much! Banging my head against a wall, I'm much more comfortable with react and node js, but can only find solutions in other languages and just losing hope to be honest. I know you can do it with the Stripe Checkout (it comes with that) but Im struggling with implementing that either. Really bummed out. Whenever u get a chance it would be massively appreciated
Getting error !!!! Failed to load resource: the server responded with a status of 404 (not found) Error: request failed with status code 404 At createError At settle At XMLHttpRequest.handleLoad I have created src in which I have created 2 files charge.js and payment.js?
Often to avoid floating point math errors, financial services deal with the lowest common denominator, which in this case is cents. So instead of passing $1, you pass 100 cents.
Hey Leigh, I seem to be running into 404 error with the axios URL path (I've using direct path such as localhost, just putting /charge but does not work at all). I'm not sure what I need to exactly do to fix it. I pasted my GitHub link to the code below. github.com/adamdevelops/TrendyChic/blob/master/src/components/PriceArea.js github.com/adamdevelops/TrendyChic/tree/master/src/pages/api
@@leighhalliday that didn't seem to work even removing API portion in the link. Im not if this affects it but Ive intially built this in React/Redux and installed Express/Next JS/stripe to setup the API
Your channel is one of those that deserve way more exposure - the fact that you don't have at least half a million sub is beyond me
Greetings from Lebanon!
Hey Skia! Greetings from Canada. We'll make it happen :) Just give it some time!
Eactly
Thank You! Thank You! Thank You! I've been slamming my head against the wall trying to figure this stuff out and hear you are the only tutorial that actually bothers to explain anything completely and fully. This is a lifesaver.
Thanks, Joe :) Glad I was able to help! I hope whatever you are doing is able to charge a lot of money!!! :D
@@leighhalliday I'm making my first real project after doing a Udemy course! It's an art site for my sister so she'll be the one making the money :P I'll just be taking that experience. Maybe I'll charge her 😆
great video sir , you explained very well, may you reach 100k soon
First time coming across this channel and I'm surprised it isn't bigger. Great explanation and video, hope you grow fast.
Thanks Arima!! We're growing, just takes time :D
Cool tutorial! Thank you very much! From Kazakhstan with love!
Thanks surfer!! Glad you enjoyed it! Lots of love right back at you from Canada :)
Great tutorial, i got how the front-end library worked from stripe's docs but i couldn't figure out the backend. It was easier than i thought, thanks. I managed my checkout by simply getting the paymentMethod object into my api so that i could look up the database for the user cart, get the total and charge the total directly from the backend, not a fan of having the amount sent from the client because i feel like it's not that safe and something i would never do, the less i trust the information from the client the better it is, unless obviously, it's signed or hashed for backend verification.
Hey Riva! What about a donation or something like that where it the amount is user entered? If it were a store, I would probably not be sending dollar amounts anyway, but some reference to a shopping card which contains products and quantities, where the amount is calculated based on the cart contents.
@@leighhalliday That would make sense, if you suppose the amount to be paid is a choice made by the user then it becomes a normal input, what i was saying is, in a real scenario where you have a ecommerce website or something based on listing->products->prices it's not the best idea to recive the amout of the cart from the client, it should always be read server-side, pretty much that!
Excellent tutorial. Straight to the point. One thing I would personally change is simply not use Next.js as it doesn't really have any purpose for this, and some viewers would skip the video as soon as they hear that you're using Next.js, not wanting to deal with it simply because they don't know what it's about. Anyway, excellent tutorial, once again!
Hey kcrckyboy! Thanks :) The reason I used Next.js is because I love it haha! Plus, to process a Stripe charge you need both a frontend and a backend... so I could either do it in 2 separate apps, or I could do it all within a single Next.js app.
you are right
people will prefer react because most of the people dont really know nextjs.
they will think they have to learn nextjs in order to follow your tutorial.
excelent anyway
Awesome tutorial man ! I was struggling for the past 3 hours to make it work, I can now finish my project :)
Nice! I hope you are able to charge many credit cards!
Love your videos always so useful
nice! dude, your eyebrows are flying!
Thanks for the video, was getting caught up on the structure of the API but this helped a ton
I hope you're able to charge many many credit cards!
Hey man literally deserve more view and likes
Thank you Saad! Soon :) I just have to continue producing content that people enjoy!
@@leighhalliday all the very best ...! leigh
Excellent tutorial ... very well explained everything ... I had an implementation with the previous library ... that did not work at all well ... with this I have solved my problem ... greetings from México...
Nice! Thank you :D Greetings from Toronto!!
Amazing tutorial with thorough and detailed explanation. Is it possible to use create-react-app instead of next.js in your tutorial?
So far, so good man! Ty for doin this.
Pleasure is mine, thanks for watching!
@@leighhalliday is axios the server you used? How did you run as a backend server?
thanks a lot
this gave me a great start
Excellent walk through. Thank you!
Thanks Taylor! Glad you enjoyed it :)
Thank you sir!! Your content is helping me out so much :) Greetings from Germany!
Niiice! Greetings from Canada :) Thanks for saying hi!
you are a life saver.... thanks for this vedio on stripe
Happy to be of service :)
Excellent, thanks a lot. Pretty straight forward
Thanks for saying hi, Alex! Yea, not so bad eh?
Pure gold 🪙
Thank you Riley!
I learnt a lot from your channel, thank you.
Awesome :D Thanks so much Tato!!
exactly what I wanted, Thank you alottt :D
Nice! You're very welcome!
@@leighhalliday i had a challenge to solve, and it required stripe integration :D. it was my first time doing it and you helped me. I received a job offer few days after that and really happy about it and thank you alot again
Thank you very much for this amazing tutorial ! I was just wandering if you could make some kind of tutorial on Stripe Connect (for instance if we do not want the money to go to a single institution but users paying between themselves) ?
Thanks Leigh :D
You're very welcome, Abderraouf!!
Those empanadas look delicious!
Quiero empanadas!!!
The empanadas made me subscribe, oh yeah the good content too!
Haha... excellent! Thanks Robert :)
thank you so much for this video, so good.
Thanks for saying hi, Gerson! Glad you enjoyed the vid!
Ppl who make stuff like this shouldn't pay taxes. You already contributed enough to society thanks man. Have you used the premade checkout element provided by stripe itself? Is it even easier than this method?
Haha... I'll tell the CRA (canada revenue agency) that I didn't pay my taxes because Carlos said it was ok. Hmm... not entirely sure what the premade checkout element is... isn't that what this is?
Thank you very much!
You're very welcome, Okan! Glad you enjoyed it :)
This was really great and made it pretty straightforward to get a payment form going. My question is, do you have any recommendations for integrating the PaymentRequestButtonElement for Apple Pay into this setup? Getting the element to show up is easy enough, but what to do with the payment Request afterwards in the setup where we have our API for the payment intent has me stumped a bit.
Sorry Joshua, this isn't something I've done before... don't have knowledge about it.
Awesome.. Love from India
Nice! It's cool to have people from all over the world watching these vids!
Thank you very much sir
Much love from Canada
Very good tutorial, do you have or know one for payment subscription as well?
Hey Hassan, thank you! No sorry, I haven't seen/done one yet on subscriptions.
great tutorial thanks you
Thank you Denshou!
thank you sir
Happy to help, Sean! Thanks for saying hi.
stripe terminal js sdk tutorial requested**
Hey Mike! I think that's a little too specialized for me right now... unless I had an actual use-case, it's probably not the sort of tech I'd dive into.
Nice Work =)
Thanks, David! Glad you liked it :)
Thanks for the wonderful explanation :) but there is one question at 2:15 you told that stripe publishable key should not be on environmental variables like you directly used it but what about us , where we will passing publishable key to get it into react component any help would be greatly appreciated
Hey Amit! Stripe always has 2 keys... the public key, and the secret key. Publish key can be exposed in the client (react), and secret should only ever be on the server. For both keys, it's ideal to avoid committing them into your repository, but instead storing them in environment variables. Next.js just revamped how they do env variables.. check that out here: nextjs.org/docs/basic-features/environment-variables
@@leighhalliday ok I will try to do it in react only and will check .env file explanation in more detail thanks 🥰
Thanks
You're welcome, Harry!
hey, great turtorial. I see you are using next.js pages/api folder to load backend. Do you know how load backend to gatsby.js?
Hey Marek! I don't believe gatsby has any form of runtime server side code... you'd probably want to take a look into hosting serverless functions somewhere to execute your backend code... if deploying to Netlify, they have: docs.netlify.com/functions/overview/
@@leighhalliday that's what i thought. I didn't try with serverless functions though, thank you :)
hello Leigh, your videos are amazing! thank you very much. Do you have any tutorial about "Enable other businesses to accept payments directly" cause I have created an app like Amazon. But I really don't know how to use Stripe with this. My app was created with Symfony5/ApiPlatform/Reactjs. Thanks for you help!
Thank you Jenn!! Sorry, this is actually my only video on Stripe... I should do more in the future!!
@@leighhalliday ok thank you for your answer.
CardElement isn't working for me :( I wrap it up in Elements with promise. It loads but the style shows the width of 1px and 19px for height...no idea where it's wrong.
nevermind. It just doesn't accept styled.div elements probably. I removed that and now it does work.
Nice! Glad you were able to figure that out... I don't think I would have guessed that!
handleSubmitCapture takes care of prevent default
ooo nice!
I'm just kinda confused as to where everything should go. As per the docs, it seems like they're creating payments right in React which I would assume is a bad idea because your build will have a secret key in it. I've seen others do a separate Express/CRA setup and others do SSR with Next.js. Can you clarify and please cite the docs if you can?
Hey Malik! Stripe always has 2 parts: Client side + Server side. On the client side it sends the credit card data to Stripe and they return with a token. On the server side is where you can actually charge money to that token... so you could do the server side part either in a separate express app, or within an API route / page within Next.js since that runs entirely on the server. I wouldn't think about SSR which is all about rendering react server side, but more about the API routes which is what we did in this video.
@@leighhalliday Hey Leigh, can you do a fullstack tutorial on concurrency. I've seen multiple resources on Redis or Websockets but the use cases have been really limited to user chat rooms.
If there are users A and B and A is viewing a detail page while B deletes it, how should your frontend handle that stale page on every client that accesses it. If multiple users edit a resource in close succession how should that be resolved? I'd really appreciate the explanation, especially with deeply relational data.
Could you make a tutorial with Stripe 3D Secure?
Not immediately, but I'll add it to my list :)
If I want to add custom fields like the customer's name and email, will need to change some code in the back-end?
Hey Andrei! Yes, you'll need to send both the stripe token plus any additional data you want to store to the backend.
what if we want to save customers credentials so he can use them later on and pay without refilling the form again? does this mean that he must have a unique publishable key and if thats the case, how can we produce it?
I think if you want to do this you would create a "customer" in Slack... but it's a bit more involved because you would need to store it in a database, and associate it to a user, meaning you'd need authentication too.
@@leighhalliday yeah i use react native expo and firebase as aunthetication, my question is, what i need to store in database in order to make payments without refilling forms? do i need a unique token or every credential? and one last thing, what should i change in the form in order to run the programm for android emulators
thats awesome
can i do the same with react native ?
Hey Mohammed! I'm sure stripe has a package specific to React Native, but I haven't used it yet... go take a look!
Hey bro, can you do stripe with react-js and django tutorial ?
Hey!! I'd love to, but I've never used Django before :D
@@leighhalliday No problem !
how do we pass customer information in the api ?
Hey Ebizzill! I'm not sure to be honest... you'd have to dig into the docs.
hey how is the charge.js connected to main file mine is not working pllzz help
This is an API route in Next.js... you'd connect to it via an HTTP request. More details here: nextjs.org/docs/api-routes/introduction
@@leighhalliday hey that is solved but got
400 badrequest after clicking on pay
plzzzzzzzz help
Can these same steps be used for Node.js in the back end?
The backend I used here was node.js :)
Hi Leigh, if possible, would you mind doing a video shot on deploying a stripe + nextjs app (eg: donation page) host on AWS? I am sorry to ask, but if possible, I really wish to learn that part. If not worth, just ignore me. Thank you. BTW, I am your big fan, I watched every single episode. I really love your videos. Great stuff.
Hey Damon! Sorry, being honest I probably won't tackle how to deploy a nextjs app to AWS... I find AWS the most confusing stuff in the world... am I going straight EC2, am I going on a lightsail server... having to worry about hosting an app is one of my least favourite things of being a developer, which is why I love services like Vercel, Heroku, etc...
@@leighhalliday no problem Leigh, and thank you for making these great videos I learnt something new from your videos. Thank you
getting 404 error in axios.post("/api/charge")..... help ?
Hey! Double check the naming on the api route file located at `pages/api/charge.js`?
@@leighhalliday This is my working directory,
frontend---->src--->components----->api--------------------->charge.js
Hi Leigh, hate to be picky, but as far as I can see there is no 3D authentication here? Would that be something you would consider covering in the future please? I've been struggling with this for 4 days now and I'm just trying to create a variable amount donation page for a charity im doing front-end web development work for :( Otherwise great video
Hey! Ah interesting... I've never worked with this before actually. Didn't realize it was regulation in the EU. stripe.com/docs/payments/3d-secure
I'll keep it in mind... but I'm not sure when I'll get around to it. I'll do my best!
@@leighhalliday Thank you so much! Banging my head against a wall, I'm much more comfortable with react and node js, but can only find solutions in other languages and just losing hope to be honest. I know you can do it with the Stripe Checkout (it comes with that) but Im struggling with implementing that either. Really bummed out. Whenever u get a chance it would be massively appreciated
Getting error !!!!
Failed to load resource: the server responded with a status of 404 (not found)
Error: request failed with status code 404
At createError
At settle
At XMLHttpRequest.handleLoad
I have created src in which I have created 2 files charge.js and payment.js?
Please please suggest solution for this!
Hey Haya! Sorry... from the info above I am not actually sure what the problem is!
In the amount we need to convert? amount * 100 ??? to do the exactly amount?
Often to avoid floating point math errors, financial services deal with the lowest common denominator, which in this case is cents. So instead of passing $1, you pass 100 cents.
Hey Leigh,
I seem to be running into 404 error with the axios URL path (I've using direct path such as localhost, just putting /charge but does not work at all). I'm not sure what I need to exactly do to fix it. I pasted my GitHub link to the code below.
github.com/adamdevelops/TrendyChic/blob/master/src/components/PriceArea.js
github.com/adamdevelops/TrendyChic/tree/master/src/pages/api
Hey SoFreshBlaze! The path may be `/api/charge` since it's in the API folder.
@@leighhalliday that didn't seem to work even removing API portion in the link. Im not if this affects it but Ive intially built this in React/Redux and installed Express/Next JS/stripe to setup the API