Processing your payment...

Please don't close the app

Order Reference

#FFM-20260211-001

CON-076 | Payment Processing

Screen Overview

Type: Fullscreen modal overlay (no navigation, no buttons, no bottom nav)
Purpose: Visual feedback while payment is being processed by the payment gateway
Navigation: Auto-transitions to CON-078 (Order Confirmation) on success, or CON-077 (Payment Failed) on failure

Component Specs

Background: Dark green gradient from #043F2D to #064E3B
Spinner: 64px, 4px border, lime accent top border, 1s rotation
Pulse rings: Two concentric rings pulsing outward at 2s interval, staggered by 0.5s
Title: Alexandria 22px Bold, off-white
Subtitle: 15px, 70% opacity off-white
Order reference: Semi-transparent card, lime accent text, uppercase label

Behavior Notes

This screen has NO user-interactive elements; it is a blocking modal
Back button / hardware back is disabled during processing
Timeout: if no response within 30 seconds, show "Taking longer than expected" message with retry
On success: auto-navigate to CON-078 (Order Confirmation)
On failure: auto-navigate to CON-077 (Payment Failed)
3D Secure may open a web view overlay on top of this screen

Accessibility

Spinner has role="status" and aria-label="Processing payment"
Screen reader announces "Processing your payment, please wait"
No interactive elements to prevent accidental interruption