Stripe Checkout with React Crash Course

Рет қаралды 42,341

Күн бұрын

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:
➡ Part 1: designcode.io/advanced-react-...
➡ Part 2: designcode.io/advanced-react-...
➡ Part 3: designcode.io/advanced-react-...
View the code sandboxes:
➡ Starter project: codesandbox.io/s/stripe-check...
➡ Final project: codesandbox.io/s/stripe-check...
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
Adding Stripe.js to React
6:22 - Stripe.js library
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

Пікірлер: 37

@CH3THIN 2 жыл бұрын

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

@antattackBAM 2 жыл бұрын

Truth! Time just flies by when you're having fun :)

@robertolsen7646 2 жыл бұрын

Thankyou I have been struggling for 3days with integrating stripe in my app. You have helped so much!!!

@buddhamagictv Жыл бұрын

I have never seen anybody use such a similar workflow and method of coding as myself. Wonderful tutorial, and easy for me to understand, because the tutor works in the same way i do. Stripe also connects very well with Woo Commerce and Ecwid.

@tonyhawk94 2 жыл бұрын

Straight to the point, that's perfect thanks !

@LevementeLivre 2 жыл бұрын

Thank you very much! Great tutorial!

@jbelkii Жыл бұрын

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

@aidapira- 2 жыл бұрын

Thanks so much for this tutorial.

@DesignCodeTeam 2 жыл бұрын

Any time!

@orianodev-fan Жыл бұрын

Thank you so much, it's been 5H of deadly trying before turning into your video 💔💔

@serispeaks Жыл бұрын

Thank you, it worked perfectly. As described! But how do we deliver content after payment and how to handle failed payments?

@malikforz9490 2 жыл бұрын

thanks for the great video but can you please tell me how to add shipping adress ..... and also apple pay doesnt show for me

@pruthviraju7644 2 жыл бұрын

One question is if I want to send the payment details to backend on click of "pay" button. Will it be possible?

@birolaygun1515 Жыл бұрын

Thank you very much. 🙏

@RobertThomasrob_thomasa10 2 жыл бұрын

Great video!

@DesignCodeTeam 2 жыл бұрын

Glad you enjoyed it

@davidhernandez9275 2 жыл бұрын

Thank you!

@andrejkling3886 2 жыл бұрын

Excellent ... thank you

@DesignCodeTeam 2 жыл бұрын

Our pleasure!

@ahmadjaber2940 Жыл бұрын

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

@kimbapslayer1995 Жыл бұрын

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.

@ranuchaubey90 2 жыл бұрын

I have implemented stripe in my project, I'm getting incomplete status in stripe payment dashboard, what should I do

@alifarooq5718 2 жыл бұрын

I am using the default stripe checkout form ... i want active second Bank Payment on modal load instead of first tabs Card Payment .. how to do it??

@luckyrawat2573 2 жыл бұрын

thank you really helpful

@DesignCodeTeam 2 жыл бұрын

You're welcome!

@danieledutto9283 2 жыл бұрын

do you also cover the webhook argoument? cause i'm having some trouble and asking how to fix it! BTW very nice video, thank you so much!

@worldclasscode1847 2 жыл бұрын

Hey Daniele, I cover webhook in my Nike Clone tutorial. It's on the Ms. Cloner youtube channel.

@inzamam1320 2 жыл бұрын

Will you help me Actually my CardElement is showing only after i refresh the page

@billykiwee 2 жыл бұрын

Why all of that whrn a with the payment link di the same...

@ABUTAHER-wg7gz Жыл бұрын

hello, i want to update in mongod payment information after checkout stripe payment comfirmed in react

@saduninimasha4975 Жыл бұрын

Can i know how to change price? . In time to time change the customer payment amount. So how to change this amount. Because every payment shows same amount

@jafarfahim Жыл бұрын

thanks dear

@exodion4173 2 жыл бұрын

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?

@DesignCodeTeam 2 жыл бұрын

Note that when the user gets to the success page, the charge already went through. You could add the checkout id in the query url as a ref and fetch the checkout details via Stripe API. To add data to Firebase, use Stripe webhook to call to your backend server, it's safer and will be called once only. Hope this helps.