LogoMkSaaS Docs

Credit packages

Configuring credit packages

Expands the credit packages defined in website.tsx with translated content.

src/config/credits-config.tsx
// Returns credit packages with translated content
export function getCreditPackages(): Record<string, CreditPackage> {
  const t = useTranslations('CreditPackages');
  const creditsConfig = websiteConfig.credits;
  const packages: Record<string, CreditPackage> = {};

  // Add translated content to each package
  if (creditsConfig.packages.basic) {
    packages.basic = {
      ...creditsConfig.packages.basic,
      name: t('basic.name'),
      description: t('basic.description'),
    };
  }
  ...
}

Each credit package in the packages object can have the following properties:

PropertyTypeDescription
idstringUnique identifier for the package
namestring?Display name of the package
descriptionstring?Description of the package
popularbooleanWhether this package is recommended
creditsnumberNumber of credits included in the package
priceobjectPrice info, including priceId, amount, currency, allowPromotionCode
expireDaysnumber?Validity period (days) for the credits, optional, undefined means no expire
disabledboolean?Whether to disable this package in UI, optional

Q: What is the difference between the credit packages in website.tsx and the credit packages in credits-config.tsx?

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

Credits

Next Steps

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

Table of Contents