PaymentResponse: payerdetailchange 事件

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

已弃用：不再推荐使用此功能。虽然某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

非标准：此功能是非标准的，并且不在标准跟踪中。请勿在面向 Web 的生产网站上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

当用户在填写支付请求表单时更改其个人信息时，支付请求 API会向PaymentResponse对象触发payerdetailchange事件。当付款人检测到错误后重试提交其详细信息时，可能会发生这种情况。

payerdetailchange的事件处理程序应检查表单中已更改的每个值，并确保这些值有效。如果任何值无效，则应配置相应的错误消息，并对PaymentResponse调用retry()方法，以要求用户更新无效的条目。

此事件不可取消，也不会冒泡。

语法

在诸如addEventListener()之类的 method 中使用事件名称，或设置事件处理程序属性。

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

onpayerdetailchange = async (event) => {};

事件类型

一个PaymentRequestUpdateEvent。继承自Event。

Event PaymentRequestUpdateEvent

事件属性

尽管此事件类型为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) => {
  // …
});

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅