Billing Plan

This guide will help you set up billing plan configurations in the Next.js Supabase SaaS 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

Billing plan options can be customized in the client.config.ts file under the stripePayment key. This file contains predefined plans that users can select during onboarding or update later. Below is an example configuration:

stripePayment: {
    basic: {
        features: [
            "Access to core features",
            "Email support with 48-hour response time",
            "Basic analytics and reporting",
            "Single user account",
        ],
        recommneded: false,
    },
    hobby: {
        features: [
            "All Basic plan features",
            "Priority email support with 24-hour response time",
            "Advanced analytics and reporting",
            "Up to 3 user accounts",
        ],
        recommneded: true,
    },
}

Key Properties:

  • features: Lists the features provided under each plan.
  • recommneded: A boolean value that determines whether the plan is highlighted as recommended for users.

Updating the Billing Plan

  • To update the billing plan, modify the client.config.ts file and update the plan details under the stripePayment key as shown in the example above.

On this page