CJ Avilla

Accept an Apple Pay payment with Stripe.js

Learn the front end steps for accepting a payment with Apple Pay from your customers using a custom form in HTML and JavaScript. You'll learn how to use the payment request button 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

### Table of contents

00:00 Introduction
00:45 Verify server endpoints
01:58 Add Apple Pay button container to HTML
02:48 Create the PaymentRequest object
03:53 Create the PaymentRequestButton element
04:23 Check if we can make payment
05:47 Listen for the paymentmethod event
07:46 Review requirements for testing Apple Pay
08:39 Setup a ngrok tunnel
09:36 Register an Apple Pay domain
11:20 Create a PaymentIntent on the server
11:57 Confirm the PaymentIntent
15:10 Test Apple Pay
16:00 Recap

### Presenter

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

### Resources

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/html/apple-pay.js
ngrok: https://ngrok.com/

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