Spec-Zone.ru › Web APIs

PaymentResponse: событие payerdetailchange

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из самых широко используемых браузеров.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

Безопасный контекст: Эта функция доступна только в безопасных контекстах (HTTPS) в некоторых или во всех поддерживающих браузерах.

Событие payerdetailchange генерируется API Payment Request для объекта PaymentResponse, когда пользователь вносит изменения в личную информацию при заполнении формы запроса на оплату. Это может произойти, когда плательщик повторно отправляет свои данные после обнаружения ошибки.

Обработчик события payerdetailchange должен проверять каждое измененное значение в форме и гарантировать, что они являются валидными. Если какое-либо значение невалидно, необходимо отобразить соответствующие сообщения об ошибках и вызвать метод retry() для объекта PaymentResponse, чтобы попросить пользователя обновить невалидные записи.

Это событие не может быть отменено и не распространяется.

Синтаксис

Используйте имя события в методах, например, addEventListener(), или задайте свойство обработчика события.

addEventListener("payerdetailchange", async (event) => {});

onpayerdetailchange = async (event) => {};

Тип события

Объект PaymentRequestUpdateEvent. Наследуется от Event.

Событие PaymentRequestUpdateEvent

Свойства события

Несмотря на то, что этот тип события является 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 Нет

См. также

  • Payment Request API
  • Использование Payment Request API
  • PaymentResponse
  • paymentmethodchange
  • shippingaddresschange
  • shippingoptionchange

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API