Building Our 3D Secure Flow: A Technical Postmortem

When we launched card payments, our 3D Secure flow used an iframe overlay to keep users on the checkout page during authentication. We quickly discovered that many banks block iframes with X-Frame-Options headers, causing the authentication to fail silently.

We replaced the iframe approach with a full browser redirect. When a card requires 3DS authentication, we redirect the user to the bank's ACS page, and the bank redirects back to our callback URL with the authentication result.

The redirect approach has a new challenge: users might close the browser tab during authentication. We added a polling mechanism on the checkout page that checks the transaction status every three seconds and shows a resume prompt if the user returns.

Callback reconciliation was another learning. The bank's callback includes provisional status in URL parameters, but the definitive status comes via server-to-server webhook. We display the provisional status immediately and update it when the webhook arrives.