- 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.
Create a site with Gatsby
gatsby new <project-name> https://github.com/brxck/gatsby-starter-stripe
Configure API keys
.env.developmentand fill with your Stripe API test keys. Do the same for
.env.productionand your live API keys. Don't commit these files to a public repo!
Start development servers
There are two development servers for this project:
gatsby servefor our Gatsby site
netlify-lambda serve functionsfor our Netlify Functions
You will probably want to start both at once:
npm run start
Your site is accessible at
http://localhost:8000and your Netlify Functions are accessible at
Note: try deleting the cache (
rm -rf .cache) if Gatsby's dev server fails to start.
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.
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!