Generic Checkout Flow
Step orchestrator for contact, shipping, payment, and review stages.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-checkout-flowUsage
import { GenericCheckoutFlow } from "@/components/systems/storefront/generic-checkout-flow"
<GenericCheckoutFlow
value={checkoutState}
onChange={setCheckoutState}
validateStep={(stepId, state) => validate(stepId, state)}
onSubmit={submitOrder}
/>API Reference
| Prop | Type | Notes |
|---|---|---|
| steps | CheckoutStep[] | Flow configuration |
| value | CheckoutFlowState | Controlled checkout form state |
| validateStep | (stepId, state) => boolean | Per-step guardrail |
| onSubmit | (state) => Promise<void> | void | Final order submission |