• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License

Changelog: New Stripe Subscriptions Pages

Jan 22, 2023

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

stripe
changelog

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:

ts
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: 7,
},
{
name: 'Yearly',
price: '$90',
stripePriceId: 'basic-plan-yr',
trialPeriodDays: 7,
},
],
},
{
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: 7,
},
{
name: 'Yearly',
price: '$200',
stripePriceId: 'pro-plan-yr',
trialPeriodDays: 7,
},
],
},
{
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: 7,
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!

Some other posts you might like...
Sep 17, 2025Introducing MCP Server for Makerkit: Supercharge Your AI Development WorkflowWe're excited to announce the release of Makerkit's MCP Server - a powerful tool that enables AI agents to understand and work with your codebase more effectively.
Aug 29, 2025Introducing Custom Dashboards in Supamode: Build Dynamic Analytics InterfacesCreate powerful Supabase dashboard interfaces with Supamode's custom analytics platform. Build personalized Supabase analytics views with drag-and-drop widgets and real-time data visualization.
Aug 21, 2025Makerkit 2.13.0: Components Showcase, Next.js 15.5 & Advanced Data TablesNext.js 15.5 upgrade, Component Showcase, enhanced Table component directly from Supamode to the SaaS Kit
Jul 10, 2025Introducing Supamode, the enterprise-grade Super Admin for SupabaseIntroducing Supamode, a self-hosted enterprise-grade Super Admin for Supabase, turning your database into a powerful, flexible, and secure CMS.
Jun 13, 2025Makerkit 2.11.0: Building Better Authentication ExperiencesDeep dive into the new authentication features: Identity Linking, OTP Sign-In, Smart User Hints, and Legacy Plans support. Learn how these features solve real user problems and reduce support overhead.
Apr 29, 2025Multi-Platform Deployment: Docker, Cloudflare & Self-Hosting Now Available in MakerkitDeploy your Makerkit SaaS projects anywhere with our new first-class support for Docker, Cloudflare, and self-hosting on VPS. Generate configuration files with a single command and follow our comprehensive guides to get up and running quickly.
Mar 10, 2025Introducing the React Router 7 SaaS Starter KitAnnouncing the release of our React Router 7 + Supabase SaaS Boilerplate! The SaaS template for shipping your SaaS with React Router 7.