Skip to content

Commit

Permalink
Changes/gatsby e commerce tutorial (#21375)
Browse files Browse the repository at this point in the history
* Delete .eslint

* Remove extra table of contents and fix headings in E-commerce Tutorial

* Remove extra table of contents and fix headings in E-commerce Tutorial

Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>
  • Loading branch information
bball07 and GatsbyJS Bot authored Feb 11, 2020
1 parent d2fa8f7 commit c2fe59f
Showing 1 changed file with 2 additions and 18 deletions.
20 changes: 2 additions & 18 deletions docs/tutorial/ecommerce-tutorial/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand All @@ -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:

Expand Down Expand Up @@ -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.

0 comments on commit c2fe59f

Please sign in to comment.