Pricing Box

The kit provides a component PricingBox that you can use to display the pricing of your plans. You need to pass a `PricingTable’ to it.

PricingTable

The PricingTable is a collection of a following fields. Configure the multiple pricing tables as shown below in file src/Billing/PricingBox.tsx.

export type PricingTable = {
  title: string;
  price: number;
  originalPrice?: number;
  currency?: string;
  periodLabel?: string;
  features: PricingFeature[];
  cta: {
    label: string;
    href: string;
    brand?: boolean;
  };
  popular?: boolean;
  offerLabel?: string;
};
 
...
 
export const pricingTables: Record<string, PricingTable> = {
  [PLAN_LTD.id]: {
    ...getDefaultPricingTable(PLAN_LTD),
    originalPrice: 96,
    currency: "$",
    periodLabel: "just once!",
    features: [
      { label: "NextAuth authentication" },
      { label: "Prisma ORM" },
      { label: "Chakra for UI" },
      { label: "Resend and React Eamil" },
      {
        label: "Markdown based blog",
      },
      { label: "Lemonsqueezy + Stripe", new: true },
      { label: "Documentation", new: true },
      { label: "One year of updates" },
    ],
    cta: {
      label: "Purchase",
      href: "https://beestack.lemonsqueezy.com/buy/55121f98-760d-4eaf-890a-24a23c807399",
      brand: true,
    },
    popular: true,
  },
  [PLAN_TOPUP.id]: {
    ...getDefaultPricingTable(PLAN_TOPUP),
    originalPrice: 10,
    currency: "$",
    periodLabel: "once",
    features: [
      { label: "100 credits" },
    ],
  },
};

View

Once you have configured the pricingTables, you can use the PricingBox component to display the pricing of your plans wherever you want.

<PricingBox pricingTables={pricingTables} />

💵 Topup ⚙️ Setup Blog