IFrame.scss styles not being applied

[PG-RichT]

Describe the bug
Following the removal of the inline IFrame styles in 5.52.0 (#2343), the secure field iFrames are not rendering correctly, the IFrame.scss styles are not being applied.

To Reproduce
Steps to reproduce the behavior:

1. Install Adyen Web NPM 5.51.0
2. Admire nicely styled secure fields
3. Upgrade to Adyen Web NPM 5.55.1
4. Cower in fear of the ugly, massive and unwieldy forms

Expected behavior
Should look like this:

Not this:

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 120.0.6099.72

[longyulongyu]

@PG-RichT
We moved the inline styles applied to iframe to separate scss files, could you check if you have imported the adyen.css file?
Or you can add the following to your stylesheets as I see that you are doing customizations on the UI:

.js-iframe {
    border: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.adyen-checkout__iframe{
    border: 0;
}

[longyulongyu]

@PG-RichT

Hope the solution works for you.
Just out of curiosity, did you integrate without importing the adyen.css file?

[PG-RichT]

@longyulongyu Thanks for your help. We do appear to have integrated the package without using the adyen.css file. We'll update our own stylesheets for ease.