Payment Failed

CON-077 | Payment Failed

Screen Overview

• Type: Error state screen (no bottom navigation)
• Purpose: Inform user that payment failed and provide recovery options
• Navigation: "Try Again" re-triggers CON-076 (Payment Processing); "Change Payment Method" goes to CON-074

Component Specs

• Error icon: 88px circle, red background #FEE2E2, red X icon #DC2626
• Title: Alexandria 24px Bold, dark text
• Message: 15px, grey text, max-width 300px, centred
• Error reason: 12px, grey background #F9FAFB, 8px border-radius
• Primary button (Try Again): Lime accent, 54px height, 12px border-radius
• Secondary button (Change Payment): White with 2px green border, same dimensions
• Support link: 14px, underlined, primary green colour

Error Scenarios

• Card declined: "Card declined by issuing bank" (most common)
• Insufficient funds: "Insufficient funds available"
• Expired card: "Card has expired"
• 3D Secure failed: "3D Secure authentication failed"
• Network error: "Connection timed out. Please check your internet and try again."
• Generic: "An unexpected error occurred. Please try again."

Behavior Notes

• "Try Again" re-initiates the payment with the same card and order
• "Change Payment Method" navigates to CON-074 to select a different card
• "Contact Support" opens a support chat or mailto link
• Order/cart is preserved; no items are lost on payment failure
• Error reason text is dynamic, provided by the payment gateway response

Accessibility

• Error icon has role="img" semantics through the SVG
• Screen reader announces "Payment Failed" immediately on load
• Both action buttons are clearly labelled with distinct actions
• Support link provides alternative recovery path