Flask & Stripe - Open-Source Mini eCommerce
Tags: webdev, flask, stripe, opensource
Published: 2022-10-06 05:56:36

---
title: Flask & Stripe - Open-Source Mini eCommerce
published: true
description: Open-source mini eCommerce project that loads the products from JSON files saved in the templates directory (no database required) - Bootstrap 5 design is used for styling.
tags: webdev, flask, stripe, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98de88aj6bmsnufzv5uo.jpg
canonical_url: https://blog.appseed.us/flask-stripe-open-source-mini-ecommerce/
---
Hello Coders!

This article presents a **Mini eCommerce** project powered by [Flask and Stripe](https://blog.appseed.us/flask-stripe-open-source-mini-ecommerce/). The sources can be found on GitHub and the permissive MIT License allows you to copy/incorporate the code into other projects or simply use it as it is. For newcomers, **Flask** is a leading backend framework actively supported and versioned and Stripe is a popular payments processor. 

> `Thanks for Reading!`

- 👉 [Flask & Stripe eCommerce](https://github.com/app-generator/ecommerce-flask-stripe) - source code
- 👉 [Flask & Stripe eCommerce](https://www.youtube.com/watch?v=JDtigUqW_MM) - yTube presentation
- 🚀 The [support](https://appseed.us/support/) page (just in case)


![Flask & Stripe - Sample product page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zvjtrr8gcz6nf3fz7x2.png) 

--- 

The project has no database, or authentication, and loads the product definitions from separate JSON files using minimal routing logic. Once the product information is loaded the pages are generated on top of a modern [Bootstrap 5](https://www.admin-dashboards.com/bootstrap-5-templates/) design.  

The fastest way to get the project up & running locally is to follow up on this simple set up:

> 👉 **Step #1** - Clone the project from the [public repository](https://github.com/app-generator/sample-flask-stripe):

```bash
$ git clone https://github.com/app-generator/ecommerce-flask-stripe.git
$ cd ecommerce-flask-stripe
```

---

> 👉 **Step #2** - Add STRIPE secrets in `Dockerfile`

```Dockerfile
# Stripe Secrets 
ENV STRIPE_SECRET_KEY      <YOUR_STRIPE_SECRET_KEY>
ENV STRIPE_PUBLISHABLE_KEY <YOUR_STRIPE_PUBLISHABLE_KEY>
```

---

> 👉 **Step #3** - Start the APP in `Docker`

```bash
$ docker-compose up --build 
```

Visit `http://localhost:5085` in your browser. The app should be up & running. 

![Flask & Stripe - HOMEpage (open-source).](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tx7jnyyn5zxspal0oet.png)

---

## ✨ How it Works

The project loads a minimal configuration from the .env file and builds the pages after the templates/products directory is scanned. The products index contains all products plus a featured product presented at top of the page.

The above image is generated from this [simple structure](https://github.com/app-generator/sample-flask-stripe/tree/master/app/templates/products) saved on the disk: 

![Flask & Stripe - Products Definitions on Disk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poes10yenmmcuv30vpyz.png)

The definition for each product is a minimal JSON file. Here is the information that defines the [featured product](https://github.com/app-generator/sample-flask-stripe/blob/master/app/templates/products/featured.json):

```json
{
    "name": "Nike Dynamo Go FlyEase",
    "price": 49,
    "currency": "usd",
    "info": "Baby/Toddler Easy On/Off Shoes",
    "short_description": "A workhorse built to help power ... (truncated)",
    "full_description": "Easy, snug and built for any-time play the Nike Dynamo Go FlyEase ... (truncated)."
}
```

Using this minimal information, the app will generate the top section of the **products** page: 

![Flask & Stripe - Featured Product Section. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xy2qtvrcx8ctt4nvhli.png)

---

## ✨ How to define a new product

[A new product](https://github.com/app-generator/sample-flask-stripe#-create-a-new-product) can be defined in less than 1 minute using the guidelines presented in the README file:

- Navigate to [app/templates/products](https://github.com/app-generator/sample-flask-stripe/tree/master/app/templates/products) directory
- Create a new [JSON](https://github.com/app-generator/sample-flask-stripe/blob/master/app/templates/products/nike-goalkeeper-match.json) file from an existing one
- **Edit the product**: name, price, full description
- Create Media Files: navigate to [app/static/products](https://github.com/app-generator/sample-flask-stripe/tree/master/app/static/products)
- Create a directory using the same name as for `JSON` file
- Create `card.jpg`: 500 x 335 (pixels)
- Create `cover.jpg`: 2100 x 1400 (pixels)

At this point, if we refresh the HOMEpage the new product is ready to be used.

Here is a sample product page generated for [Air ZOOM Pegasus](https://github.com/app-generator/sample-flask-stripe/blob/master/app/templates/products/product-air-zoom-pegasus.json), using assets loaded from [here](https://github.com/app-generator/sample-flask-stripe/blob/master/app/static/products/product-air-zoom-pegasus):

![Flask & Stripe - Generated Product Page (free product)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m01orf1o7b9bwezgxei2.png)

---

## ✨ Video Presentation

All the above points are presented step-by-step in a short video published on yTube. Here is the material transcript:

- ✅ Clone the project
- ✅ Start the app using Docker
- ✅ Access the pages, visualize the products
- ✅ Complete a purchase
- ✅ Cancel a purchase
- ✅ Start the project using a manual build

{% embed https://www.youtube.com/watch?v=JDtigUqW_MM %}

---

> **Thanks for reading!** For more resources and support, please access:

- 👉 More [Free Starters](https://appseed.us/admin-dashboards/open-source/) crafted by AppSeed
- 👉 Ask for [support](https://appseed.us/support/) in case of any issues