Payment

CON-074 | Payment Method

Screen Overview

• Type: Full page with radio-style card selection (no bottom navigation)
• Purpose: Allow users to select or add a payment method for their order
• Navigation: Back to CON-070; "Add New Card" navigates to CON-075; Continue returns to CON-070

Component Specs

• Card option: 12px border-radius, 16px padding, white background, 1.5px border on selected
• Radio indicator: 22px circle, 2px border, filled green with white dot when selected
• Check icon: 22px green checkmark on selected card
• Add card option: Dashed 1.5px border, light grey background, + icon in 40px circle
• Phase 2 note: Amber/yellow warning style, 10px border-radius, construction emoji

Payment Methods (Phase 1)

• Saved credit/debit cards: Visa, Mastercard (tokenised via Peach Payments)
• Instant EFT: Via Ozow integration for direct bank transfers
• Phase 2: Apple Pay, Google Pay, SnapScan

Behavior Notes

• Only one payment method can be selected at a time (radio group behaviour)
• Default selection is the most recently used card
• Tapping "Add New Card" navigates to CON-075 (card entry form)
• Instant EFT redirects to Ozow web view during payment processing
• Continue returns to checkout summary with the selected method displayed

Accessibility

• Payment options use role="radio" with aria-checked
• Card numbers are masked for security (showing only last 4 digits)
• Back button has aria-label="Go back"
• All interactive elements are keyboard accessible