CommerceCheckout
Checkout layout: the form on the left and a sticky order summary on the right (stacked on mobile). Layout only — supply the form (contact, shipping, payment) as children and the order review as summary. Presentational and theme-driven.
Checkout
- 1Contact
- 2Shipping
- 3Payment
Installation
pnpm dlx @hex-core/cli add commerce-checkoutAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | The checkout form (contact, shipping, payment fields) — pass your own form with submit handling. |
summaryrequired | ReactNode | — | Order summary (line items + totals) shown in the right column on ≥lg. |
title | ReactNode | — | Optional page heading above the two columns. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use for the checkout page. Put the contact/shipping/payment form (with its own fieldsets, labels, and submit) in children and the order review in summary.
When not to use
Don't use for the cart (use commerce-cart) or a single-field form. Don't wire payment logic into the block — it's layout; submission lives in the form you pass.
Common mistakes
- Inputs without <Label htmlFor> — the block lays out the form but doesn't wire labels for you.
- Putting the submit button only in the summary — keep the primary 'Pay' action in the form's flow.
- Omitting fieldset/legend grouping for contact vs shipping vs payment, hurting form comprehension.
Accessibility
The summary column is an <aside> labelled 'Order summary'. The optional title is the page <h1>. Accessible names depend on the Label/control pairing and fieldset/legend grouping in the form you supply.
Token budget: 650
Verified against @hex-core/components@1.12.0