Changelog: New Stripe Subscriptions Pages

We've redesigned the Makerkit subscriptions pages. Let's take a look at the new design.

·3 min read
Cover Image for Changelog: New Stripe Subscriptions Pages

I am super happy to announce the new design for the Makerkit subscriptions pages. This includes both a new dynamic pricing table and a much-improved subscription management page.

In this blog post, I want to introduce the new design and explain why we made the changes shipped today.

The new pricing table

The new pricing table introduces the ability to have multiple plans with multiple variations. For example, you could have 3 different plans (Basic, Pro and Enterprise), each with a monthly or an annual price.

The dynamic variant switcher will automatically show the prices for the selected variant.

Configuring the plans

Below is how to configure the new Makerkit's configuration for Stripe:

stripe: {
  products: [
    {
      name: 'Basic',
      description: 'Description of your Basic plan',
      badge: `Up to 20 users`,
      features: [
        'Basic Reporting',
        'Up to 20 users',
        '1GB for each user',
        'Chat Support',
      ],
      plans: [
        {
          name: 'Monthly',
          price: '$9',
          stripePriceId: 'basic-plan-mth',
          trialPeriodDays: 0,
        },
        {
          name: 'Yearly',
          price: '$90',
          stripePriceId: 'basic-plan-yr',
          trialPeriodDays: 0,
        },
      ],
    },
    {
      name: 'Pro',
      badge: `Most Popular`,
      recommended: true,
      description: 'Description of your Pro plan',
      features: [
        'Advanced Reporting',
        'Up to 50 users',
        '5GB for each user',
        'Chat and Phone Support',
      ],
      plans: [
        {
          name: 'Monthly',
          price: '$29',
          stripePriceId: 'pro-plan-mth',
          trialPeriodDays: 0,
        },
        {
          name: 'Yearly',
          price: '$200',
          stripePriceId: 'pro-plan-yr',
          trialPeriodDays: 0,
        },
      ],
    },
    {
      name: 'Premium',
      description: 'Description of your Premium plan',
      badge: ``,
      features: [
        'Advanced Reporting',
        'Unlimited users',
        '50GB for each user',
        'Account Manager',
      ],
      plans: [
        {
          name: '',
          price: 'Contact us',
          stripePriceId: '',
          trialPeriodDays: 0,
          label: `Contact us`,
          href: `/contact`,
        },
      ],
    },
  ],
}

There are various options available, such as:

  1. Adding a custom label using the label property in each plan. Useful, for example, if you want to add a "Contact us" button instead of a "Checkout" button.
  2. Adding a custom link using the href property in each plan. Useful, for example, if you want to link to a contact form instead of a checkout page.

The new subscription management page

The new subscription management page is a much-improved version of the previous one.

It now includes a much better overview of the current subscription. Thanks to granular labels and descriptions, you can now show the exact state of the subscription.

Furthermore, we simplified the plan selector by reusing the same pricing table used on the pricing page.

Plan selector

The old plan selector has been removed. Instead, we now use the pricing table from the pricing page. This makes it easier to understand the different plans and variants when picking a plan from within the subscription management page.

Subscription Status

The subscription status has been improved to show the exact state of the subscription. This includes the current plan, the current status, the next billing date, and whether the subscription is set to be renewed automatically.

Furthermore, unless the subscription is active, users will now see a badge in the top-right corner of the page to indicate the current status of their subscription.

Conclusion

I am super excited about the new design for the Makerkit subscription pages. I hope you like it as much as I do.

If you have any questions or feedback, please let me know!


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor

Read more about

Cover Image for Makerkit ❤️ Radix UI

Makerkit ❤️ Radix UI

·2 min read
Makerkit migrated its UI Components to Radix UI, bringing a new look and feel to the platform.
Cover Image for Planning Makerkit's 2023

Planning Makerkit's 2023

·2 min read
A plan for the coming year at Makerkit. New kits, new blog posts, new documentation, courses, and more.
Cover Image for Introducing the Makerkit UI Storybook

Introducing the Makerkit UI Storybook

·2 min read
Announcing the Makerkit UI Storybook: a collection of all the components that make up the Makerkit kits. You can use this to see how the components work and to get inspiration for your own projects.
Cover Image for v0.5.0: Design Improvements and code-cleanup

v0.5.0: Design Improvements and code-cleanup

·2 min read
The version 0.5.0 adds improvements to the overall design, and adds Firebase Storage security rules backed by Firestore
Cover Image for v0.4.0: Phone Authentication

v0.4.0: Phone Authentication

·2 min read
The version 0.4.0 adds the ability to sign-in using a Phone number, and adds design and usability improvements to the authentication pages
Cover Image for v0.3.0: Multi-Factor Authentication and Multi-Provider accounts

v0.3.0: Multi-Factor Authentication and Multi-Provider accounts

·2 min read
The version 0.3.0 adds the ability to enable Multi-Factor Authentication and for users to link their account to multiple providers