Pricing Table

Overview

Our boilerplate supports three different subscription types, each designed to cover various scenarios for your SAAS application. These subscription types are highly dynamic and can easily be customized to fit your needs.

 {
            name: SubscriptionPlan.PREMIUM,
            label: "Premium",
            type: "RECURRING",
            featured: false,
            stripeProductId: "prod_Q9IlnhsXwxNtxx",
            price: {
                Monthly: {
                    value: "$9",
                    stripePriceId: "price_1PJ09dD8PnrtK1gBxxxxxxx",
                },
                Annually: {
                    value: "$90",
                    stripePriceId: "price_1PJ0ATD8PnrtK1gxxxxxxxx",
                },
            },
            description: "Description of your Premium plan.",
            button: {
                label: "Checkout",
                href: "",
            },
            features: {
                available: ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
                unavailable: ["Feature 5", "Feature 6"],
            },
        },

Subscription Types

1. Free Plan

   • CTA Button: Directs the user to the sign-in page.

2. Recurring Plan

   • Unauthenticated Users or Authenticated Users with a Free Account:

     • CTA Button: Directs the user to the Stripe checkout page to pay for the subscription plan.

   • Authenticated Users Already Subscribed to a Recurring Plan:

     • CTA Button: Opens a modal containing the Billing Portal, allowing the user to upgrade, downgrade, or cancel their subscription.

3. Lifetime Plan

   • Authenticated Users Already Subscribed to a Lifetime Plan Among Other Recurring Plans:

     • CTA Button: Opens a modal informing the user that they are already subscribed to the lifetime plan, which is the best available.

   • Authenticated Users Subscribed to a Lifetime Plan Among Other Lifetime Plans:

     • CTA Button: Directs the user to the Stripe checkout page to pay for the new lifetime subscription plan.

Configuration

The plan type can be easily determined and set in the configuration file. Once configured, all related functionalities are automatically set up.

Additional Features

• CTA Button Updates:

  • The CTA button for the user's subscribed plan automatically changes to "current plan."

• IntervalSwitch Component:

  • This component appears only if there is a recurring plan among the available plans.

  • Function: Allows users to switch between monthly and yearly subscriptions.

• Plans Component:

  • This reusable component is used on both the homepage and the billing and subscription section of the client dashboard.

Styling

The styling for the plans table is highly dynamic, adjusting based on the number of plans available (e.g., 1, 2, 3, or 4 plans).