Subscriptions

Stripe

Before configuring the subscriptions, you need to create a Stripe account

Secret Key

To configure the subscriptions with Stripe, you need to set the NUXT_STRIPE_SECRET_KEY environment variable in your .env file.

NUXT_STRIPE_SECRET_KEY=your_stripe_secret_key

You can get your Stripe secret key by creating a project on your account and go to the Developers section and then API keys. Secret key begins with sk_test_ or sk_live_.

Webhooks

To configure the subscriptions with Stripe, you need to set the NUXT_STRIPE_WEBHOOK_SECRET environment variable in your .env file.

NUXT_STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

First, go to the Developers section and then Webhooks on your Stripe account.

Local

You can get your Stripe webhook secret and trigger events by clicking on the Add local listener button and follow those steps:

• Download the Stripe CLI from the Stripe CLI.
• Run the following command in your terminal to listen for events.

stripe listen --forward-to {NUXT_PUBLIC_APP_URL}/api/webhooks/stripe

• Copy the webhook secret and set it in your .env file.

Production

You can get your Stripe webhook secret by clicking on the Add endpoint button and follow those steps:

• Set the endpoint URL to {NUXT_PUBLIC_APP_URL}/api/webhooks/stripe.
• Select the events you want to listen to. Currently we only need the checkout.session.completed and invoice.payment_succeeded events.
• Copy the webhook secret and set it in your .env file.

Price cards

You need to fill stripeIds.monthly and stripeIds.yearly in your app.config.ts file for the pro and business plans.

• Go to the Product catalogue section on your Stripe account.
• Create a new product for your plan (for exemple: Pro).
• Create a new price for your plan. Set up the details like the price, currency, and billing period (monthly or yearly)
• Click on Copy price ID by clicking on the ... button in the Pricing table of your product.
• Paste the price ID in your app.config.ts file for the corresponding plan.
• Don't forget to set the prices.monthly and prices.yearly in your app.config.ts file with corresponding prices.

Price ID begins with price_.

Customer portal

User can manage their subscription in the customer portal provided by Stripe.

• You can personalize the customer portal by going to the Settings, Business, Branding and Customer portal sections on your Stripe account.
• If you want to allow users to switch plans via the customer portal, you need to enable it in the Settings, Billing, Customer portal section on your Stripe account. You need to enable Customers can switch plans and add the products (plans) you want to allow users to switch between.