# Shadcn Checkout blocks

> Checkout flows with shipping details, payment forms, and order confirmation steps.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/checkout
- Blocks: 7
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A storefront checkout that takes a shopper from contact and shipping to payment beside the order total
- A one page pay screen, with typed shipping and card fields or a saved card confirmed by its CVV
- A prepaid AI token or usage credit purchase for a workspace, with billing details and no shipping

## When not to use

- A business task in numbered steps, such as vendor intake or an invoice, with no cart: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)
- Step markers and panel switching alone, wrapped around a form you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- First run account or workspace setup right after signup, with nothing to pay for: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)

## Agent notes

- No block calls a payment API: the final button fakes success with `window.setTimeout` or has no handler, so submit the order from there
- Card number and CVC are plain inputs with `cc-number` and `cc-csc` autofill; swap in your processor's hosted fields so raw card data stays off your app
- Each page.tsx wraps the block in a `min-h-svh` element and the root component sets its own max width; remove both inside your own layout

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 5 of 7 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 3 of 7 blocks (the docs follow the latest Motion, with no React API break since v12)

## Blocks

- [Sign-In Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-1.md): Multi-Step Checkout with Stepper Progress and Sticky Order Summary. Best for sign in and new account panels on the first step, card number and expiry that format as you type, and a New Order reset once placed.
- [Trust Strip Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-2.md): Multi-step checkout form with stepper and sticky order summary. Best for a 4 step flow with one create account checkbox, a tag icon promo field in a Card summary and a returns and free shipping trust strip.
- [AI Credit Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-3.md): Multi-step AI token credit checkout with stepper and auto top-up controls. Best for prepaid AI tokens from 4 providers in packs priced per 1M, with auto top-up and usage alert switches and card, wallet or invoice payment.
- [Express Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-4.md): Two-pane express checkout with saved details and order summary rail. Best for a single product confirmed with only the CVV of a saved Visa, with Edit on each saved row and new card fields under a disclosure.
- [Order Review Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-5.md): Four-step ecommerce checkout with stepper and order summary sidebar. Best for an order summary in a Frame whose footer badge counts the steps, then reads Ready to place and Order placed, beside sign in panels.
- [One-Page Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-6.md): Two-column checkout with order summary and payment form. Best for a single page of cards with Apple Pay over a card form, 5 payment brand logos, help tooltips and a delivery method select.
- [Social Sign-In Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-7.md): Multi-step checkout with stepper navigation and live order summary. Best for social sign in with Apple, Google and X, a typed street address form, thin bar progress and a Place order button showing the total.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.