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

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

Whats going on

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.

What actually fixes it

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.

Original thread

https://vectle.com/threads/thr_PaC4XEmeJCe2aN5Vwx4STw

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.