app-generator/ecommerce-flask-stripe

Flask Stripe Sample - Soft UI Design (Free Sample) | AppSeed

Flask & Stripe Mini eCommerce

Open-source eCommerce Starter that loads the products from JSON files saved in the templates directory (no database required) and uses a decent UI for page styling - Powered by Flask & Stripe.

Features

Have questions? Contact Support (Email & Discord) provided by AppSeed

Free Version	Rocket eCommerce	Custom Development
✓ Stack: Flask, Bootstrap	✅ Stack: Django, TailwindCSS	Everything in PRO, plus:
✓ Payments: Stripe	✅ Payments: Stripe	✅ 1mo Custom Development
✓ Minimal Bootstrap Design	✅ Stripe Products Import	✅ Team: PM, Developer, Tester
✓ No Database	✅ Local Products Customization	✅ Weekly Sprints
-	✅ Categories, TAGS	✅ Technical SPECS
-	✅ Multi-product Checkout	✅ Documentation
-	✅ Discounts Page	✅ 30 days Delivery Warranty
-	✅ Analytics	-
-	✅ Transactions Tracking	-
-	✅ Zero Configuration	-
-	✅ FIGMA Project	-
-	✅ PRO Support - Email & Discord	-
------------------------------------	------------------------------------	------------------------------------
-	🚀 LIVE Demo	🛒 Order: $3,999 (GUMROAD)

Start in Docker

👉 Step 1 - Download the code from the GH repository (using GIT)

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

👉 Step 2 - Add STRIPE secrets in 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

$ docker-compose up --build 

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

Manual Build

👉 Rename env.sample to .env

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

👉 Install dependencies

$ virtualenv env
$ source env/bin/activate
$ pip install -r requirements.txt

👉 Start the App

$ flask run

👉 Access the products and initiate a payment

IMPORTANT: Make sure your Stripe account is running in TEST Mode and Use Test CC provided by Stripe:

• CC Number: 4242 4242 4242 4242
• Any data for the rest of the fields

Create a new Product

• Go to app/templates/products directory
• Create a new JSON file with data:
  • name: Used in product page & Cards
  • price: Used for payment
  • currency: Used for payment
  • info: used in cards
  • short_description: used in product page
  • full_description: used in product page
• Create Media Files
  • Go to master/app/static/products
  • Create a directory using the same name as for JSON file
    • Create card.jpg: 500x335px
    • Create cover.jpg: 2100x1400px
• Start or refresh the app
  • The new product should be listed in the products/ page
  • Product page is available at address:
    • http://localhost:5000/products/<SLUG>/ where the SLUG is the name of the JSON file

Sample product page generated for Air ZOOM Pegasus, assets loaded from here

Codebase Structure

The project has a simple structure, represented as bellow:

< PROJECT ROOT >
   |
   |-- app/__init__.py
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- includes/                 # Page chunks, components
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts common to all pages
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts (the master pages)
   |    |    |    |-- base.html            # Used by common pages like index, UI
   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)
   |    |    |
   |    |    |-- products/                        # Define your products here
   |    |    |    |-- nike-goalkeeper-match.json  # Sample product
   |
   |-- requirements.txt
   |
   |-- run.py
   |
   |-- ************************************************************************

Credits & Links

• Flask Framework - The official website
• Stripe Dev Tools - official docs

---

Flask Stripe Sample - Free sample provided by AppSeed.

ecommerce-flask-stripe's Issues

404 case for products

If the user creates a product and later delete it, on access the server bumps ERR 500

Error log

127.0.0.1 - - [03/Nov/2022 15:41:47] "GET /static/assets/img/down-arrow-dark.svg HTTP/1.1" 304 -
    rv = self.handle_user_exception(e)
  File "D:\work\repo-free\ecommerce-flask-stripe\env\lib\site-packages\flask\app.py", line 1820, in full_dispatch_request
    rv = self.dispatch_request()
  File "D:\work\repo-free\ecommerce-flask-stripe\env\lib\site-packages\flask\app.py", line 1796, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
  File "D:\work\repo-free\ecommerce-flask-stripe\app\views.py", line 122, in product_info
    product = load_product_by_slug( path )
  File "D:\work\repo-free\ecommerce-flask-stripe\app\util.py", line 103, in load_product_by_slug
    return load_product( aJSONPath )
  File "D:\work\repo-free\ecommerce-flask-stripe\app\util.py", line 69, in load_product
    f = open(aJSONPath, 'r')
FileNotFoundError: [Errno 2] No such file or directory: 'D:\\work\\repo-free\\ecommerce-flask-stripe\\app\\templates\\products\\django-black-pro.json'
127.0.0.1 - - [03/Nov/2022 15:41:55] "GET /products/django-black-pro/ HTTP/1.1" 500 -

Problem with msilib

Hi 👋🏼

I've run docker-compose.yml, but the containers sample-flask-stripe-001-appseed-app-1 is always Restarting. The application doesn't run. When I run a docker logs sample-flask-stripe-001-appseed-app-1, I see that (in the end of the logs) :

[2022-06-06 17:01:57 +0000] [8] [ERROR] Exception in worker process Traceback (most recent call last): File "/usr/local/lib/python3.6/site-packages/gunicorn/arbiter.py", line 583, in spawn_worker worker.init_process() File "/usr/local/lib/python3.6/site-packages/gunicorn/workers/base.py", line 119, in init_process self.load_wsgi() File "/usr/local/lib/python3.6/site-packages/gunicorn/workers/base.py", line 144, in load_wsgi self.wsgi = self.app.wsgi() File "/usr/local/lib/python3.6/site-packages/gunicorn/app/base.py", line 67, in wsgi self.callable = self.load() File "/usr/local/lib/python3.6/site-packages/gunicorn/app/wsgiapp.py", line 49, in load return self.load_wsgiapp() File "/usr/local/lib/python3.6/site-packages/gunicorn/app/wsgiapp.py", line 39, in load_wsgiapp return util.import_app(self.app_uri) File "/usr/local/lib/python3.6/site-packages/gunicorn/util.py", line 358, in import_app mod = importlib.import_module(module) File "/usr/local/lib/python3.6/importlib/__init__.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "<frozen importlib._bootstrap>", line 994, in _gcd_import File "<frozen importlib._bootstrap>", line 971, in _find_and_load File "<frozen importlib._bootstrap>", line 955, in _find_and_load_unlocked File "<frozen importlib._bootstrap>", line 665, in _load_unlocked File "<frozen importlib._bootstrap_external>", line 678, in exec_module File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed File "/run.py", line 6, in <module> from app import app File "/app/__init__.py", line 17, in <module> from app import views File "/app/views.py", line 14, in <module> from app.util import get_products, Product, load_product, load_product_by_slug File "/app/util.py", line 6, in <module> from msilib.schema import Class ModuleNotFoundError: No module named 'msilib' [2022-06-06 17:01:57 +0000] [8] [INFO] Worker exiting (pid: 8) [2022-06-06 17:01:57 +0000] [1] [INFO] Shutting down: Master [2022-06-06 17:01:57 +0000] [1] [INFO] Reason: Worker failed to boot.

I've attach all logs
sample-flask-stripe-001-appseed-app-1.log
.

Insecure content during the checkout process

Hey, a few days ago, I encountered an issue during the checkout process of the Flask-based e-commerce app integrated with Stripe. I received the following error message in the Chrome Dev Tools:

'Mixed Content: The page at 'https://..../products/featured/' was loaded over HTTPS, but requested an insecure resource 'http://..../create-checkout-session/featured/'. This request has been blocked; the content must be served over HTTPS.'

I resolved this problem by adding the following meta tag to my HTML:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

It's worth noting that I am using an HTTPS URL for the SERVER_ADDRESS variable. I do not understand what is happening.