## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/payment-method-modal.json ``` ## Usage ```tsx import PaymentMethodModal from "@/components/ui/modals/payment-method-modal"; export function CheckoutPage() { const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false); const handlePaymentSave = (paymentData) => { console.log('Payment method saved:', paymentData); setIsPaymentModalOpen(false); }; return (

setIsPaymentModalOpen(false)} onSave={handlePaymentSave} initialPaymentType="card" />

); } ``` ## Features - **Multi-step workflow** - Guides users through payment method selection and details - **Credit card validation** - Real-time formatting and validation of card details - **Multiple payment types** - Support for cards, PayPal, and Venmo - **Security indicators** - Visual cues for secure payment processing - **Save for future** - Option to store payment methods for repeat orders - **Accessibility** - Full keyboard navigation and screen reader support - **Dark mode** - Complete dark theme compatibility - **Form validation** - Real-time validation with visual feedback ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `isOpen` | `boolean` | - | **Required.** Controls modal visibility | | `onClose` | `() => void` | - | **Required.** Called when modal is closed | | `onSave` | `(paymentData) => void` | - | **Required.** Called when payment method is saved | | `initialPaymentType` | `"card" \| "paypal" \| "venmo"` | `"card"` | Default payment type selection | ## Payment Data Structure When a payment method is saved, the `onSave` callback receives: ```tsx interface PaymentData { type: "card" | "paypal" | "venmo" cardData?: { number: string expiryMonth: string expiryYear: string cvv: string name: string zipCode: string } saveForFuture: boolean } ``` ## Examples ### Basic Implementation ```tsx function PaymentSetup() { const [isOpen, setIsOpen] = useState(false); const [paymentMethods, setPaymentMethods] = useState([]); const handleSave = (paymentData) => { setPaymentMethods(prev => [...prev, paymentData]); setIsOpen(false); toast.success('Payment method added successfully'); }; return ( <> setIsOpen(false)} onSave={handleSave} /> ); } ``` ### With Initial Payment Type ```tsx ``` ### Checkout Integration ```tsx function CheckoutForm() { const [showPaymentModal, setShowPaymentModal] = useState(false); const [selectedPayment, setSelectedPayment] = useState(null); const handlePaymentAdd = (paymentData) => { setSelectedPayment(paymentData); setShowPaymentModal(false); // Process payment or save to user profile if (paymentData.saveForFuture) { savePaymentMethod(paymentData); } }; return (

{selectedPayment ? ( ) : ( )} setShowPaymentModal(false)} onSave={handlePaymentAdd} />

); } ``` ## Payment Types ### Credit/Debit Cards - Supports all major card types - Real-time number formatting (spaces every 4 digits) - CVV validation (3-4 digits) - Expiry date selection - ZIP code for billing verification - Cardholder name validation ### PayPal Integration - Redirects to PayPal for authentication - Secure OAuth flow - Save PayPal account for future use ### Venmo Integration - Redirects to Venmo for authentication - Mobile-optimized experience - Quick payment authorization ## Validation Rules ### Card Number - Minimum 13 digits - Maximum 16 digits - Automatic formatting with spaces - Luhn algorithm validation (can be extended) ### Expiry Date - Month: 01-12 - Year: Current year + 20 years - Validates for future dates ### CVV - 3-4 digits depending on card type - Numeric input only ### ZIP Code - Exactly 5 digits - US postal code format ## Security Features - **Encryption notice** - Visual indicator of secure processing - **No plain text storage** - Sensitive data handling guidelines - **PCI compliance ready** - Structured for secure implementations - **Input validation** - Prevents invalid data entry - **Secure forms** - Proper input types and autocomplete attributes ## Accessibility - **ARIA labels** - Comprehensive screen reader support - **Keyboard navigation** - Full modal navigation without mouse - **Focus management** - Proper focus trapping and restoration - **High contrast** - Works with accessibility themes - **Error announcements** - Screen reader validation feedback ## Styling The component uses semantic CSS custom properties that adapt to your theme: - `bg-background` - Modal background color - `text-foreground` - Primary text color - `text-muted-foreground` - Secondary text color - `border` - Border colors that adapt to theme - Custom focus rings and hover states ## Error Handling ```tsx const handleSave = (paymentData) => { try { // Validate payment data if (paymentData.type === 'card' && !validateCard(paymentData.cardData)) { throw new Error('Invalid card details'); } // Save payment method await savePaymentMethod(paymentData); setIsOpen(false); toast.success('Payment method added'); } catch (error) { toast.error(error.message); } }; ``` ## Related Components - [Checkout Form](/docs/components/checkout/checkout-form) - Complete checkout flow - [Payment Method Selector](/docs/components/forms/payment-method-selector) - For selecting saved methods - [Card Input](/docs/components/forms/card-input) - Standalone card input component

Payment Method Modal