This guide will help you set up billing plan configurations in the Next.js Supabase AI template.

Overview

The final onboarding step involves selecting a billing plan. Users can choose from different plans that cater to their organization's needs. The selected plan will determine the features and services available. Users can update this plan at any time.

Billing Plan Configuration

We support billing sync, so all you would need is to create products in Stripe/Lemonsqueezy dashboard and store product ids in app.config.ts

paymentGateway: {
		providerName: "stripe",
		products: {
			development: {
				"prod_1": {
					features: [
						"Feature 1",
						"Feature 2",
						"Feature 3",
					]
				},
				"prod_2": {
					features: [
						"Feature 1",
						"Feature 2",
						"Feature 3",
					],
					recommended: true
				},
				"prod_3": {
					features: [
						"Feature 1",
						"Feature 2",
						"Feature 3",
					]
				}
			},
			production: {}
		}
}

We have two environments, development and production. It will manage different products for both environments.

Key Properties:

providerName: The value would be either "stripe" or "lemonsqueezy based on payment provider of your choice
products: It will contain object with following structure same for both development and production

Products object structure for development/production environment:

Each object key will be productId created on stripe/lemonsqueezy dashboard.
features: Features list to be shown in UI for each product
recommended: Optional, boolean value to show if product is recommended.

Sync Billing

After you update the paymentGateway, You would need to sync billing using the following command.

Sync billing script for development

npm run sync:billing-development

This will create a file at path /src/products.development.json.

Sync billing script for production

npm run sync:billing-production

This will create a file at path /src/products.production.json.

Make sure to update production env file

The production billing sync will need to run locally. Please make sure that .env.prod file contains the required production envs

Updating the Billing Plan

In order to update the billing plan, modify the app.config.ts file and update the plan details under the paymentGateway key as shown in the example above.

Billing Plan