Add Card

CON-075 | Add Card

Screen Overview

• Type: Form page with card preview and sticky CTA (no bottom navigation)
• Purpose: Allow users to securely add a new credit or debit card for payment
• Navigation: Back to CON-074 (Payment Method); successful add returns to CON-074 with new card selected

Component Specs

• Secure badge: Green background #F0FDF4, green border, lock icon, centred text
• Card preview: 190px height, dark green gradient, 16px border-radius, gold chip, card data auto-fills
• Form inputs: 48px height, 10px border-radius, 1.5px border, focus state with green border + shadow
• CVV info icon: 20px circle with "?" tooltip explaining the security code
• Checkbox: 20px, accent-color set to primary green
• Powered by: Peach Payments branding placeholder at bottom

Behavior Notes

• Card preview updates in real-time as user types card number, name, and expiry
• Card type detection: icon changes to Visa/Mastercard/Amex based on number prefix
• Card number auto-formats with spaces every 4 digits
• Expiry auto-formats to MM/YY with slash insertion
• CVV is masked (password field) for security
• "Save card" checkbox is checked by default; unchecking uses card for one-time payment only
• Validation: all fields required, card number Luhn check, expiry must be future date

Security

• Card tokenisation handled by Peach Payments SDK
• CVV is never stored; used only for transaction authorisation
• PCI DSS compliance ensured through Peach Payments hosted fields
• 3D Secure authentication may be triggered on first use

Accessibility

• All form fields have associated <label> elements
• Inputs use appropriate autocomplete attributes for autofill
• CVV info icon has title attribute for tooltip
• Card preview is decorative and does not convey unique information