Payment gateway timeout on high-latency connections
Description
Users on mobile networks (3G/slow 4G) experience a blank screen during checkout. The payment gateway request times out after 10s, but the UI doesn't handle the timeout gracefully — no error message, no retry option. The order appears to fail silently, but the payment may have actually been processed on the gateway side.
Reproduction Steps
- 1
Open Chrome DevTools → Network → Throttle to 'Slow 3G'
- 2
Navigate to /checkout with items in cart
- 3
Fill in payment details (use test card 4242...)
- 4
Click 'Pay Now' button
- 5
Observe: loading spinner shows for ~10s then disappears
- 6
Screen goes blank — no error message, no confirmation
- 7
Check Network tab: payment request still pending at 15s+
- 8
Check payment gateway dashboard: payment may have succeeded
Root Cause Hypothesis
The fetch call to the payment gateway uses the default timeout (no explicit timeout set). On slow connections, the browser's default TCP timeout kicks in at ~30s, but our loading spinner disappears at 10s due to a separate setTimeout in the UI layer. The mismatch between the actual request lifecycle and the UI state causes the blank screen.