diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 12ee6b7fec175..c87ee48911289 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -2,22 +2,6 @@ title: "Gatsby e-commerce Tutorial" --- -# Table of Contents - -- [Table of Contents](#table-of-contents) -- [Why use Gatsby for an e-commerce site?](#why-use-gatsby-for-an-e-commerce-site) -- [Prerequisites](#prerequisites) - - [How does Gatsby work with Stripe?](#how-does-gatsby-work-with-stripe) -- [Setting up a Gatsby site](#setting-up-a-gatsby-site) -- [Installing the StripeJS plugin](#installing-the-stripejs-plugin) - - [See your site hot reload in the browser!](#see-your-site-hot-reload-in-the-browser) - - [How does the StripeJS plugin work?](#how-does-the-stripejs-plugin-work) - - [Getting your Stripe test keys](#getting-your-stripe-test-keys) -- [Examples](#examples) - - [Easy: One Button](#easy-one-button) - - [Advanced: Import SKUs via source plugin](#advanced-import-skus-via-source-plugin) -- [Testing Payments](#testing-payments) - 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](https://stripe.com) as the backend for processing payments. ## Why use Gatsby for an e-commerce site? @@ -43,7 +27,7 @@ There are alternatives to Stripe, like Square and Braintree, and their setup is Stripe offers a [hosted checkout](https://stripe.com/docs/payments/checkout) that doesn't require any backend component. You can configure products, SKUs, and subscription plans in the [Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure). If you're selling a single product or subscription (like an eBook) you can hardcode the product's SKU ID in your Gatsby site. If you're selling multiple products, you can use the [Stripe source plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/) to retrieve all SKUs at build time. If you want your Gatsby site to automatically update, you can use the Stripe webhook event to [trigger a redeploy](https://www.netlify.com/docs/webhooks/) when a new product or SKU is added. -# Setting up a Gatsby site +## Setting up a Gatsby site Create a new Gatsby project by running the `gatsby new` command in the terminal and change directories into the new project you just started: @@ -553,6 +537,6 @@ export default Skus You can call `redirectToCheckout()` providing an array of SKUs and their quantities to charge for multiple items at the same time. Instead of each "BUY ME" button redirecting to the checkout page, you can therefore provide a central "GO TO CHECKOUT" button that uses the state of a cart component. You can see the necessary changes for this example [on GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example). -# Testing Payments +## Testing Payments In test mode (when using the API key that includes _test_) Stripe provides [test cards](https://stripe.com/docs/testing#cards) for you to test different checkout scenarios.