Back to components
Commerce component
Checkout Form
Full checkout flow — contact, shipping address, and payment method picker. Zod-validated.
Install
What it does
- Three sections: Contact, Shipping address, Payment method
- Zod + react-hook-form validation on every field
- Configurable payment method list (default: mobile money / card / COD)
- footerContent slot for embedding OrderSummary above the submit
- Returns a single typed CheckoutFormValues on submit
When to use
Use it
Checkout screen — pair with order-summary in the footerContent prop.
Skip it
Profile edit forms (use the Input components directly).
Files & routes added
- components/commerce/checkout-form.tsx