Skip to content
πŸ›’ A starter storefront with Gatsby, Stripe, Netlify Functions.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Add more product images Apr 15, 2019
.env.development.sample Redo environment variables again Apr 13, 2019
.env.production.sample Redo environment variables again Apr 13, 2019
.eslintrc.json Initial commit Feb 22, 2019
.gitignore Ignore netlify state Apr 15, 2019
LICENSE Initial commit Feb 22, 2019 Update readme Apr 15, 2019
gatsby-browser.js Initial commit Feb 22, 2019
gatsby-config.js Clean up Apr 13, 2019
gatsby-node.js Clean up Apr 13, 2019
gatsby-ssr.js Initial commit Feb 22, 2019
package.json Update gatsby-source-stripe Apr 13, 2019
webpack.production.js Redo environment variables again Apr 13, 2019
yarn.lock Initial commit Feb 22, 2019


A minimal starter to create a storefront with Gatsby, Stripe, & Netlify Functions. This starter focuses on handling Stripe integration, and letting you handle the rest however you'd like.


  • Statically generate based on Stripe inventory
  • Dynamically update with live inventory & availability data
  • Checkout powered by Stripe
  • Serverless functions interact with Stripe API
  • Shopping cart persists in local storage
  • Responsive images with gatsby-image

The ProductsProvider component provides normalized Product and Sku data sourced from Gatsby's GraphQL store and the live Stripe API, while the CartProvider manages the cart, its persistence in local storage, and checkout.

Getting Started

  1. Create a site with Gatsby

    gatsby new <project-name>
  2. Configure API keys

    Rename .env.development.sample to .env.development and fill with your Stripe API test keys. Do the same for .env.production and your live API keys. Don't commit these files to a public repo!

  3. Start development servers

    There are two development servers for this project:

    1. gatsby serve for our Gatsby site
    2. netlify-lambda serve functions for our Netlify Functions

    You will probably want to start both at once:

    npm run start

    Your site is accessible at http://localhost:8000 and your Netlify Functions are accessible at http://localhost:8000/.netlify/.

    Note: try deleting the cache (rm -rf .cache) if Gatsby's dev server fails to start.

  4. Start developing

    This starter aims to handle some of the plumbing needed to integrate Gatsby & Stripe. Everything else (ex. styling) is left to you and your preferred methods.

    The source files for Netlify Functions are located at /src/functions, they are then built into the files in /functions. Visit the documentation for more information on their structure.

    The ProductsProvider & CartProvider components centralize data & logic, which are then passed through React's Context API. The starter's components are written using Hooks.

  5. Deploy to Netlify

    If you want to deploy somewhere other than Netlify, you'll have to find another place to deploy the serverless functions in /functions, ex. AWS Lambda.


Issues and pull requests welcome!


Thanks @njosefbeck for authoring and maintaining gatsby-source-stripe, which makes this starter possible!

You can’t perform that action at this time.