DEV Community

Cover image for Flask Stripe Sample - Open-Source, simple eCommerce APP
Sm0ke
Sm0ke

Posted on β€’ Edited on β€’ Originally published at blog.appseed.us

23 5

Flask Stripe Sample - Open-Source, simple eCommerce APP

Hello Coders!

This article presents an open-source codebase that provides simple eCommerce features powered by Flask and Stripe. 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!


✨ 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. 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 - saved in the templates directory

{
    "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."
}
Enter fullscreen mode Exit fullscreen mode

Media Files: Product card and Cover Image:

Flask Stripe App - Product Media Files


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


Flask Stripe App - Product Sale.


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


Stripe and Flask App - Payment Confirmation page


Flask Stripe App - Confirmation Page


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

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (9)

Collapse
 
andromedasupendi profile image
Andromeda β€’

Is there anyone have tried this one in PythonAnywhereplatform? I need your docs please.

Collapse
 
sm0ke profile image
Sm0ke β€’

Hello! Noted your case.
πŸš€πŸš€

Collapse
 
crearesite profile image
WebsiteMarket β€’

This is really nice.

Collapse
 
sm0ke profile image
Sm0ke β€’

πŸš€πŸš€

Collapse
 
uithemes profile image
ui-themes β€’

Thanks for sharing. The UI looks nice

Collapse
 
sm0ke profile image
Sm0ke β€’

πŸš€πŸš€

Collapse
 
fedywes profile image
wes fedy β€’

hi sm0ke , i have a simple question would you mind contacting me ?
thank you for your time
@discord : xdrjokerxx#7075
@telegram : API_INTRUDER
@email : wesfedy@gmail.com

Collapse
 
sm0ke profile image
Sm0ke β€’

Invitation sent

Collapse
 
kemboi profile image
Kemboi Duncan β€’

Just what I was looking for ..this is awesome.

Neon image

Set up a Neon project in seconds and connect from a Python application

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started β†’

πŸ‘‹ Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s dayβ€”drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay