SHEET 06
Pricing Table
block / payments / stripe / marketing
Config-driven pricing tiers with a monthly/yearly toggle wired to Stripe Checkout.
- type
- block
- files
- 1
- registry deps
- badge, card, label, switch, @automindz/stripe-checkout
- npm deps
- lucide-react
installs
- components/automindz/pricing-table.tsx
- Tiers, prices and Price IDs live in lib/automindz/pricing.ts
- Yearly discount computed, never hardcoded
- Contact-sales tier when a tier has no Price ID
Tiers live in lib/automindz/pricing.ts (installed by @automindz/stripe-checkout) so they can be edited without touching the component. Pass config to load them from elsewhere.
Variations
one state per section
01
Monthly and yearly
The yearly saving is computed from the two prices; nobody hand-writes “save 17%”. The contact tier appears because it has no Price ID.
fluid
Save up to 17%
02
Signed-in customer
Pass currentTierId and that tier locks: badge, muted surface, disabled CTA. Nothing can re-buy the plan they are on.
fluid
Save up to 17%
03
Single interval
Hide the toggle for annual-only pricing. Prices come from the same config, so the two views can never disagree.
fluid