redirectFromTopWhenInIframe property blocks the redirect process when iFrame is on different domain

[pedrogarmin]

Describe the bug
We are encountering an issue with the web drop-in integration via an iframe in our application. The problem arises with the introduction of the new property redirectFromTopWhenInIframe in version 5.51.0. After applying this property, the redirect button remains blocked with the "Redirecting..." message.

Upon investigation, it appears that the issue originates from the iframe being hosted on a different domain, and because of this window.parent is not accessible from the detectInIframe() method.
As a potential solution, we suggest using document.referrer as well in this context. Please refer to the attached screenshot for clarification.

To Reproduce
Steps to reproduce the behavior:

Create an application which integrates web drop-in through an iFrame and host it on domain X
Use another application hosted on domain Y to integrate the iFrame created above.
Select iDeal payment method and click Go to the issuer bank button
Observe the error with the "Redirecting..." message.
Expected behavior
We expected the redirect button to redirect to the bank account's webpage after clicking the button.

OS: Windows 10 Enterprise
Browser: Chrome
Version: 119.0.6045.160
Web drop-in version: 5.53.2
Adyen NuGet package: 11.2.1

[m1aw]

Hello @pedrogarmin

Can you explain me a bit more of the setup? It's a bit unclear, why the need for different domains. Maybe if we know a bit more of the use case we can arrive to a solution.

For more context we have introduced this configuration redirectFromTopWhenInIframe for scenarios where both in iframes are under the same domain. The reason is because modern browsers do not allow changing iframe location for iframes with different origin for security reasons.

In general we never recommend to use adyen-web inside iframe, as mentioned in the notes for this change #2325 and also in our docs.

[pedrogarmin]

Hello @m1aw,

We have a .NET Core 3 application hosted in Azure which exposes the Adyen's web drop-in component. (adyen.mycompany.com) This application facilitates the communication between various systems in the background.
This application, which is hosted on (adyen.mycompany.com) will be instantiated in an iFrame in various sites hosted on different subdomains (ex. shop.mycompany.com)

Please let me know if you have any suggestions regarding this scenario?

[m1aw]

Hello @pedrogarmin,

Sorry for only getting back to you know. We have renamed the detectInTopIFrame() in the latests version to detectInIframeInSameOrigin(). Hopefully this clarifies a bit of some of these confusions.

The reason why we made this is because we are still limited by the fact that we cannot assign()/redirect the parent to when they the iframe is not in the same domain/subdomain. reference in MDN

The best scenario is to not use Iframe at all and either use a full redirect to a payments page/portal, or just render the components natively in each of the subdomains.

If that's not possible a workaround could be to serve adyen.mycompany.com under diff subdomains.
For example:
adyen.shop.mycompany.com for shop.mycompany.com and;
adyen.other.mycompany.com for other.mycompany.com.

Hopefully this helps.

[m1aw]

Marking it as closed, feel free to reopen if you have any further questions.