A free e-commerce solution based on the Jamstack
Use Stripe's test card to complete checkout (4242 4242 4242 4242).
- FaunaDB (to keep track of inventory)
- SendGrid (to send email confirmations to customers)
- Cloudinary (optional, you could simply use the static folder)
Also, this is based on the sapper-template.
How to use this?
Afther you clone and run this locally, you'll need to create a
.env file containing the following values:
STRIPE_PUBLISHABLE_KEY=<your-secrets> STRIPE_SECRET_KEY=<your-secrets> STRIPE_WEBHOOK_SECRET=<your-secrets> SENDGRID_API_KEY=<your-secrets>
Setup the Stripe Webhook
You'll need to send the checkout.session.completed webhook to
Use the Stripe-cli to test webhooks locally.
Stripe doc on webhooks
If you want to make use of a database
You'll need to follow faunaDB official documentation to hook it up with Netlify.
Create a new database, a new collection (mine is called "paintings"), documents in the collection and a new index (mine is called "all").
You'll also need to update the
src/stores.js file so that the
products array matches your databases entries. You could remove the
products array and load everything from the DB, but there is a performance trade-off for that.
Also, look for the
// * MARK ITEMS AS SOLD HERE 🚨 comment and uncomment that code.
If you don't need a database
You can remove
functions/get-products.js entirely and the
loadProducts() funcion in
src/routes/index.svelte. Also, update the
products array in
src/stores.js so that the
"sold" property of products is set to
false rather than "loading".
Running on localhost
The easiest way to run this on localhost is with the netlify-cli.
npm install netlify-cli -g
cd into your project folder and run