Thanks to visit codestin.com
Credit goes to github.com

Skip to content

A tutorial used to showcase the basics needed to get started into integrating a stripe payment system into a dash application.

License

Notifications You must be signed in to change notification settings

plotly/dash-stripe-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dash Stripe Integration

A Python web application built with Dash that integrates with Stripe to display products, handle payments, and visualize revenue analytics.

🚀 Features

  • Product Catalog: Display Stripe products with images, descriptions, and pricing
  • Stripe Checkout Integration: Seamless payment processing with Stripe Checkout
  • Revenue Analytics Dashboard: Real-time visualization of payment data
  • Multi-page Application: Clean navigation between products and analytics
  • Responsive Design: Works on desktop and mobile devices

📋 Prerequisites

  • Python 3.7+
  • A Stripe account (free to create at stripe.com)
  • Stripe API keys (found in your Stripe Dashboard under Developers > API Keys)

🛠️ Installation

  1. Clone the repository

    git clone https://github.com/plotly/dash-stripe-tutorial.git
  2. Create a virtual environment

    python -m venv venv
    
    # Activate virtual environment
    # On Windows:
    venv\Scripts\activate
    # On macOS/Linux:
    source venv/bin/activate
  3. Install dependencies

    pip install dash plotly stripe python-dotenv pandas
  4. Set up environment variables

    # Copy the example environment file
    cp .env.example .env
    
    # Edit .env and add your Stripe secret key
    # STRIPE_SECRET_KEY=sk_test_your_actual_key_here

🔑 Stripe Configuration

  1. Get your API keys

    • Log in to your Stripe Dashboard
    • Navigate to Developers → API Keys
    • Copy your Secret key (starts with sk_test_ for test mode)
  2. Add test products (optional)

    • Go to Products in your Stripe Dashboard
    • Create some test products with prices
    • The app will automatically fetch and display them
  3. Test the connection

    python stripe_data/api_connected_test.py

    You should see "✅ Connection successful!" if everything is set up correctly.

🚀 Running the Application

  1. Start the Dash server

    python app.py
  2. Open your browser

📁 Project Structure

├── app.py                          # Main Dash application
├── pages/
│   ├── home.py                     # Products catalog page
│   └── analytics.py                # Revenue analytics dashboard
├── stripe_data/
│   ├── stripe_analytics_tutorial.py    # Tutorial/demo script for Stripe analytics
│   └── stripe_api_connected_test.py    # Connection test script
├── .env.example                    # Example environment variables
├── .env                           # Your actual environment variables (not in git)
└── README.md                      # This file

📊 Features in Detail

Products Page (/)

  • Displays all active products from your Stripe account
  • Shows product images, names, descriptions, and prices
  • Supports both one-time and subscription products
  • "Buy Now" buttons create Stripe Checkout sessions
  • Automatically opens checkout in a new browser tab

Analytics Page (/analytics)

  • Summary Cards: Total revenue, transaction count, and average transaction value
  • Revenue Chart: Daily revenue and transaction volume over the last 30 days
  • Key Insights: Business metrics like busiest days and best revenue days
  • Real-time Data: Fetches live data from your Stripe account

Tutorial Script

The stripe_data/stripe_analytics_tutorial.py file provides:

  • Step-by-step guide to using Stripe's API
  • Examples of fetching payment data
  • Advanced features like pagination and fee calculations
  • Export options for further analysis

🧪 Testing

Test Mode

The application uses Stripe's test mode by default (keys starting with sk_test_). This allows you to:

  • Create test transactions without real money
  • Use test card numbers like 4242 4242 4242 4242
  • Develop and test without affecting production data

Creating Test Data

  1. Use the products page to make test purchases
  2. Use Stripe's test card numbers during checkout
  3. View the results immediately in the analytics dashboard

🔧 Troubleshooting

"No API key found" error

  • Ensure your .env file exists and contains STRIPE_SECRET_KEY=sk_test_...
  • Check that you're in the correct directory
  • Try running python stripe_api_connected_test.py to debug

No products showing

  • Verify you have products created in your Stripe Dashboard
  • Ensure products have associated prices
  • Check that products are active (not archived)

Analytics showing no data

  • The dashboard shows data from the last 30 days only
  • Make some test transactions first
  • Ensure payments have "succeeded" status

📚 Additional Resources

📝 License

This project is provided as-is for educational and development purposes.

⚠️ Security Notes

  • Never commit your actual Stripe secret keys to version control
  • Always use environment variables for sensitive data
  • Use test mode keys (sk_test_) during development
  • Switch to live mode keys (sk_live_) only in production with proper security measures

Built with ❤️ using Dash and Stripe

About

A tutorial used to showcase the basics needed to get started into integrating a stripe payment system into a dash application.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages