PaymentResponse：payerdetailchange 事件
當用戶在填寫付款請求表單時更改其個人資訊，Payment Request API 會向 PaymentResponse 物件觸發一個 payerdetailchange 事件。這可能發生在支付方在檢測到錯誤後重試提交其詳細資訊時。
payerdetailchange 的事件處理程式應檢查表單中已更改的每個值，並確保這些值有效。如果任何值無效，應配置適當的錯誤訊息，並在 PaymentResponse 物件上呼叫 retry() 方法，要求使用者更新無效的條目。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("payerdetailchange", (event) => { })
onpayerdetailchange = (event) => { }
事件型別
一個 PaymentRequestUpdateEvent。繼承自 Event。
事件屬性
雖然此事件型別是 PaymentRequestUpdateEvent，但它不實現任何 Event 物件上已有的屬性。
示例
在下面的示例中，onpayerdetailchange 用於設定 payerdetailchange 事件的監聽器，以便驗證使用者輸入的資訊，並要求更正任何錯誤。
js
// Options for PaymentRequest(), indicating that shipping address,
// payer email address, name, and phone number all be collected.
const options = {
requestShipping: true,
requestPayerEmail: true,
requestPayerName: true,
requestPayerPhone: true,
};
const request = new PaymentRequest(methods, details, options);
const response = request.show();
// Get the data from the response
let {
payerName: oldPayerName,
payerEmail: oldPayerEmail,
payerPhone: oldPayerPhone,
} = response;
// Set up a handler for payerdetailchange events, to
// request corrections as needed.
response.onpayerdetailchange = async (ev) => {
const promisesToValidate = [];
const { payerName, payerEmail, payerPhone } = response;
// Validate each value which changed by calling a function
// that validates each type of data, returning a promise which
// resolves if the data is valid.
if (oldPayerName !== payerName) {
promisesToValidate.push(validateName(payerName));
oldPayerName = payerName;
}
if (oldPayerEmail !== payerEmail) {
promisesToValidate.push(validateEmail(payerEmail));
oldPayerEmail = payerEmail;
}
if (oldPayerPhone !== payerPhone) {
promisesToValidate.push(validatePhone(payerPhone));
oldPayerPhone = payerPhone;
}
// As each validation promise resolves, add the results of the
// validation to the errors list
const errors = await Promise.all(promisesToValidate).then((results) =>
results.reduce((errors, result) => Object.assign(errors, result)),
);
// If we found any errors, wait for them to be corrected
if (Object.getOwnPropertyNames(errors).length) {
await response.retry(errors);
} else {
// We have a good payment; send the data to the server
await fetch("/pay-for-things/", { method: "POST", body: response.json() });
response.complete("success");
}
};
await response.retry({
payer: {
email: "invalid domain.",
phone: "invalid number.",
},
});
addEventListener 等效
您也可以使用 addEventListener() 方法來設定事件處理程式。
js
response.addEventListener("payerdetailchange", async (ev) => {
// …
});
規範
| 規範 |
|---|
| Payment Request API # dfn-payerdetailchange |
瀏覽器相容性
載入中…