A minimal e-commerce store using Gatsby, SANITY, Stripe, Use-Shopping-Cart and Netlify
MIT License
Like a supermarket but for Stripe.
No ongoing monthly costs. Perfect for artists, creators and independent builders doing the side hustle shuffle!
This is a basic and minimalist e-commerce storefront built with Gatsby, SANITY, Stripe, Use-Shopping-Cart, and Netlify.
The main features are:
Some nice-to-haves:
The benefits of using this set of technologies together is that there are no ongoing monthly costs - you only pay the Stripe processing fees when you actually sell something.
A few words of caution. If you have an active and ongoing business you should probably not use this starter!
I chose this tech stack because it is one I know really well, and am confident in.
/web
/studio
To use this starter properly you will need the Gatsby CLI, the SANITY CLI, the Netlify CLI and the Stripe CLI.
You will need to create or already have a Stripe account, a SANITY account, and a Netlify account.
I assume you are somewhat familiar with Jamstack/modern frontend web development in this getting started guide. Having said that, please don't hesistate to reach out if you have a question or a step is too vague.
yarn install
or npm install
in the /web
and /studio
folders. The web folder is your Gatsby frontend. The studio folder is your SANITY backend..env.development
and a .env.production
following the format in .example.env
. We will add the information we need in a bit./studio
run sanity init
to initialize a new database for the store. You can use the default options.sanity manage
to open your project's management console, then go to Settings > API > Tokens, and use the Add new token button to open the token creation dialog. You need a token with read + write privileges. Copy and paste this into your .env
files. While you are here add http://localhost:8888
to your CORS origins with credentials.projectId
and dataset
which can be found in /studio/sanity.json
. Copy and paste these into your .env
files.cd data sanity dataset import production.tar.gz
.sanity graphql deploy
inside of the /studio
directory.sk_test_...
and pk_test_...
. You can read more about Stripe Api Keys. Copy and paste these into your .env
files as well.netlify dev
to start the Netlify development server (which will also compile Gatsby). If you have done everything right you should see your glorious new store on http://localhost:8888
!checkout.session.completed
). The Stripe CLI lets you setup a test webhook listener with the command stripe listen --forward-to localhost:8888/.netlify/functions/handle-purchase
. After running this command it will tell you what your webhook secret is, something like whsec_...
. Add this to the .env
files. Now when there is a successful purchase this serverless function will update the stock on the SANITY backend.ππCongrats! You now have a basic e-commerce store up and running using the latest and greatest in Jamstack tech! Deploy that greatness!
handle-purchase
function.env
variables correctly in NetlifyThe main cart validation is handled on the backend by Stripe. All payments are handled securely by Stripe. If the product price passed from the frontend to Stripe and the price listed in the backend with SANITY do not match then the transaction will not be approved. There are some other basic checks that also happen before a purchase is completed, e.g. is there enough stock, is the shipping calculated correctly, is shipping actually enabled.
I have also included some basic validation on the frontend, e.g. if you select a stock of "-5" if will show an error. It also checks the stock number against the quantity selected, try selecting a quantity above the current listed stock and you will also see an error.
Most of this happens in web/netlify/functions/handle-checkout.ts
and web/netlify/functions/handle-purchase.ts
which are Netlify serverless functions.
The following store settings area available in Site Settings > Store Settings. These allow for configuration of some Stripe settings. If you want to manually update the Stripe checkout settings see the file in web/netlify/functions/handle-checkout.ts
.
USD
or CAD
. See https://stripe.com/docs/currencies for details.Shipping is optional and can be toggled off in the store settings, see above.
There are three different types of shipping available, all of them are optional. Local pickup, Standard shipping, and Free shipping. Each can be toggled on and off if you don't want to offer a local pickup option for example.
Local shipping and free shipping are pretty straightforward. Note the cutoff amount for the free shipping can be set to whatever value you want.
Standard shipping is calculated using a formula. You set a shipping percentage, a minimum amount, and a maximum amount. This is then used to calculate the shipping presented to the customer, and validated again server side.
So for example imagine you set the following values:
If you had a $15.00 item shipping should be calculated as the minimum value of $5.00. If the item was $45.00 the shipping would be calculated using the percentage as $9.00. If the item was $180.00 the maximum shipping amount would be charged of $20.00.
This formula isn't perfect, but it isn't trying to be either π€·. This gives some flexibility in shipping charged with minimal work on your part. If you need perfectly calculated shipping fees your probably need a more formal e-commerce product, see the warning above.
Add ons are optional and can be toggled off in the store settings, see above.
This allows you to add an item that is available for purchase in the checkout cart, for example giftwrap or some kind of other small item a customer may want to add onto their order. These add on items are functionally the same as all other products, but they are not shown in the store, only in the add ons area of the checkout.
Theme-UI is a css-in-js library with a constraints based design system. You can find the main theme file in src/styles/theme.js
. Try changing around some of the colors and you will see how quickly you can customize the look and feel of the site.
Theme-UI is based on Emotion and is very similar to Chakra-UI if you are familiar with that library.
:any
.All contribution is welcome however I have no plans to add major features to this starter other than those mentioned above in the roadmap. Would love some help to improve TS and any a11y improvements!