Accept a card payment with React Stripe.js

Learn the front end steps for accepting a payment with a card from your customers using a custom form in a React application. You'll learn how to use the CardElement component and how to use the confirmCardPayment method from Stripe.js to securely confirm a PaymentIntent client-side. This method handles 3D Secure and Secure Customer Authentication (SCA).

Watch one of these episodes to learn the server side steps required to create a PaymentIntent using the Stripe API with one of the officially supported client libraries:

Ruby - https://youtu.be/079khYtqWPo
Python - https://youtu.be/Tgjwx-38Dic
Node.js - https://youtu.be/WG4ehXSEpz4
Go - https://youtu.be/cbsCxLDL4EY
Java - https://youtu.be/-uyXCnPXegE
.NET - https://youtu.be/mqEjRgoZWdo
PHP - https://youtu.be/BPfpPGl85tk

Want to see how to implement with a different client?

HTML and JavaScript - https://youtu.be/0oHjwz-WHcc
iOS - https://youtu.be/8sXgvDWVsuI
Android - https://youtu.be/fhgqeeQczOc

### Presenter

CJ Avilla - Developer Advocate at Stripe - https://twitter.com/cjav_dev

### Resources

Getting started with React Stripe.js: https://www.youtube.com/watch?v=5y5WwF9s-ZI
Stripe.js documentation: https://stripe.com/docs/js
Accept a payment documentation: https://stripe.com/docs/payments/accept-a-payment
Code: https://github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/react-cra/src/Card.js

### Table of contents

00:45 Confirm the server is working as expected
02:00 Add a new payment form
03:52 Add the CardElement component
05:57 Add useElements and useStripe hooks
06:36 Create PaymentIntent on the server
08:07 Add StatusMessages helper component
09:48 Confirm with confirmCardPayment
12:21 View successful payment in the dashboard
13:00 Test 3D Secure and Secure Customer Authentication card
14:12 Add error handling
15:40 Review

### Support
If you have a question, please feel free to reach out to our support team on Discord at https://stripe.com/go/developer-chat.

### Updates
Sign up to stay updated with developer news: https://go.stripe.global/dev-digest

### Feedback
If you have any feedback about this or other episodes, let us know: https://forms.gle/VjNqzRhotM2snYo88.
#Stripe #Payments