## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/payment-method-selector.json ``` ## Usage ```tsx import { PaymentMethodSelector } from "@/components/restaurant/checkout/payment-method-selector" export function PaymentMethodExample() { const [selectedMethod, setSelectedMethod] = useState("card") return ( ) } ``` ## Variants The Payment Method Selector supports different display modes: ### Grid The grid variant displays payment options as a grid of cards. ```tsx ``` ### List The list variant shows payment methods in a vertical list. ```tsx ``` ### Compact The compact variant is optimized for mobile checkout flows. ```tsx ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `selectedMethod` | `string` | - | **Required.** Currently selected payment method | | `onMethodSelect` | `(method: string) => void` | - | **Required.** Callback when method is selected | | `availableMethods` | `PaymentMethod[]` | `["card"]` | Available payment methods | | `savedMethods` | `SavedPaymentMethod[]` | `[]` | User's saved payment methods | | `variant` | `"grid" \| "list" \| "compact"` | `"grid"` | Display variant | | `showSavedOnly` | `boolean` | `false` | Only show saved methods | | `allowNewCard` | `boolean` | `true` | Allow adding new cards | | `showDigitalWallets` | `boolean` | `true` | Show digital wallet options | | `currency` | `string` | `"USD"` | Currency for display | | `locale` | `string` | `"en-US"` | Locale for formatting | | `onAddMethod` | `() => void` | - | Callback to add new method | | `disabled` | `boolean` | `false` | Disable all interactions | | `className` | `string` | - | Additional CSS classes | ## Examples ### With Saved Cards ```tsx const savedCards = [ { id: "pm_1", type: "card", brand: "visa", last4: "4242", expiryMonth: 12, expiryYear: 2025, isDefault: true }, { id: "pm_2", type: "card", brand: "mastercard", last4: "5555", expiryMonth: 8, expiryYear: 2024 } ] openAddCardModal()} /> ``` ### Digital Wallets Only ```tsx ``` ### With Processing Fees ```tsx ``` ### Corporate/Business Payments ```tsx ``` ### International Payments ```tsx ``` ## Features - **Multiple Payment Types**: Cards, wallets, bank transfers, cash - **Saved Payment Methods**: Securely manage saved cards - **Digital Wallets**: Apple Pay, Google Pay, PayPal integration - **Security**: PCI compliant, tokenized card handling - **International**: Multi-currency and local payment methods - **Processing Fees**: Optional fee display per method - **Mobile Optimized**: Touch-friendly payment selection - **Accessibility**: Full keyboard and screen reader support ## Payment Method Types ```tsx type PaymentMethodType = | "card" // Credit/Debit cards | "apple-pay" // Apple Pay | "google-pay" // Google Pay | "paypal" // PayPal | "venmo" // Venmo | "cash" // Cash on delivery | "bank-transfer" // Bank transfer | "invoice" // Business invoice | "gift-card" // Restaurant gift cards | "crypto" // Cryptocurrency interface SavedPaymentMethod { id: string type: PaymentMethodType brand?: string // visa, mastercard, amex, etc. last4?: string // Last 4 digits expiryMonth?: number expiryYear?: number isDefault?: boolean billingAddress?: Address } ``` ## Security Considerations ### PCI Compliance ```tsx // Never handle raw card details // Use tokenization services like Stripe const handleCardInput = async (cardElement) => { const { token, error } = await stripe.createToken(cardElement) if (!error) { // Send token to your server await savePaymentMethod(token.id) } } ``` ### Secure Display ```tsx // Always mask sensitive information const maskCardNumber = (number: string) => { return `•••• •••• •••• ${number.slice(-4)}` } const formatExpiry = (month: number, year: number) => { return `${month.toString().padStart(2, '0')}/${year.toString().slice(-2)}` } ``` ## Integration Examples ### With Stripe ```tsx import { loadStripe } from '@stripe/stripe-js' import { Elements, CardElement } from '@stripe/react-stripe-js' const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY) export function StripePaymentSelector() { return ( } onCardSubmit={handleStripeSubmit} /> ) } ``` ### With PayPal ```tsx import { PayPalButtons } from "@paypal/react-paypal-js" export function PayPalIntegration() { if (selectedMethod === "paypal") { return ( { return actions.order.create({ purchase_units: [{ amount: { value: orderTotal } }] }) }} onApprove={handlePayPalApprove} /> ) } } ``` ## Accessibility The Payment Method Selector follows accessibility best practices: - ARIA labels for all payment options - Keyboard navigation with arrow keys - Screen reader announcements for selections - Clear focus indicators - Error announcements for validation ## Styling The component uses Tailwind CSS classes and can be customized through: - CSS custom properties for brand colors - The `className` prop for wrapper styling - Custom icons for payment methods - Theme variants for different contexts ## Related Components - [Checkout Form](/docs/components/checkout/checkout-form) - Complete checkout flow - [Order Summary](/docs/components/order/order-summary) - Order totals with fees - [Billing Address](/docs/components/checkout/billing-address) - Address management - [Card Input](/docs/components/checkout/card-input) - Secure card entry