## About The Checkout Page component provides a complete checkout experience for restaurant orders, including customer information, payment methods, delivery options, and order summary. ## Installation CLI Manual ```bash npx shadcn@latest add checkout-page ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import CheckoutPage from "@/components/ui/checkout/checkout-page" export default function MyCheckout() { const handleOrderSubmit = (orderData) => { console.log("Order submitted:", orderData) } return ( ) } ``` ## Examples ### Default Checkout Page ### With Custom Props ```tsx ``` ## API Reference ### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | onOrderSubmit | (orderData: OrderData) => void | undefined | Callback when order is submitted | | showDeliveryOptions | boolean | true | Whether to show delivery/pickup options | | showTipOptions | boolean | true | Whether to show tip selection | | currency | string | "USD" | Currency code for pricing | ## Features - **Multiple Payment Methods**: Credit card, PayPal, Apple Pay, Google Pay support - **Delivery Options**: Pickup, delivery, and scheduled orders - **Order Summary**: Complete breakdown of items, taxes, and fees - **Customer Information**: Contact details and delivery address - **Tip Calculator**: Customizable tip options - **Form Validation**: Real-time validation with error messages - **Mobile Responsive**: Optimized for all screen sizes ## Accessibility The component includes several accessibility features: - ARIA labels for form controls - Keyboard navigation support - Screen reader friendly structure - Proper focus management - Error announcements ## Styling The component uses Tailwind CSS for styling and integrates with your existing design system.