Setting Up Plans in app.config.ts

To configure the subscription plans for your Full-Stack-Kit, follow these steps in the app/app.config.ts file. These plans will be used for billing using the Stripe payment system.

Billing Configuration

Open the app/app.config.ts file and navigate to the billing section. Inside this section, you'll find the configuration for the Stripe payment system.

Example Configuration

app/app.config.ts

{
    // ...
    billing: {
    stripe: {
      enabled: true,
      secretKey: process.env.STRIPE_SECRET_KEY,
      webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
      publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
      checkoutSuccessUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/billing`,
      checkoutCancelUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/billing`,
      plans: [
        /**
         * Monthly plans configuration
         */
        {
          stripePriceId: "price_1ObIPyI8ViYhD07Dy3S1d4J3",
          name: "Basic",
          description: "Full Stack Kit Basic plan",
          amount: 9.99,
          currency: "usd",
          interval: "month",
          trialPeriodDays: 7,
          features: [
            "Unlimited projects",
            "Unlimited tasks",
            "Unlimited users",
            "Unlimited storage",
          ],
        },
        {
          stripePriceId: "price_20bIQUI8XYZmhD07DfM12mbVO",
          name: "Standard",
          description: "Full Stack Kit Standard plan",
          amount: 19.99,
          currency: "usd",
          interval: "month",
          trialPeriodDays: 7,
          features: [
            "Unlimited projects",
            "Unlimited tasks",
            "Unlimited users",
            "Unlimited storage",
            "Priority support",
          ],
        },
        {
          stripePriceId: "price_20bIQzI8l7ghD07D5UXSizih",
          name: "Enterprise",
          description: "Full Stack Kit Enterprise plan",
          amount: 49.99,
          currency: "usd",
          interval: "month",
          trialPeriodDays: 7,
          features: [
            "Unlimited projects",
            "Unlimited tasks",
            "Unlimited users",
            "Unlimited storage",
          ],
        },
 
        /**
         * Yearly plans configuration
         */
        {
          stripePriceId: "price_1ObIPyI8lGmhD07Dy3S1d4E3",
          name: "Basic",
          description: "Full Stack Kit Basic plan",
          amount: 90.99,
          currency: "usd",
          interval: "year",
          trialPeriodDays: 7,
          features: [
            "Unlimited projects",
            "Unlimited tasks",
            "Unlimited users",
            "Unlimited storage",
          ],
        },
        {
          stripePriceId: "price_1ObIQUI8lGkhD07Dfo12mbVj",
          name: "Standard",
          description: "Full Stack Kit Standard plan",
          amount: 190.99,
          currency: "usd",
          interval: "year",
          trialPeriodDays: 7,
          features: [
            "Unlimited projects",
            "Unlimited tasks",
            "Unlimited users",
            "Unlimited storage",
          ],
        },
        {
          stripePriceId: "price_7ObIQzI8lGwuD07D5USSiyih",
          name: "Enterprise",
          description: "Full Stack Kit Enterprise plan",
          amount: 490.99,
          currency: "usd",
          interval: "year",
          trialPeriodDays: 7,
          features: [
            "Unlimited projects",
            "Unlimited tasks",
            "Unlimited users",
            "Unlimited storage",
          ],
        },
      ],
    },
  },
    // ...
}

Configuration Explanation

Stripe: the Stripe configuration has the following properties:
- enabled: Set this to true to enable the Stripe payment system in Full-Stack-Kit.
- secretKey: The secret key of your Stripe account. You can find this key in the Stripe dashboard.
- webhookSecret: The webhook secret of your Stripe account. You can find this secret in the Stripe dashboard.
- publishableKey: The publishable key of your Stripe account. You can find this key in the Stripe dashboard.
- checkoutSuccessUrl: The URL to redirect the user to after a successful payment.
- checkoutCancelUrl: The URL to redirect the user to after a canceled payment.
Plans: the plans configuration is an array of objects. Each object represents a plan. You can add as many plans as you want. Each plan object has the following properties:
- name: The name of the plan.
- description: The description of the plan.
- stripePriceId: The Stripe price ID for the plan. You can find this ID in the Stripe dashboard. The one strated with price_.
- amount: The amount of the plan. Should match the amount in the Stripe dashboard.
- currency: The currency of the plan.
- interval: The interval of the plan. It can be month or year.
- trialPeriodDays: The trial period days for the plan. If you don't want to provide a trial period, you can set this to 0 or remove it.
- features: The features of the plan to show on the billing page.

If you have question, feel free to join the community discord and ask for help. We are here to help you ship your app faster and with less bugs.

Configuration Testing