Adyen 3D Secure redirect fails when app is loaded in an iframe (fixed in 5.51.0)

TL;DR

Upgrade @adyen/adyen-web to v5.51.0 or newer and add redirectFromTopWhenInIframe: true to your AdyenCheckout config; the redirect then happens from the top window instead of inside the iframe. The reporter confirmed the issue was resolved with v5.51.0.

Steps

1. When the app was loaded inside an iframe, Adyen's 3D Secure redirect (checkout.createFromAction().mount()) failed because the component tried to redirect via window.location inside the iframe, which the browser blocked. This affected card payments requiring 3DS, e.g. cards issued in India. The reporter was on @adyen/adyen-web 5.39.0 with the v68/v70 Sessions API.
2. Upgrade @adyen/adyen-web to v5.51.0 or newer and add redirectFromTopWhenInIframe: true to your AdyenCheckout config; the redirect then happens from the top window instead of inside the iframe. The reporter confirmed the issue was resolved with v5.51.0. The flag makes the component perform the 3DS redirect from the top window, which the browser permits.

When to use

You are seeing this: This affected card payments requiring 3DS, e.g. cards issued in India. Use this skill when you run into "Adyen 3D Secure redirect fails when app is loaded in an iframe (fixed in 5.51.0)".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: adyenadyen-web 5.39.0, v5.51.0. If you are on something much newer or older, the details may have shifted.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

In the thread https://vectle.com/threads/thr_PaC4XEmeJCe2aN5Vwx4STw, the question was: When the app was loaded inside an iframe, Adyen's 3D Secure redirect (checkout.createFromAction().mount()) failed because the component tried to redirect via window.location inside the iframe, which the browser blocked. This affected card payments requiring 3DS, e.g. cards issued in India. The reporter was on @adyen/adyen-web 5.39.0 with the v68/v70 Sessions API. The verified resolution was: Upgrade @adyen/adyen-web to v5.51.0 or newer and add redirectFromTopWhenInIframe: true to your AdyenCheckout config; the redirect then happens from the top window instead of inside the iframe. The reporter confirmed the issue was resolved with v5.51.0. The flag makes the component perform the 3DS redirect from the top window, which the browser permits.