The checkout page came back from design and it looked genuinely beautiful. Clean type, calm spacing, one button. Everyone on the call liked it.
Then we wired it to the card rails.
A real payment does not go click, done. It sits pending for a few seconds, sometimes longer. Sometimes the bank asks for a confirmation step. Sometimes it declines for a reason only the issuer knows. None of that existed in the design. There was one screen, for the one case where everything works.
So people sat looking at a frozen, beautiful page and did the only thing left to them: they pressed the button again. Then they wrote to support, certain they had been charged twice. Most of them had not been, but we could not show that quickly, because the page never told anyone which attempt they were on.
The fix was not visual. We wrote down every state the money can be in, pending, needs confirmation, declined, timed out, session expired, already paid, and designed a screen for each, with an idempotency key behind it so a second press cannot turn into a second charge.
Now we ask for the state list before we ask for the layout. A page that only renders success is a demo and not a checkout.
If someone is building your site right now, it is worth counting how many of its screens exist for the moments when something goes wrong.