Stripe Checkout with React Crash Course

Stripe is a widely popular and commonly used payment gateway for online businesses. It is packed with tons of services and features so you can focus more on your business. I've been using Stripe and I'll explain why I came to love it. Stripe checkout is a checkout page securely hosted by Stripe. We will go through the steps on how to create a checkout session in React without the need to call a backend server.

Access the written version of this tutorial:

View the code sandboxes:

Creating Stripe account and product
0:00 - Introduction
2:11 - Account Set Up
3:31 - Create Product
4:32 - Create Price
5:57 - Account Naming

9:41 - Defer Stripe Loading
10:59 - Import as a side effect

Stripe Checkout Client Only
11:57 - Checkout Item
12:48 - Checkout Options
14:38 - Redirect to Checkout
17:58 - Rerouting After Checkout
22:33 - Testing Payment
23:46 - Error Handling
26:03 - Checkout Button State
28:44 - Conclusion

#reactjs #webdev #javascript #stripe #checkout

[CHTHIN]

I love how a part of this video was made at 4am. True devs over here

[jbelkii]

Great tutorial, thanks very much. But, how do we deliver content ONLY after successful payment and how to handle unsuccessful payments?

[kimbapslayer]

Can you make a video covering how to fetch products from an API, and create a checkout method with items added to a local state cart? I would like to build a stripe checkout process with similar ease of effort, from say a Content Management System and let stripe handle the details.

[tonyhawk]

Straight to the point, that's perfect thanks !

[billykiwee]

Why all of that whrn a <a href=> with the payment link di the same...

[exodion]

Thankyou for the guide.
I have 1 question: Im making a food order app, where when the user clicks place order button -> they pay via stripe checkout -> now on the success page I want to add this order (along with total money to charge) to my firebase DB. How can I do this?

[ahmadjaber]

Is using both return value from stripe and updating my backend + using webhooks as a redundant a good solution?

[worldclasscode]

Great tutorial. Easy to listen to. But why don't you use webhooks? :) Just want to say congrats :)

[annarj]

It didn't work with localhost:3000 :(