결제 수단 선택

71. 결제 수단 선택 UI Design a payment method selection interface: **Saved Payment Methods** (returning users): - List of saved cards - Card brand icon + last 4 digits - Expiry date - Default badge - Radio selection - Edit/delete actions **Card Display Format**: - Icon: Visa, Mastercard, Amex, etc. - Number: •••• •••• •••• 4242 - Expiry: Expires 12/26 - Cardholder name **Add New Card Section**: - Card number input with icon detection - Expiry: MM/YY format - CVV: 3-4 digits with info tooltip - Name on card - Save card checkbox **Card Input Formatting**: - Auto-spacing: 4444 5555 6666 7777 - Card brand detection on first digits - Icon updates as user types - Validation: Luhn check **Digital Wallets**: - Apple Pay button (Safari/iOS) - Google Pay button - PayPal button - Shop Pay, etc. - Styled per brand guidelines **Wallet Button Display**: - Separate section: "Express checkout" - Branded buttons - Or option within payment method list **Billing Address**: - "Same as shipping" toggle (default on) - If off: show address form - Or minimal fields if needed **Security Indicators**: - Lock icon near card inputs - "Secured by [provider]" badge - PCI compliance note **Error Handling**: - Card declined message - Retry or try different card - Contact support link **Split Payment** (optional): - Gift card + credit card - Gift card balance shown - Remaining charged to card Tech: React + Stripe Elements + React Hook Form + Tailwind