Manage plans and products

Define plans and products

You can manage the plans and products in the configuration file of your supastarter project.

There are different types of plans you can define:

Free plan

The free plan is the default plan for users who have not purchased any plans or can be used to access a limited version of your product.

As this is no paid plan, you don't need to define any prices or attach a provider price id to it.

export const config = {
    plans: {
        free: {
            isFree: true,
        },
    }
};

Enterprise plan

The enterprise plan is not a real plan, but will show up in the pricing table with a link to a contact form, so customers can contact you to get access to your product.

As this is no paid plan, you don't need to define any prices or attach a provider price id to it.

export const config = {
    plans: {
        enterprise: {
            isEnterprise: true,
        },
    }
};

Subscription plans and one-time purchase plans

A plan represents a product or service of your application and each is a column in your pricing table. It has the following properties:

• recommended: if this plan should be highlighted as recommended
• hidden: hide the plan from the pricing table, can be used if you want to grandfather old plans or prepare for a new plan
• prices: define the prices for this plan

One plan can have multiple prices, for example a monthly and yearly price or/and for each currency you support.

A price has the following properties:

• type: the type of the price, can be recurring or one_time
• priceId: the id of the price from the payment provider
• interval: the interval of the price, can be month, year, week or day
• intervalCount: the number of intervals to bill, defaults to 1
• amount: the amount of the price
• currency: the currency of the price, for example USD
• trialPeriodDays: the number of days of the trial period, leave out if you don't want to offer a trial period
• seatBased: if price is per seat (this will only work for organizations and will multiply the price by the number of members), defaults to false

You can publish your site with a placeholder priceId, if you need a landing page with pricing table to verify your store in Stripe or Lemonsqueezy. Just note that this will not work in production.

export const config = {
  plans: {
      pro: {
          recommended: true,
          prices: [
              {
                  type: "recurring",
                  priceId: "price_as34asdflkh134kh",
                  interval: "month",
                  amount: 29,
                  currency: "USD",
                  trialPeriodDays: 7,
                  seatBased: true,
              },
              {
                  type: "recurring",
                  priceId: "price_as34asdflkh134kh",
                  interval: "year",
                  amount: 290,
                  currency: "USD",
                  trialPeriodDays: 7,
                  seatBased: true,
              },
          ],
      },
      lifetime: {
          prices: [
              {
                  type: "one_time",
                  priceId: "price_as34asdflkh134kh",
                  amount: 999,
                  currency: "USD",
              },
          ],
      },
  }
};

Support multiple currencies

To support multiple currencies, make sure to define the different currencies for each locale in packages/i18n/config.ts:

export const config = {
    locales: {
        en: {
            currency: "USD",
        },
        de: {
            currency: "EUR",
        },
    }
};

Then define the prices for each currency in the packages/payments/config.ts:

export const config = {
    plans: {
        pro: {
            prices: [
                {
                    type: "recurring",
                    priceId: "price_as34asdflkh134kh",
                    interval: "month",
                    amount: 29,
                    currency: "USD"
                },
                {
                    type: "recurring",
                    priceId: "price_as34asdflkh134kh",
                    interval: "month",
                    amount: 29,
                    currency: "EUR"
                },
            ],
        },
    }
};

Plan information for pricing table

You can define the information for the pricing table for each plan in the plan data composable in /apps/saas/modules/payments/composables/plan-data.ts.

You can define a title, a description and a features array for each plan.

We recommend you to use the t() function to get the translations for the plan information and then define the translations in the scoped i18n messages for the SaaS app.

Note: When you remove one of the existing plans, make sure to remove the corresponding entry in the plan data composable, otherwise you will get a type error.