Checkout
Checkout Form
A payment-agnostic checkout: contact and shipping fields with validation, a slot for your payment provider UI, an order summary, and submit states. Wire your own PSP.
form
validation
accessible
Preview
Checkout
1
$129.00Aurora Lamp
Subtotal$129.00
Total$139.32
Installation
Run the shadcn CLI. Dependencies and the shared lib block come with it.
npx shadcn add checkout-formUsage
Import
import { CheckoutForm } from "@/components/lumo/checkout-form"Example
<CheckoutForm
lines={lines}
subtotal={subtotal}
total={total}
paymentSlot={<StripeElements />}
onSubmit={async (values) => createOrder(values)}
/>Props
| Prop | Type | Default | Required |
|---|---|---|---|
| lines | CartLine[] | - | Required |
| subtotal | Money | - | Required |
| shipping | Money | - | |
| tax | Money | - | |
| total | Money | - | |
| paymentSlot | ReactNode | - | |
| onSubmit | (values: CheckoutValues) => void | Promise<void> | - | |
| submitLabel | string | "Place order" |
All props accept standard HTML attributes unless otherwise specified.
Dependencies
Lumo blocks
npm packages
react-hook-formzod@hookform/resolversOwn every line
Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.