• Documentation
  • /
  • Next.js Firebase
  • /
  • Pricing Table

Pricing Table

Learn how to create and configure your application's Pricing Table

The Pricing Table of your application is generated automatically using the PricingTable.tsx component. This component retrieves the plans from your application's stripe.plans object.

The default configuration is an example with three plans:

stripe: {
  plans: [
    {
      name: 'Basic',
      description: 'Description of your Basic plan',
      price: '$9/month',
      stripePriceId: 'basic-plan',
      trialPeriodDays: 0,
      features: [
        'Basic Reporting',
        'Up to 20 users',
        '1GB for each user',
        'Chat Support',
      ],
    },
    {
      name: 'Pro',
      description: 'Description of your Pro plan',
      price: '29/month',
      stripePriceId: 'pro-plan',
      features: [
        'Advanced Reporting',
        'Up to 50 users',
        '5GB for each user',
        'Chat and Phone Support',
      ],
    },
    {
      name: 'Premium',
      description: 'Description of your Premium plan',
      price: '$79/year',
      stripePriceId: 'premium-plan',
      features: [
        'Advanced Reporting',
        'Unlimited users',
        '50GB for each user',
        'Account Manager',
      ],
    },
  ]
}

You can also pass translations strings to your features array, for example:

features: [
  'common:plans.features.feature1',
  'common:plans.features.feature2',
  'common:plans.features.feature3'
],

The configuration above generates the following pricing table:

The same component will be displayed when the user is choosing a subscription plan from the application's settings:


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor