Stripe has a variety of solutions that makes it super powerful as a payment provider. We're taking advantage of their Stripe Checkout product because it allows us to get started with an online store without having to manually accept payments.
To do this though, Stripe Checkout relies on the browser to make API requests, which we have to configure to work for our website.
We will set our eCommerce site domain on Stripe's CLIENT-ONLY integration to set us up to add the checkout workflow for our site.
Instructor: [0:00] We're going to start off with our Space Jelly Shop deployed to Vercel. When we begin to accept payments for our site, we're going to use Stripe Checkout. Because this integration is client-side, we're going to need to make a few configurations in our Stripe account to make it work.
[0:11] Once we're logged in and inside of our stripe.com Dashboard, we're going to navigate over to the Settings in the left-side bar. Under the Payment sections, we're going to select Checkout settings. Once there, we want to scroll to the bottom, where we see the information about client-only integration.
[0:25] Here, we want to click the button that says Enable Client-only integration. Once you get done reading through this modal, we can click Allow. Once our client-only integration is enabled, we're going to see a new field that says Domains. If we go back to our Vercel deployed Space Jelly Shop, we can see that our domain is going to be myecomstore.vercel.app.
[0:43] Inside this field, I'm going to paste in my URL, and I'm going to click Save. What that will do is set our domain as a valid URL. That way, we can run our client-side code on it. Otherwise, for security purposes, Stripe won't allow an integration on another domain.
[0:57] To recap, in order to allow Stripe Checkout to work client-side on our domain, we took myecomstore.vercel.app and we added it as a domain inside of our client-only integration, which we previously enabled, which will allow us to use Stripe Checkout for our site.