## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/checkout-form.json ``` ## Usage ```tsx import { CheckoutForm } from "@/components/restaurant/checkout/checkout-form" export function CheckoutExample() { return ( console.log("Order placed:", data)} /> ) } ``` ## Variants The Checkout Form component supports different display modes: ### Standard (Default) The standard multi-step checkout with all sections visible. ```tsx ``` ### Express A simplified single-step checkout for returning customers. ```tsx ``` ### Pickup Only Checkout form configured for pickup orders only. ```tsx ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `orderItems` | `OrderItem[]` | - | **Required.** Array of order items | | `subtotal` | `number` | - | **Required.** Subtotal amount | | `tax` | `number` | - | **Required.** Tax amount | | `deliveryFee` | `number` | - | Delivery fee amount | | `serviceFee` | `number` | - | Service fee amount | | `tip` | `number` | - | Tip amount | | `discount` | `number` | - | Discount amount | | `total` | `number` | - | **Required.** Total amount | | `onSubmit` | `(data: CheckoutData) => void` | - | **Required.** Form submission callback | | `variant` | `"standard" \| "express" \| "pickup"` | `"standard"` | Checkout variant | | `customerInfo` | `CustomerInfo` | - | Pre-filled customer information | | `defaultPaymentMethod` | `string` | - | Default payment method | | `pickupLocation` | `string` | - | Pickup location name | | `loading` | `boolean` | `false` | Show loading state | | `disabled` | `boolean` | `false` | Disable form submission | | `className` | `string` | - | Additional CSS classes | ## Examples ### With Customer Information ```tsx ``` ### With Promo Code Applied ```tsx ``` ### Group Order Checkout ```tsx ``` ### Scheduled Delivery ```tsx ``` ### Multiple Payment Methods ```tsx ``` ### Catering Order ```tsx ``` ## Features - **Multi-step Flow**: Guided checkout process with clear progress indicators - **Order Summary**: Real-time order totals and item breakdown - **Customer Details**: Contact information and delivery address collection - **Payment Options**: Support for multiple payment methods - **Delivery Scheduling**: Time slot selection for delivery and pickup - **Validation**: Real-time form validation and error handling - **Mobile Optimized**: Responsive design for all screen sizes - **Guest Checkout**: Allow orders without account creation ## Order Item Types ```tsx interface OrderItem { id: string name: string quantity: number price: number modifiers?: string[] specialInstructions?: string image?: string } interface CheckoutData { customer: { name: string email: string phone: string } delivery: { type: "delivery" | "pickup" address?: string city?: string state?: string zipCode?: string instructions?: string } payment: { method: string tip?: number } scheduling: { asap: boolean scheduledTime?: string } } ``` ## State Management ### With Order Context ```tsx import { useOrder } from "@/contexts/order-context" export function CheckoutPage() { const { orderItems, totals, updateTip } = useOrder() return ( { await submitOrder(data) // Redirect to confirmation }} /> ) } ``` ### With Loading States ```tsx export function CheckoutWithLoading() { const [isSubmitting, setIsSubmitting] = useState(false) const handleCheckout = async (data) => { setIsSubmitting(true) try { await processOrder(data) router.push("/order-confirmation") } catch (error) { toast.error("Order failed. Please try again.") } finally { setIsSubmitting(false) } } return ( ) } ``` ## Validation ### Built-in Validation The component includes comprehensive validation: ```tsx ``` ### Custom Validation ```tsx { const errors = {} if (data.delivery.type === "delivery" && !data.delivery.address) { errors.address = "Delivery address is required" } if (data.payment.method === "card" && !data.payment.cardNumber) { errors.cardNumber = "Card number is required" } return errors }} /> ``` ## Accessibility - **Keyboard Navigation**: Full keyboard support with proper tab order - **Screen Reader Support**: ARIA labels and live regions for status updates - **Form Validation**: Clear error messages and validation states - **Focus Management**: Proper focus handling during step transitions - **High Contrast**: Meets WCAG contrast requirements - **Mobile Accessibility**: Touch-friendly targets and gestures ## Styling The component uses Tailwind CSS classes and can be customized through: - CSS custom properties for colors and spacing - The `className` prop for wrapper styling - Tailwind configuration for theme customization - Step indicator styling variants ## Related Components - [Order Summary](/docs/components/order/order-summary) - Order breakdown display - [Payment Method Selector](/docs/components/checkout/payment-method-selector) - Payment options - [Order Type Toggle](/docs/components/checkout/order-type-toggle) - Delivery method selector - [Time Slot Picker](/docs/components/checkout/time-slot-picker) - Schedule delivery/pickup - [Promo Code Input](/docs/components/checkout/promo-code-input) - Apply discounts