3D 安全认证 iframe 高度答案

【问题标题】：3D secure authentication iframe height3D 安全认证 iframe 高度
【发布时间】：2020-01-09 09:02:45
【问题描述】：

我最近使用 iFrame 在我的结帐中实施了 3D 身份验证，作为 Sage Pay 集成的一部分。然后，我使用我的英国银行卡 (Lloyds & HSBC) 进行了实时支付，可以看到银行的 3D 身份验证页面非常适合 400 像素 X 450 像素的 iFrame。

现在看来，DE 用户难以通过 3D 身份验证存在问题模式，在我提供的一个示例（见下文）中，我可以看到滚动条已激活。我突然想到，他们可能因为没有向下滚动而错误地错过了银行认证页面的某些部分。

我的问题是；在显示银行的 3D 身份验证页面时，iframe 的大小是否有一般的经验法则？此外，在这种情况下，客户要求我们删除默认 iframe 边框，从可用性的角度来看，您是否认为这会更难发现页面还有更多内容？

这是客户银行要求 3D 身份验证的 DE 示例。我不知道是否还有更多可以向下滚动，因为我后来才得到截图，对这家银行的认证页面不熟悉；

【问题讨论】：

标签： iframe standards usability opayo 3d-secure

【解决方案1】：

我已将 iFrame 宽度设置为 100%。

也许这会拉伸文本并且它可能适合。

如果一切顺利，下周末使用 3DSv2 可能会变得更好，因为我们可以设置挑战窗口的尺寸：

Dimensions of the challenge window that has been displayed to the cardholder.
The ACS shall reply with content that is formatted to appropriately render the
challenge UI in this window, to provide the best possible user experience. 
Preconfigured sizes are width x height in pixels of the window displayed in the
Cardholder browser window.

01 = 250 x 400
02 = 390 x 400
03 = 500 x 600
04 = 600 x 400
05 = Full screen

我的 iFrame 上没有边框：

<iframe src="/URL.aspx" width="100%" height="400px"></iframe>

您的屏幕截图是针对 3DSecure v1 SagePay 协议 3.0 的，对吧？

【讨论】：

我在 Modal 中使用 iFrame。这对于手机来说并不理想，但它可能会更清楚地说明必须滚动。
我对边框很好奇，发现可以设置一个类似 class="border-0" 的类（Bootstrap 4.3.1 = { border: 0 !important; } ）