LogoMkSaaS Docs

Price Plans

Configuring price plans

Expands the price plans defined in website.tsx with translated content.

src/config/price-config.tsx
// Returns price plans with translated content
export function getPricePlans(): Record<string, PricePlan> {
  const t = useTranslations('PricePlans');
  const priceConfig = websiteConfig.price;
  const plans: Record<string, PricePlan> = {};
 
  // Add translated content to each plan
  if (priceConfig.plans.free) {
    plans.free = {
      ...priceConfig.plans.free,
      name: t('free.name'),
      description: t('free.description'),
      features: [
        t('free.features.feature-1'),
        t('free.features.feature-2'),
        t('free.features.feature-3'),
        t('free.features.feature-4'),
      ],
      limits: [
        t('free.limits.limit-1'),
        t('free.limits.limit-2'),
        t('free.limits.limit-3'),
      ],
    };
  }
  ...
}

Each price plan in the plans object can have the following properties:

PropertyTypeDescription
idstringUnique identifier for the plan
namestring?Display name of the plan
descriptionstring?Description of the plan features
featuresstring[]?List of features included in this plan
limitsstring[]?List of limits for this plan
pricesPrice[]List of price options for the plan (monthly, yearly, one-time, etc.)
isFreebooleanWhether this is a free plan
isLifetimebooleanWhether this is a lifetime (one-time payment) plan
recommendedboolean?Whether to highlight this plan as recommended
disabledboolean?Whether to disable this plan in UI

Q: What is the difference between the price configuration in website.tsx and the price plans in price-config.tsx?

A: The website.tsx file defines the basic information about the price plans, excluding locale-specific information, whereas the price-config.tsx file enhances these plans by adding translated content.

Next Steps

Now that you understand the pricing configuration, explore these related topics:

Table of Contents