本頁面由 Cloud Translation API 翻譯而成。

付款交易流程

瞭解商家如何整合付款應用程式，以及付款交易如何與 Payment Request API 搭配運作。

Eiji Kitamura

Milica Mihajlija

Web Payments API 是首次內建瀏覽器內建的付款功能。有了網路付款功能，商家就能更輕鬆地整合付款應用程式，同時享有簡便又安全的客戶體驗。

如要進一步瞭解使用網路付款的優點，請參閱「透過網路付款功能讓應用程式支援付款應用程式」。

本文將引導您完成商家網站上的付款交易，並協助您瞭解付款應用程式整合的運作方式。

這項程序包含 6 個步驟：

商家進行付款交易。
商家會顯示付款按鈕。
客戶按下付款按鈕。
瀏覽器啟動付款應用程式。
如果客戶變更任何詳細資料 (例如運送選項或地址)，商家就會更新交易明細來反映變更。
在客戶確認購買交易後，商家會驗證付款並完成交易。

步驟 1：商家發起付款交易

客戶決定進行購買交易時，商家會建構 PaymentRequest 物件來啟動付款交易。這個物件包含交易的重要資訊：

可接受的付款方式及其資料，以處理交易。
詳細資料，例如總價 (必填) 和商品相關資訊。
商家可要求提供運送資訊 (如運送地址和運送選項) 的選項。
商家也可以要求帳單地址、付款人姓名、電子郵件和電話號碼。
商家也可在 PaymentRequest 中加入選用的運送類型 (shipping、delivery 或 pickup)。付款應用程式可利用這項資訊，提示在 UI 中顯示正確的標籤。

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

包含交易 ID

部分付款處理常式可能會要求商家提供預先核發的交易 ID，做為交易資訊的一部分。一般整合功能包括商家與付款處理常式伺服器之間的通訊，以便預留總價。這樣可以防止惡意客戶在交易結束時操控價格，也無法透過驗證來欺騙商家。

商家可以在 PaymentMethodData 物件的 data 屬性中傳遞交易 ID。

提供交易資訊後，瀏覽器會根據付款方式 ID，完成 PaymentRequest 中指定的付款應用程式探索程序。這樣一來，當商家準備好繼續進行交易時，瀏覽器就能判斷要啟動的付款應用程式。

如要瞭解探索程序的運作方式，請參閱「設定付款方式」一文。

步驟 2：商家顯示付款按鈕

商家可以支援多種付款方式，但只應在客戶實際可用的付款按鈕中顯示付款按鈕。顯示無法使用的付款按鈕，會對使用者體驗造成負面影響。如果商家可預測 PaymentRequest 物件中指定的付款方式不適用於客戶，他們就能提供備用解決方案或完全不顯示該按鈕。

商家可以使用 PaymentRequest 執行個體查詢客戶是否擁有可用的付款應用程式。

客戶是否提供付款應用程式？

如果客戶的裝置中有付款應用程式，PaymentRequest 的 canMakePayment() 方法會傳回 true。「可用」表示有支援該付款方式的付款應用程式，且已安裝平台專屬的付款應用程式，或是網頁型付款應用程式已可註冊。

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

步驟 3：顧客按下付款按鈕

客戶按下付款按鈕時，商家會呼叫 PaymentRequest 例項的 show() 方法，立即觸發付款 UI 的啟動作業。

如果最終總價是動態設定 (例如從伺服器擷取)，商家可以延後啟動付款 UI，直到總價不明為止。

延後啟動付款使用者介面

請查看如何延遲付款 UI 示範，直到確定最終總價為止。

為了延後付款 UI，商家會將承諾傳送至 show() 方法。瀏覽器會顯示載入指標，直到承諾解決且交易準備開始為止。

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

如果沒有為 show() 指定承諾的引數，瀏覽器會立即啟動付款 UI。

步驟 4：瀏覽器啟動付款應用程式

瀏覽器可以啟動平台專屬或網頁式付款應用程式 (您可以進一步瞭解 Chrome 如何判斷要啟動哪個付款應用程式)。

付款應用程式的建構方式通常是由開發人員組成，但從商家傳送至商家的事件以及與這些事件傳遞的資料結構，都會標準化。

付款應用程式啟動後，將接收傳送至步驟 1 中 PaymentRequest 物件的交易資訊，包括：

付款方式資料
總價
付款方式

付款應用程式會使用交易資訊為其 UI 加上標籤。

步驟 5：商家如何根據客戶的動作更新交易明細

客戶可以選擇在付款應用程式中變更交易詳細資料，例如付款方式、運送選項。客戶進行變更時，商家會收到變更事件並更新交易詳細資料。

商家可接收的事件分為四種類型：

付款方式變更事件
運送地址變更事件
運送選項變更事件
商家驗證事件

付款方式變更事件

付款應用程式可以支援多種付款方式，且商家可能會根據客戶的選擇提供特別折扣。如要涵蓋此用途，付款方式變更事件可以通知商家新的付款方式，以便使用者更新總價並提供折扣，並傳回付款應用程式。

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

運送地址變更事件

付款應用程式可以選擇性提供客戶的運送地址。這樣客戶就不必在表單中手動輸入任何詳細資料，而且他們可以直接將運送地址儲存在偏好的付款應用程式，而不是在多個不同的商家網站儲存。

如果客戶在交易開始後更新付款應用程式中的運送地址，系統就會將 'shippingaddresschange' 事件傳送給商家。此事件可幫助商家根據新地址決定運費、更新總價，並傳回付款應用程式。

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

如果商家無法出貨至更新後的地址，則可在傳回至付款應用程式的交易詳細資料中加入錯誤參數，藉此提供錯誤訊息。

運送選項變更事件

商家可以向客戶提供多種運送選項，並將該選項委派給付款應用程式。運送選項會以清單形式顯示，供客戶選取。例如：

標準配送 - 免運費
快速到貨 - 5 美元

客戶在付款應用程式中更新運送選項時，系統會將 'shippingoptionchange' 事件傳送給商家。接著，商家可以確認運費、更新總價，並將總價傳回至付款應用程式。

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

商家也可以根據客戶的運送地址動態修改運送選項。如果商家想為國內和國際客戶提供不同的運送選項組合，這項功能就非常實用。

商家驗證事件

為了提升安全性，付款應用程式可以在前往付款流程之前執行商家驗證。驗證機制的設計是由付款應用程式設計，但商家驗證事件的作用是告知商家，可用來驗證自己的網址。

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

步驟 6：商家驗證付款並完成交易

客戶成功授權付款後，show() 方法會傳回可解析為 PaymentResponse 的承諾。PaymentResponse 物件包含下列資訊：

付款結果詳細資料
運送地址
運送選項
聯絡資訊

此時，瀏覽器 UI 可能仍會顯示載入指標，表示交易尚未完成。

如果付款應用程式因付款失敗或錯誤而終止，show() 傳回的承諾會拒絕，並終止付款交易。

處理及驗證付款

PaymentResponse 中的 details 是付款應用程式傳回的付款憑證物件。商家可使用憑證來處理或驗證付款。此重要流程如何影響付款處理流程。

完成或重試交易

商家判斷交易是否成功或失敗後，可以採取下列任一做法：

呼叫 .complete() 方法來完成交易並關閉載入指標。
請客戶呼叫 retry() 方法，然後再試一次。

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

後續步驟

請參閱「設定付款方式」，進一步瞭解如何宣告付款方式 ID。
如要瞭解如何建構平台專用的付款應用程式，請參閱 Android 付款應用程式開發人員指南。
如要瞭解如何建構網頁式付款應用程式，請參閱網頁式付款應用程式開發人員指南。