Translation disclaimer

Documentation is written in English and subsequently translated. This page, therefore, might not have the most up-to-date content. If any questions arise relating to the accuracy of the translated content, please refer to the English version of the page.

Menu

事件钩子

我们可选的事件钩子功能可让您监听 SDK 的内部状态,以便自定义客户的结账体验。


wp:form:ready

当 SDK 被正确初始化时触发。您可以使用该结果来禁用或隐藏可选的预加载器,以便显示表格和字段。

示例事件正文:

Copied!
{
  detail: {
     is-ready: true,
  }
}

wp:field:change

当您的客户在字段中输入了有效信息时触发。您可以使用该结果来应用样式功能,该功能可告知客户,他们在字段中输入了有效的详情。

示例事件正文:

Copied!
{
  detail: {
    field: {
        name: "expiry",
        $element: DOMelement
    },
    is-valid: true,
  }
}

wp:card:change

触发并返回客户的卡类型,该卡类型以客户的卡号为基准。您可以使用该结果来应用样式功能,以便显示您的客户卡品牌的徽标。

示例事件正文:

Copied!
{
  detail: {
    type: "visa",
  }
}

wp:form:change

触发并返回整个表格的有效性。您可以使用返回的值;true 以自动启动创建 session 的进程,或者显示和启用您的提交按钮。

示例事件正文:

Copied!
{
  detail: {
    is-valid: true,
  }
}

以下是一个示例,说明了您如何根据wp:field:change事件的结果利用事件钩子来应用样式特性。

Copied!
...
var form = document.getElementById("card-form");
form.addEventListener("wp:field:change", function(event) {
    if (event.detail["is-valid"]) {
        event.detail.field.$element.classList.add("valid-icon");
        }
    else {
            event.detail.field.$element.classList.remove("valid-icon");
    }
});
  ...