PaymentResponse: событие payerdetailchange
Ограниченная доступность
Эта функция не является базовой, так как она не работает в некоторых из самых широко используемых браузеров.
Безопасный контекст: Эта функция доступна только в безопасных контекстах (HTTPS) в некоторых или во всех поддерживающих браузерах.
Событие payerdetailchange генерируется API Payment Request для объекта PaymentResponse, когда пользователь вносит изменения в личную информацию при заполнении формы запроса на оплату. Это может произойти, когда плательщик повторно отправляет свои данные после обнаружения ошибки.
Обработчик события payerdetailchange должен проверять каждое измененное значение в форме и гарантировать, что они являются валидными. Если какое-либо значение невалидно, необходимо отобразить соответствующие сообщения об ошибках и вызвать метод retry() для объекта PaymentResponse, чтобы попросить пользователя обновить невалидные записи.
Это событие не может быть отменено и не распространяется.
Синтаксис
Используйте имя события в методах, например, addEventListener(), или задайте свойство обработчика события.
addEventListener("payerdetailchange", async (event) => {});
onpayerdetailchange = async (event) => {};
Тип события
Объект PaymentRequestUpdateEvent. Наследуется от Event.
Свойства события
Несмотря на то, что этот тип события является PaymentRequestUpdateEvent, он не реализует никаких свойств, которых нет уже в Event.
Примеры
В примере ниже, onpayerdetailchange используется для настройки обработчика события payerdetailchange с целью проверки введённой пользователем информации и запроса исправления ошибок.
// 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():
response.addEventListener("payerdetailchange", async (ev) => {
// …
});
Спецификации
| Спецификация |
|---|
| Payment Request API # dfn-payerdetailchange |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
payerdetailchange_event |
78 | 79 | 55 | 47 | 12.1 | 78 | Нет | 43 | 12.2 | 12.0 | Нет |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PaymentResponse/payerdetailchange_event