MkSaaS DocsPrice Plans
Configuring price plans
Expands the price plans defined in website.tsx with translated content.
// 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:
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the plan |
name | string? | Display name of the plan |
description | string? | Description of the plan features |
features | string[]? | List of features included in this plan |
limits | string[]? | List of limits for this plan |
prices | Price[] | List of price options for the plan (monthly, yearly, one-time, etc.) |
isFree | boolean | Whether this is a free plan |
isLifetime | boolean | Whether this is a lifetime (one-time payment) plan |
recommended | boolean? | Whether to highlight this plan as recommended |
disabled | boolean? | 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.
Video Tutorial
Next Steps
Now that you understand the pricing configuration, explore these related topics: