CheckoutPro

• Details, shipping, payment
• Live card preview
• Promo codes
• Order confirmation

• Stores and SaaS purchases where you control the checkout UI.

• If your provider offers hosted checkout, prefer it for card handling.

Import it from @/components/blocks/checkout after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { Checkout } from "@/components/blocks/checkout";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Checkout />
    </main>
  );
}

• Steps use the stepper with aria-current; errors use role="alert".
• Shipping options are a radio group.

• Steps slide in the direction you move; discounts animate into the summary; confirmation pops.

• The summary moves below the form under 1024px.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Send card data only to your payment provider; demo code: WELCOME15, test card 4242 4242 4242 4242.