CJ Avilla

Accept an Afterpay / Clearpay payment with React

In this episode, you'll learn how to confirm an Afterpay / Clearpay payment with a React client. Afterpay / Clearpay is a payment method available through Stripe that enables your customers to buy now and pay later.

### Table of contents

00:00 Introduction
01:25 Verify server endpoints
02:48 Build the AfterpayClearpay component
06:00 Handle submission of the form
06:18 Create a payment intent
07:44 Confirm the payment intent
09:08 Test the demo
09:30 Implement the thank you page
12:29 Test the demo again
13:11 Recap

### Server implementations

Ruby - https://www.youtube.com/watch?v=079khYtqWPo&list=PLy1nL-pvL2M50RmP6ie-gdcSnfOuQCRYk&index=12
Python - https://www.youtube.com/watch?v=Tgjwx-38Dic&list=PLy1nL-pvL2M55YVn0mGoQ5r-39A1-ZypO&index=11
PHP - https://www.youtube.com/watch?v=BPfpPGl85tk
Node.js - https://www.youtube.com/watch?v=WG4ehXSEpz4&list=PLy1nL-pvL2M5xNIuNapwmABwEy2uifAlY&index=11
Java - https://www.youtube.com/watch?v=-uyXCnPXegE&list=PLy1nL-pvL2M5TnSGVjEHTTMgdnnHi-KPg&index=11
Go - https://www.youtube.com/watch?v=cbsCxLDL4EY&list=PLy1nL-pvL2M5eqpSBR9KL7K0lcnWo0V0a&index=12
.NET - https://www.youtube.com/watch?v=mqEjRgoZWdo&list=PLy1nL-pvL2M4cNNoUtjWevYSci4ubsbhC&index=11


### Other client implementations

Not using React? Consider these other episodes that cover the same content in different front end implementations:

HTML and JavaScript - https://youtu.be/p1qv9o63uPQ

### Presenter

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

### Resources

Official client library: https://github.com/stripe/react-stripe-js
Official documentation: https://stripe.com/docs/payments/afterpay-clearpay/accept-a-payment
Code: https://github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/react-cra/src/AfterpayClearpay.js

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