3DS2 Challenge content does not fit - Wallet, Checkout

[garthbrantley]

PRs: #231, #271

Some challenge content is different sizes. Need to support different sizes.

Solution

• Use <iframe> with 390px x 400px contents (This is challengeWindowSize = 2, which is now our platform default)
• Allow scrollbars on iframe if content exceeds those dimensions

Docs about 3DS2 authentication request args

We are currently passing 03 (meaning 500x600 challenge window).

These are the supported options we can pass when initiating:

Field Name	Type	Description
ChallengeWindowSize*	numeric	Determines size of the challenge window. 1 - 250x400 2 - 390x400 3 - 500x600 4 - 600x400 5 - Full Screen (allows for responsive design)

Adyen defaults to 05, meaning 390px x 400px

Issue Report

This is documented on the wallet page.

Presumably the same issue would occur during checkout.

[eugene-shab]

@garthbrantley I can't change the size of the iframe content because I don't have access to it. I increased the height of the iframe itself. Now we need to ask to change the location of the border in this iframe for cards of type PA Y, since when increasing the size the border remained in place

[eugene-shab]

@garthbrantley I don't see ChallengeWindowSize property in payment-fields.js. I even decompress payment-fields.js and I didn't find this property also.

[garthbrantley]

@eugene-shab Please:

• Use <iframe> with 390px x 400px contents (This is challengeWindowSize = 2, which is now our platform default)
• Allow scrollbars on iframe if content exceeds those dimensions

[eugene-shab]

@garthbrantley

• After my investigation, I found that I can't add scroll to the iframe because iframe content has overflow: hidden.

• I don't see how I can use ChallengeWindowSize in our js.

[garthbrantley]

Try using 390px x 400px contents (this is challengeWindowSize = 2).

However make the actualy iframe inside dimensions 590px x 600px. Apprarently there tends to be 100px padding on all sides.

I would also like to run a test using challengeWindowSize = 5, a "full-screen" / responsive version. I will be modifying the PaymentFields hosted widget to support passing the challengeWindowSize as a configuration option.

[eugene-shab]

@garthbrantley
Changed iframe size to 590px x 600px.