付款交易流程

瞭解商家如何整合付款應用程式，以及付款交易的運作方式 透過 Payment Request API 擷取要求清單

Eiji Kitamura

Milica Mihajlija

瀏覽器內建 Web Payments API 專用付款功能 因為我們的遊戲 在 2010 年間脫穎而出使用 Web Payments 時，可將商家與付款應用程式整合 變得更簡單、更安全。

若要進一步瞭解使用網路付款的好處，請參閱賦能 提供網路付款服務的付款應用程式。

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

這項程序包含 6 個步驟：

1. 商家發起付款交易。
2. 商家顯示付款按鈕。

3. 客戶按下付款按鈕。

   

4. 瀏覽器啟動付款應用程式。

   

5. 客戶變更任何詳細資料 (例如運送選項或 地址)，商家則會更新交易明細以反映變更。

   

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 這類交易是為了在交易資訊中事先核發。A 罩杯 典型的整合包括商家和客戶的 支付總價。防範惡意行為 不必操弄價格，還能 並在交易結束時驗證。

商家可以在 PaymentMethodData敬上 物件的 data 屬性。

瀏覽器會提供交易資訊，以便瀏覽器進行探索 付款應用程式在 PaymentRequest 中指定的付款應用程式處理程序 方法識別碼。這樣一來，瀏覽器就能判斷付款應用程式 。

如要進一步瞭解探索程序的運作方式，請參閱設定 付款 方法。

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

商家可以支援多種付款方式，但請只列出該筆款項 供客戶實際使用。顯示付款按鈕 否則使用者體驗不佳如果商家能預測 PaymentRequest 物件中指定的付款方式不適用於 客戶可提供備用解決方案，或是完全不顯示該按鈕。

透過 PaymentRequest 例項，商家可以查詢客戶 付款應用程式

客戶是否能夠使用付款應用程式？

canMakePayment()敬上 PaymentRequest 方法會傳回 true (如果可在 客戶的裝置。「可用」是指支援 找到付款方式，且已安裝該平台專屬的付款應用程式 網站式付款應用程式已準備好 已註冊。

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

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

消費者按下付款按鈕時，商家會呼叫 show() PaymentRequest 例項的方法，可立即觸發 付款 UI

如果最終總價是動態設定 (例如從 伺服器)，商家可以延後付款 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() 的引數指定為引數，瀏覽器就會 立即啟動付款使用者介面

注意： 如果付款處理常式設計為在設定總價時傳回交易 ID，可以在承諾結果中傳遞 ID。

步驟 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
  });
});

敬上

注意： 只有 Apple Safari 支援商家驗證事件。以 Chromium 為基礎的瀏覽器尚未在 2020 年 5 月實作這項事件。

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

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

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

此時，瀏覽器使用者介面可能仍會顯示載入指標， 交易尚未完成

如果付款應用程式因付款失敗或錯誤而終止， 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();

後續步驟

• 請參閱「設定 付款方式。
• 請參閱以下連結，瞭解如何建構平台專屬的付款應用程式： Android 付款應用程式開發人員指南。
• 瞭解如何在「網頁式付款應用程式開發商 指南。