Stripe

The billing system is managed using Stripe billing with webhooks. This allows users to manage their subscriptions and view invoices through the settings billing section.

Setup

To set up Stripe for your application, follow these steps:

1. Configure Stripe

   • Sign in to your Stripe account.
   • Navigate to the API keys section under Developers.
   • Generate and securely store your Publishable key and Secret key.

2. Enable Customer Billing Portal

   • In the Stripe Dashboard, go to Billing > Customer portal.
   • Click Enable customer portal. This allows your customers to manage their subscriptions, payment methods, and view invoices.

3. Create a Product

   • Under Products, click + Add product.
   • Fill in the necessary details (name, description, etc.) and set up the pricing.
   • Save the product to generate a Product ID and a Price ID.

4. Update Environment Variables

   In your project, open the apps/dashboard/.env file and add the following entries with the respective values from your Stripe Dashboard:

NEXT_PUBLIC_BILLING_STRIPE_PUBLISHABLE_KEY=BILLING_STRIPE_SECRET_KEY=BILLING_STRIPE_WEBHOOK_SECRET=BILLING_PRO_PRODUCT_ID=BILLING_PRO_PRODUCT_PRICE_ID=

Webhooks

Webhooks allow Stripe to communicate with your application about important events, such as invoice payments and subscription changes. There are two main approaches to working with Stripe webhooks: Stripe CLI Simulated Events and ngrok proxy.

Stripe CLI simulated events

This method is suitable for basic setup and testing:

1. Install the Stripe CLI

   • Download and install the Stripe CLI for your operating system.

2. Authenticate the Stripe CLI

stripe login

3. Forward events to your local server

   • Use the Stripe CLI to forward webhook events to your local server:

stripe listen --forward-to localhost:<your-local-port>/api/stripe/webhook

• For example, if your app runs on port 3000:

stripe listen --forward-to localhost:3000/api/stripe/webhook

4. Trigger test events
   • Use the Stripe CLI to trigger test webhook events:

stripe trigger <event>

• For example, to simulate a completed checkout:

stripe trigger checkout.session.completed

The Stripe CLI method for simulated events is quick and easy to set up, making it good for initial testing. However, its main drawback is that it doesn't test the app in a fully integrated environment.

Using ngrok with Stripe webhooks

This approach allows for more realistic testing:

1. Install ngrok:

   • Visit ngrok and sign up for an account.
   • Download and install ngrok for your operating system.

2. Start your local server:

   • Ensure your application is running locally, typically on port 3000 or 8000.

3. Start ngrok:

   • Open a terminal and run:

ngrok http <your-local-port>

• For example, if your app runs on port 3000:

ngrok http 3000

4. Copy the ngrok URL:

   • ngrok will display a public URL (e.g., https://1234abcd.ngrok.io).
   • This URL will forward to your local server.

5. Configure Stripe webhook:

   • Go to the Stripe Dashboard.
   • Navigate to Developers > Webhooks.
   • Add a new webhook endpoint.
   • Paste your ngrok URL followed by your webhook route (e.g., https://1234abcd.ngrok.io/api/stripe/webhook).
   • Update BILLING_STRIPE_WEBHOOK_SECRET= in apps/dashboard/.env

6. Test your webhook:

   • Trigger events in Stripe or use the Stripe CLI to send test events.
   • Monitor your local application logs to see incoming webhook events.

This method allows you to test your app's subscription flow in a more integrated and realistic manner.