Error: ERROR: secured field iframes have failed to load

[jenersigua31]

Describe the bug
encountered a script error when trying to create a secured fields.

const cardComponent = checkout
.create('securedfields', customConfig)
.mount("#id");

When LastPass is disabled, the Adyen web library functions correctly without any errors. However, with LastPass enabled, the secured field iframes consistently fail to load.

Screenshots
Issue only occurs when LastPass chrome extension is enabled

Infinite Loading

Script Error

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 125.0.6422.142

[mehdi-ghezal]

Similar issue here with Prestashop module that (I believe) use Adyen-Web package.

The page keep loading with Adyen Frame consuming resources and after some time the form is shown but the secured fields are not usable.

Here the consumption :

Here the console message about unusable field

[sponglord]

@jenersigua31 - I am not able to recreate this issue with the hardware that I have at my disposal.

• I've added LastPass to Chrome (v109.0.5414.120)
• on a Windows 7 machine.
• I've then added a credit card to use for autofill
• and gone to a site running AdyenWeb v 5.60.0

And everything works as expected.
(I've also installed in on a modern Mac, also without problems)

Do you have any more details about your use case?

• What version of AdyenWeb are you using ?
• What are you using LastPass for? Also credit card autofill?

[jenersigua31]

@sponglord
Actually, other user also encountered this issue using other browsers, Firefox, Edge,
But on my end, the issue only occurs when LastPass extension is enabled,

Im not using credit card autofill. I'm using versions 5.43.0 and 5.66.1,

I just followed the implementation on adyen documentation.
https://docs.adyen.com/payment-methods/cards/custom-card-integration/

[cw-gsilva]

I've got the same error while executing checkout.update() with a new amount. It happens a few seconds after checkout.update(), every time and in different environments.

We create the checkout with AdyenCheckout and passing paymentMethodsResponse from the Adyen API and it mounts multiple payment method components, including givex.

I tried two versions without success:

• 5.55.1
• 5.67.0

We eventually got rid of this error by downgrading it to version 5.16.2

[a-kharunzha]

I have a similar issue, but with '.create('dropin')', not secured fields.
Got it after updating from 4.9 to 5.67 on already working integration, where iframes for credit card fields stopped working because crypto.subtle is not defined in the iframe.
Chrome.
Going down to version 5.16.2 didn't work

[m1aw]

If the error is about crypto[1] it might be due to your development environment not being a secure context.
Which means for Chrome for example, it needs to be either localhost or https [2].

[1] https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
[2] https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts

[a-kharunzha]

If the error is about crypto[1] it might be due to your development environment not being a secure context.
Which means for Chrome for example, it needs to be either localhost or https [2].

It is valid for a case if the code missing crypto was executed on my site's page, while it is executed in the iframe of Adyen, which is being loaded over https.

And before writing my message, I've checked, even in the local environment, the window.crypto.subtle is defined

[sponglord]

@a-kharunzha
Are you running a dev environment at a custom http environment when you see this window.crypto.subtle error?
By custom http I mean something like http://mydevenv.com (as opposed to http://localhost)

[berinaptula]

Not sure if your issue still persists, but we recently encountered the same problem in the company I work for, and realised that we had the following attribute in Cookiebot:
script.setAttribute('data-blockingmode', 'auto');.

Removing it resolved the issue. Perhaps something to look into and check whether it is related