事件钩子
我们可选的事件钩子功能可让您监听 SDK 的内部状态,以便自定义客户的结账体验。
wp:form:ready
当 SDK 被正确初始化时触发。您可以使用该结果来禁用或隐藏可选的预加载器,以便显示表格和字段。
示例事件正文:
Copied!
{
detail: {
is-ready: true,
}
}
{ detail: { is-ready: true, } }
wp:field:change
当您的客户在字段中输入了有效信息时触发。您可以使用该结果来应用样式功能,该功能可告知客户,他们在字段中输入了有效的详情。
示例事件正文:
Copied!
{
detail: {
field: {
name: "expiry",
$element: DOMelement
},
is-valid: true,
}
}
{ detail: { field: { name: "expiry", $element: DOMelement }, is-valid: true, } }
wp:card:change
触发并返回客户的卡类型,该卡类型以客户的卡号为基准。您可以使用该结果来应用样式功能,以便显示您的客户卡品牌的徽标。
示例事件正文:
Copied!
{
detail: {
type: "visa",
}
}
{ detail: { type: "visa", } }
wp:form:change
触发并返回整个表格的有效性。您可以使用返回的值;true
以自动启动创建 session
的进程,或者显示和启用您的提交按钮。
示例事件正文:
Copied!
{
detail: {
is-valid: true,
}
}
{ 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");
}
});
...
... 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"); } }); ...