Flask Stripe Sample - Open-Source, simple eCommerce APP
Tags: webdev, flask, stripe, opensource
Published: 2022-02-05 13:20:14

---
title: Flask Stripe Sample - Open-Source, simple eCommerce APP
published: true
description: A simple eCommerce project built with Flask and Stripe. The source code can be downloaded from Github (MIT License).
tags: webdev, flask, stripe, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxjfmvx5vdqf6jpodxmu.jpg
canonical_url: https://blog.appseed.us/flask-stripe-sample-open-source-code/
---
Hello Coders!

This article presents an open-source codebase that provides simple eCommerce features powered by [Flask and Stripe](https://blog.appseed.us/flask-stripe-sample-open-source-code/). The products are loaded from `JSON` files (no database) and all related pages and cards are generated during the runtime. This codebase can be used to bootstrap fast a minimal eCommerce or simply for eLearning activities that involve **Flask and Stripe**. For newcomers, `Flask` is a popular web framework and `Stripe` is a leading payment gateway widely used in eCommerce projects.

> Thanks for reading! 

- 👉 [Flask Stripe Sample](https://github.com/app-generator/flask-soft-ui-design-stripe) - Source Code
- 🎁 Free [Support](https://appseed.us/support) via email (issues tracker) and [Discord](https://discord.gg/fZC6hup) (1k+ community)

---

## ✨ How it works

Once the Flask source code is downloaded and compiled we need to set up the environment to bind correctly the app with the **Stripe** platform.

The `.env.sample` should be renamed to `.env` and edited to provide valid Stripe Credentials:

- Edit `STRIPE_SECRET_KEY` - provided by Stripe Platform
- Edit `STRIPE_PUBLISHABLE_KEY` - provided by Stripe Platform

The app comes with product samples defined in the templates [directory](https://github.com/app-generator/flask-soft-ui-design-stripe/tree/master/app/templates/products). During the runtime, Flask scans the directory, generates the pages, and publishes all discovered products. Let's take a look at a real sample: **Air Zoom Pegasus**:

---

> [JSON File](https://github.com/app-generator/flask-soft-ui-design-stripe/blob/master/app/templates/products/product-air-zoom-pegasus.json) - saved in the templates directory

```json
{
    "name": "Air ZOOM Pegasus",
    "price": 499,
    "currency": "usd",
    "info": "Men's Road Running Shoes",
    "short_description": "A workhorse built to help power you through every mile of the race.",
    "full_description": "A workhorse built to help power you through every mile of the race, the Nike Air Zoom Pegasus 38 Ekiden continues to put a spring in your step, using the same responsive foam as its predecessor. Mesh in the upper combines the comfort and durability you want with a fit that nods back to the classic Peg."
}
```

---

> **Media Files**: Product card and Cover Image:

![Flask Stripe App - Product Media Files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eulk2ihvw9fy2gj8jhhl.png)
 
---

The app detects all this information and builds the pages as shown in this GIF animated presentation:

---

![Flask Stripe App - Product Sale. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ntjzvb8b9465y8c01gi.gif)

---

To complete the payment, make sure your **Stripe** account runs in the `TEST` mode. For a successful payment a test CC provided by **Stripe** can be used:

- CC Number: `4242 4242 4242 4242`
- Any data for the rest of the fields

---

![Flask Stripe App - Payment Page ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gewylhgtzwmaphq35qwa.png)

--- 

> `Stripe and Flask App` - Payment Confirmation page

---

![Flask Stripe App - Confirmation Page ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knxxs1ai57jk7bbfbwzl.png)

--- 

> **Thanks for reading!** For more resources, feel free to access:

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID