以编程方式确定 Sagepay 卡详细信息表单是否不完整

问题描述

我正在寻找有关直接结账集成的帮助。 https://developer-eu.elavon.com/docs/opayo/integrate-our-drop-checkout

特别是我正在关注“自定义流程”示例 - 请参阅自定义流程部分的第一个代码示例。 https://developer-eu.elavon.com/docs/opayo/spec/api-reference#section/Custom-flow

总而言之，当使用调用“tokenise”链接时，如何以编程方式确定注入 sp-container（托管在 iframe 中）的 sagepay“card details”表单是否对提交/标记化无效？ 例如当用户没有完成所有必填字段时；姓名、卡号、有效期或 CVC。

当用户点击我们的“完成付款”按钮（在自定义流程示例中称为标记化链接）时，我正在关注调用 sagepayCheckout.tokenise() 的流程。

注意：在我的特殊情况下，实现是 SPA 应用程序的一部分，我不是提交（外部）表单，而是使用 javascipt 处理事情并调用 tokenise 方法。

通常，onTokenise 回调方法会在成功或输入错误的卡详细信息或商户密钥过期时调用。但是当注入的 sagepay 表单本身的有效性失败时，onTokenise 回调永远不会被调用。

注意：由于浏览器安全，我无法检查 iframe 中字段的状态。

好的，注意一些要点：

• sagepay 表单会向用户反馈需要填写的必填字段的错误。
• 当这些错误存在时，sagepayCheckout.tokenise() 不会尝试提交我的（外部）表单。 但似乎没有一种编程方式可以知道是否需要填写必填字段（或不会调用 onTokenise 回调）。

我需要知道表单何时不完整或标记化失败的主要原因是重新启用我们的“完成付款”按钮。目前，我们的按钮在用户点击后立即被禁用，以防止多次点击。

解决方法

我遇到了完全相同的问题。我能够想到的解决此问题的唯一方法是在窗口上使用消息事件侦听器。 sagepay.js 库可能在调用 sagepayCheckout 方法时在 window 对象上注册一个“消息”事件。

旁注：这个方法也没有很好地实现，因为其他任何使用窗口消息事件的东西都会导致 sagpay.js 库抛出错误。

我认为 sagepay.js 的消息事件处理程序的唯一目的是在 iframe 窗口的内容更改时调整其大小。如果您假设 iframe 的内容只会在验证失败时更改，您可以使用它来重置“完成付款”按钮的状态。

我还建议向 Opayo 投诉。这个库很笨重，急需改进。