PaymentResponse: retry() 方法

安全上下文:此功能仅在安全上下文(HTTPS)中,某些或所有支持的浏览器中可用。

PaymentResponse 接口中,retry() 方法可用于在处理过程中出现错误后请求用户重试支付。

这使您的应用程序能够优雅地处理诸如无效送货地址或信用卡被拒等情况。

语法

js
retry(errorFields)

参数

errorFields

一个对象,具有以下属性

error 可选

对支付错误的总体描述,用户可能可以通过重试支付来尝试恢复,可能是在更正支付信息中的错误后。error 可以单独提供以仅提供通用的错误消息,或者与其他属性一起使用以用作概述,而其他属性的值则引导用户找到支付表单中特定字段的错误。

`paymentMethod 可选

可能发生的任何特定于支付方式的错误。此对象的的内容将根据使用的支付方式而有所不同。

返回值

一个 Promise,当支付成功完成时,此承诺将被解决。如果支付再次失败,则承诺将被适当的异常值拒绝。

通常,您将通过调用 show() 来使用此方法,然后进入循环或递归函数,该函数检查 PaymentResponse 以查找错误或其他需要重试支付请求的原因。如果需要重试,循环将调用 retry(),然后在响应到来时循环返回以检查响应。循环仅在用户取消支付请求或请求成功时退出。

请参阅下面的示例以获取完整的示例,但基本概念,概述形式如下

  1. 创建一个新的 PaymentRequestnew PaymentRequest()
  2. 显示支付请求 (PaymentRequest.show()
  3. 如果 show() 已解决,则返回的 PaymentResponse 将描述所请求的支付以及用户选择的选项。继续执行以下步骤
    1. 验证返回的响应;如果任何字段的值不可接受,请使用 "fail" 的值为响应的 complete() 方法来指示失败。
    2. 如果响应的数据有效且可接受,请调用 complete("success") 以完成支付并进行处理。
  4. 如果 show() 被拒绝,则支付请求失败,通常是因为正在处理其他请求,因为用户代理不支持任何指定的支付方式,或者是因为安全问题。有关详细信息,请参阅show() 的异常列表。调用 complete("fail") 以关闭支付请求。
js
async function handlePayment() {
  const payRequest = new PaymentRequest(methodData, details, options);

  try {
    let payResponse = await payRequest.show();

    while (validate(payResponse)) {
      /* let the user edit the payment information,
         wait until they submit */
      await response.retry();
    }
    await payResponse.complete("success");
  } catch (err) {
    /* handle the exception */
  }
}

示例

js
async function doPaymentRequest() {
  const request = new PaymentRequest(methodData, details, options);
  const response = await request.show();
  await recursiveValidate(request, response);
  await response.complete("success");
}

// Keep validating until the data looks good!
async function recursiveValidate(request, response) {
  const promisesToFixThings = [];
  const errors = await validate(request, response);
  if (!errors) {
    return;
  }
  if (errors.shippingAddress) {
    // "shippingaddresschange" fired at request object
    const promise = fixField(
      request,
      "shippingaddresschange",
      shippingValidator,
    );
    promisesToFixThings.push(promise);
  }
  if (errors.payer) {
    // "payerdetailchange" fired at response object
    const promise = fixField(response, "payerdetailchange", payerValidator);
    promisesToFixThings.push(promise);
  }
  await Promise.all([response.retry(errors), ...promisesToFixThings]);
  await recursiveValidate(request, response);
}

function fixField(requestOrResponse, event, validator) {
  return new Promise((resolve) => {
    // Browser keeps calling this until promise resolves.
    requestOrResponse.addEventListener(event, async function listener(ev) {
      const promiseToValidate = validator(requestOrResponse);
      ev.updateWith(promiseToValidate);
      const errors = await promiseToValidate;
      if (!errors) {
        // yay! fixed!
        event.removeEventListener(event, listener);
        resolve();
      }
    });
  });
}

doPaymentRequest();

规范

规范
支付请求 API
# dom-paymentresponse-retry

浏览器兼容性

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

另请参阅