Accept a card payment with Stripe.js

Learn the front end steps for accepting a payment with a card from your customers using a custom form. You'll see 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?

iOS - https://youtu.be/8sXgvDWVsuI
Android - https://youtu.be/fhgqeeQczOc
React - https://youtu.be/IhvtIbfDZJI

### Presenter

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

### Resources

Stripe.js: https://stripe.com/docs/js
Official documentation: https://stripe.com/docs/payments/accept-a-payment
Code: https://github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/html/card.js

### Table of contents

00:00 Overview
00:39 Confirm server is creating PaymentIntents
01:00 Create a payment form with HTML
02:12 Create card.js and start JavaScript implementation
02:44 Setup Stripe.js, create and mount a card element
03:23 Make a request to the server to create a PaymentIntent
04:36 Confirm the PaymentIntent with confirmCardPayment
05:54 Test payment
06:39 Add error handling
07:29 Load publishable key from server with /config

### 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