PaymentResponse: retry() 方法

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

PaymentResponse 介面的 retry() 方法允許在處理過程中發生錯誤後,要求使用者重試付款。

這可以讓您的應用能夠優雅地處理諸如無效的送貨地址或被拒絕的信用卡等情況。

語法

js
retry(errorFields)

引數

errorFields

一個物件,包含以下屬性

error 可選

對付款錯誤的通用描述,使用者可以透過重試付款來嘗試恢復,可能是在糾正付款資訊中的錯誤之後。error 可以單獨提供,僅提供通用的錯誤訊息,或者與其他屬性結合使用,作為概述,而其他屬性的值則指導使用者修正付款表單中的特定欄位錯誤。

paymentMethod 可選

可能發生的任何特定於付款方法的錯誤。此物件的內容將根據所使用的付款方法而有所不同。

返回值

一個 Promise,當付款成功完成時解析。如果付款再次失敗,該 Promise 將以適當的異常值拒絕。

通常,您會透過呼叫 show() 來使用此方法,然後進入一個迴圈或遞迴函式,該函式檢查 PaymentResponse 是否有錯誤或其他需要重試付款請求的原因。如果需要重試,迴圈會呼叫 retry(),然後返回到迴圈的開始處,在響應返回時進行檢查。只有當用戶取消付款請求或請求成功時,迴圈才會退出。

請參閱下面的 示例 以獲得更全面的示例,但基本概念的輪廓如下:

  1. 建立一個新的 PaymentRequest (new PaymentRequest())

  2. 顯示付款請求 (PaymentRequest.show()

  3. 如果 show() 解析,返回的 PaymentResponse 描述了請求的付款以及使用者選擇的選項。繼續執行以下步驟:

    1. 驗證返回的響應;如果存在任何欄位的值不可接受,請呼叫響應的 complete() 方法,並將值設定為 "fail" 以表示失敗。
    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();

規範

規範
Payment Request API
# dom-paymentresponse-retry

瀏覽器相容性

另見