Due to PCI compliance requirements, the Stripe.js library has to be loaded from Stripe’s servers. Stripe provides a JavaScript library that allows you to securely redirect your customer to the Stripe hosted checkout page. Open up your browser to and you should see a default homepage. Run gatsby develop in the terminal, which starts a development server and reloads changes you make to your site so you can preview them in the browser. Setting up a Gatsby siteĬreate a new Gatsby project by running the gatsby new command in the terminal and change directories into the new project you just started: See your site hot reload in the browser! If you want your Gatsby site to automatically update, you can use the Stripe webhook event to trigger a redeploy when a new product or price is added. If you’re selling multiple products, you can use the Stripe source plugin to retrieve all prices at build time. If you’re selling a single product or subscription (like an eBook) you can hardcode the product’s price ID in your Gatsby site. You can configure products, prices, and subscription plans in the Stripe Dashboard. Stripe offers a hosted checkout that doesn’t require any backend component.

To try out Stripe for yourself, go to Stripe’s Quick Start Guide. Stripe is a payment processing service that allows you to securely collect and process payment information from your customers. Stripe account: register for an account here.Since this is a more advanced tutorial, building a site with Gatsby before will likely make this tutorial less time-consuming ( see the main tutorial here).Cost-efficient hosting of static sites.No server component required with Stripe’s client-only Checkout.Blazing fast performance when your pages are converted from React into static files.In this advanced tutorial, you’ll learn how to use Gatsby to build the UI for a basic e-commerce site that can accept payments, with Stripe as the backend for processing payments.īenefits of using Gatsby for e-commerce sites include the following:

Stripe ui browser