Pricing

How it works

The Pricing component reads config.pricing.cardsand renders one card per entry. Each card's planName is matched by name to a plan in config.stripe.plans (or the Lemon Squeezy equivalent) to find the correct price ID and wire up the checkout button automatically.

Section heading

pricing: {
  heading: "Simple, honest pricing.",
  subheading: "No surprises. Choose the plan that fits your team today.",
  cards: [ ... ],
}

• heading — the large heading displayed above the cards.
• subheading — a short supporting line below the heading. Keep it to one sentence.

Card fields

{
  planName: "Starter",
  eyebrow: "For individuals",
  description: "Everything you need to get started and start seeing value fast.",
  displayPrice: "$99",
  oldPrice: "$149",
  features: [
    "Core product features",
    "Up to 3 projects",
    "Email support",
  ],
  featured: true,
  badge: "POPULAR",
}

• planName — must match a plan name in config.stripe.plans (or config.lemonsqueezy.plans) exactly, character for character. This is how the component finds the right price ID to send to checkout.
• eyebrow — a small label shown above the plan name. Typically describes who the plan is for: "For individuals", "For growing teams".
• description — one sentence shown below the plan name. Keep it focused on what the buyer gets, not what the plan includes.
• displayPrice — the large price string shown on the card. This is a plain string — format it however you like: "$99", "€149", "Free".
• oldPrice — optional. A strikethrough price string displayed in a lighter color to show the original price before a discount. Remove the key entirely to hide it.
• features — an array of strings rendered as a checklist on the card. Start each item with what the user gets, not a feature name.
• featured — optional boolean. When true, the card gets a highlighted border to draw attention. Use it on your recommended plan.
• badge — optional string displayed in a pill badge above the highlighted card (only shown when featured: true). Common values: "POPULAR", "BEST VALUE".

Checkout flow

When a visitor clicks the checkout button, the component looks up the matching plan by name, takes its price ID, and calls the payment API. If no matching plan is found or the price ID is missing, the card renders a "Coming soon" notice instead of a checkout button — useful while you are still setting up a plan in the provider dashboard.

The billing footnote — "Billed monthly. Cancel anytime." or "Pay once. Lifetime access." — is determined automatically from the plan's mode field ("payment" or "subscription").