Payment Flow

Prerequisites

Supersaas uses Stripe for payments and managing subscriptions.

Stripe Setup

Create a Stripe account and get the API keys.

STRIPE_SECRET_KEY=sk_test_1234567890
STRIPE_WEBHOOK_SECRET=whsec_1234567890

Setting Up Stripe Products

Before using the payment system, you need to create products in Stripe:

1. Go to Stripe Dashboard Products
2. Click "Add Product"
3. Enter the product details:
   • Name (e.g., "Basic Plan", "Pro Plan")
   • Description
   • Price amount
   • Billing period (monthly, yearly)
   • Marketing lines

For multiple billing options (e.g., monthly and yearly), create separate price variants for each product Add product features in the metadata section to display them in your app

Adding a product:

Adding product metadata:

Configuring the Webhook

1. Go to Stripe Dashboard Webhooks
2. Create a new webhook with URL: https://your-domain.com/api/stripe/webhook
3. Select these events

checkout.session.async_payment_succeeded
checkout.session.completed
customer.subscription.created
customer.subscription.paused
customer.subscription.updated
price.created
price.updated
product.created
product.deleted
product.updated

4. Save the webhook and copy the signing secret
5. Add the webhook secret to your environment variables as STRIPE_WEBHOOK_SECRET

Syncing Stripe Products with Your App

After creating products in Stripe:

1. Open Nuxt Devtools in your development environment
2. Click on "Server Tasks"
3. Find and run the "Sync Stripe Products" task
4. This process:
   • Fetches all products and prices from Stripe
   • Formats them appropriately
   • Stores them in your application database
   • Makes them available for display in your pricing page

Team-Based Subscription Model

Each team in your application functions as an isolated workspace with its own subscription:

1. When a team is created, it doesn't have an active subscription (Free plan)
2. When a team member clicks "Subscribe" on a plan:
   • A Stripe customer is created for that team if it doesn't exist
   • The user is redirected to Stripe Checkout
   • After successful payment, they return to the billing page
   • Teams owners can manage their subscription through the Stripe Customer Portal
3. Each team can have only one active subscription at a time
4. Subscription status and details are stored in the database and linked to the team

Subscription Management for Users

Team owners can

• View their current plan details on the billing page
• Upgrade/downgrade plans through Stripe Checkout
• Manage payment methods, billing information, and cancel subscriptions via Stripe Portal
• See their subscription renewal date and status

The webhook automatically handles subscription updates, ensuring the application database stays in sync with Stripe.