Pricing Stripe 01 is a Server Component that calls the Stripe API at render time to list your active products. Only products with a default price set are displayed — this is the anchor used to resolve monthly and yearly prices. Plans are sorted by a metadata order field, falling back to price amount ascending. The card design matches pricing-04: a dark gradient header for the plan marked popular=true, an overlap body, and a monthly/yearly toggle that only appears when at least one product has both intervals. Feature lists are pulled from Stripe's native marketing_features field. The checkout button triggers a Server Action that creates a Stripe Checkout session and redirects the user to the hosted payment page.
Set a default price on every product you want to display — products without one are filtered out. Add marketing features directly on the product in the Stripe dashboard (no JSON metadata needed). Control the popular highlight, button label, and sort order via product metadata keys: popular=true, cta=Get started, order=1.