What you’ll learn
With React Stripe.js and the Payment Element you can create a custom payment integration on your site that can offer more than 18 global payment methods with a single integration depending on your location and their availability. In this demo you’ll learn how to integrate the Payment Element with your React app, and how to turn on new payment methods via the dashboard without having to change, test or re-deploy your code.
Prerequisites
If you’d like to follow along, you’ll need a Stripe account which you can sign up for here and you can clone the getting started branch of the repo here.
Table of contents
- 00:00 Introduction
- 01:07 Cloning the repo and getting started
- 02:12 npm installs and starting the app
- 03:50 Building out payment.js
- 05:18 Creating a payment intent on the back end
- 06:27 Fetching and saving the client secret
- 07:28 Using the elements provider
- 08:36 Creating the checkout form
What to watch next
You can watch more videos on automatic payment methods here
About the author
Matthew Ling (@mattling_dev) is a Developer Advocate at Stripe. Matt loves to tinker with new technology, adores Ruby and coffee and also moonlighted as a pro music photographer. His photo site is at matthewling.com and developer site is at mattling.dev.
Stay connected
In addition, you can stay up to date with Stripe in a few ways:
📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest