設定付款方式

使用 Web Payments 進行付款交易的第一步是探索您的付款應用程式。瞭解如何設定付款方式，並讓商家和客戶準備好透過您的付款應用程式付款。

Eiji Kitamura

如要與 Payment Request API 搭配使用，付款應用程式必須與付款方式 ID 建立關聯。想要與付款應用程式整合的商家，會使用付款方式 ID 向瀏覽器指明。本文會討論付款應用程式探索功能的運作方式，以及如何設定讓瀏覽器正確探索及叫用付款應用程式。

如果您剛接觸「網路付款」的概念，或是如何透過付款應用程式進行付款交易，請先參閱下列文章：

• 透過網路付款功能支援付款應用程式
• 付款交易的生命週期

瀏覽器支援

Web Payments 包含數種技術，支援狀態會因瀏覽器而異。

瀏覽器如何找到付款應用程式

所有付款應用程式都必須提供以下資訊：

• 網址式付款方式 ID
• 付款方式資訊清單 (由第三方提供付款方式 ID 時除外)
• 網頁應用程式資訊清單

探索程序從商家展開交易時開始：

1. 瀏覽器傳送要求至付款方式 ID 網址，並擷取付款方式資訊清單。
2. 瀏覽器會從付款方式資訊清單決定網頁應用程式資訊清單網址，並擷取網頁應用程式資訊清單。
3. 瀏覽器會判斷要從網頁應用程式資訊清單啟動 OS 付款應用程式或網頁式付款應用程式。

下一節將詳細說明如何設定自己的付款方式，讓瀏覽器能夠找到該付款方式。

步驟 1：提供付款方式 ID

付款方式 ID 是網址型字串，例如 Google Pay 的 ID 為 https://google.com/pay。只要付款應用程式開發人員有權控管網址，並能提供任意內容，就可以挑選任何網址做為付款方式 ID。在本文中，我們將使用 https://bobbucks.dev/pay 做為付款方式 ID。

商家如何使用付款方式 ID

PaymentRequest 物件會建立一份付款方式 ID 清單，用於識別商家決定接受的付款應用程式。付款方式 ID 已設為 supportedMethods 屬性的值。例如：

[商家] 要求付款：

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

步驟 2：提供付款方式資訊清單

付款方式資訊清單是一種 JSON 檔案，用於定義哪些付款應用程式可使用這個付款方式。

提供付款方式資訊清單

商家啟動付款交易時，瀏覽器會傳送 HTTP GET 要求至付款方式 ID 網址。伺服器會傳回付款方式資訊清單主體。

付款方式資訊清單包含兩個欄位：default_applications 和 supported_origins。

付款方式資訊清單檔案應如下所示：

[付款處理常式] /payment-manifest.json：

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

瀏覽器讀取 default_applications 欄位時，系統會找出支援付款應用程式的網頁應用程式資訊清單連結清單。

視需要將瀏覽器轉送至其他位置中的付款方式資訊清單

付款方式 ID 網址可以視需要使用 Link 標頭回應，該標頭指向可供瀏覽器擷取付款方式資訊清單的另一個網址。如果付款方式資訊清單由其他伺服器代管，或付款應用程式是由第三方提供，這項功能就非常實用。

設定付款方式伺服器，以 HTTP Link 標頭使用 rel="payment-method-manifest" 屬性和付款方式資訊清單網址進行回應。

舉例來說，如果資訊清單位於 https://bobbucks.dev/payment-manifest.json，回應標頭會包含：

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

網址可以是完整的網域名稱或相對路徑。檢查 https://bobbucks.dev/pay/ 是否有網路流量，以查看範例。您也可以使用 curl 指令：

curl --include https://bobbucks.dev/pay

步驟 3：提供網頁應用程式資訊清單

網頁應用程式資訊清單，可用來定義網頁應用程式做為名稱建議的網頁應用程式。這是一個廣泛使用的資訊清單檔案，用於定義漸進式網頁應用程式 (PWA)。

典型的網頁應用程式資訊清單看起來像這樣：

[付款處理常式] /manifest.json：

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

網頁應用程式資訊清單中描述的資訊，也能用來定義付款應用程式在付款要求 UI 中的方式。

網頁應用程式資訊清單的 name 屬性會當做付款應用程式名稱使用，icons 屬性則會當做付款應用程式圖示。

Chrome 如何決定要啟動的付款應用程式

啟動平台專屬付款應用程式

如要啟動平台專屬的付款應用程式，必須符合下列條件：

• 網頁應用程式資訊清單中指定了 related_applications 欄位，且：
  • 已安裝應用程式的套件 ID 和簽章相符，而網頁應用程式資訊清單中的最低版本 (min_version) 小於或等於已安裝應用程式版本。
• prefer_related_applications 欄位為 true。
• 使用者已安裝平台專屬的付款應用程式，並符合下列條件：
  • org.chromium.action.PAY 的意圖篩選器。
  • 指定為 org.chromium.default_payment_method_name 屬性值的付款方式 ID。

如要進一步瞭解如何設定，請參閱「Android 付款應用程式：開發人員指南」。

[付款處理常式] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

如果瀏覽器判定平台專屬付款應用程式可供使用，探索流程就會在這裡終止。否則，則繼續進行下一個步驟，也就是啟動網頁式付款應用程式。

啟動網頁式付款應用程式

應在網頁應用程式資訊清單的 serviceworker 欄位中指定網頁式付款應用程式。

[付款處理常式] /manifest.json：

"serviceworker": {
  "src": "payment-handler.js"
}

瀏覽器將 paymentrequest 事件傳送至 Service Worker，即可啟動網頁式付款應用程式。Service Worker 不需要預先註冊。任何裝置都能及時註冊。

瞭解特殊的最佳化功能

瀏覽器如何略過付款要求 UI 並直接啟動付款應用程式

在 Chrome 中，呼叫 PaymentRequest 的 show() 方法時，Payment Request API 會顯示瀏覽器提供的 UI，稱為「付款要求 UI」。這個使用者介面可讓使用者選擇付款應用程式。在付款要求 UI 中按下 [繼續] 按鈕後，就會啟動所選的付款應用程式。

在啟動付款應用程式前顯示付款要求 UI，會增加使用者完成付款所需的步驟數。為了改善該程序，瀏覽器可將資訊的執行要求委派給付款應用程式，並在呼叫 show() 時直接啟動付款應用程式，而不顯示付款要求 UI。

如要直接啟動付款應用程式，必須符合下列條件：

• show() 會透過使用者手勢 (例如按一下滑鼠) 觸發。
• 只有單一付款應用程式符合下列條件：
  • 支援要求的付款方式 ID。

網站式付款應用程式何時會註冊及時註冊 (JIT)？

使用者不需明確造訪付款應用程式網站並註冊 Service Worker，即可啟動網頁式付款應用程式。使用者選擇使用網頁式付款應用程式付款時，服務工作站可以即時註冊。註冊時間有兩種變化：

• 如果向使用者顯示付款要求 UI，應用程式會及時註冊，並在使用者按一下「Continue」時啟動。
• 如果略過付款要求 UI，付款應用程式會及時註冊並直接啟動。如果略過付款要求 UI，只要略過付款要求 UI，就能啟動剛註冊的已註冊應用程式，使用者做出手勢後，就能避免發生非預期的跨來源服務工作站登錄作業。

後續步驟

現在您已發現自己的付款應用程式，接下來請瞭解如何開發平台專屬的付款應用程式和網頁式付款應用程式。

• Android 付款應用程式：開發人員指南
• 網頁式付款應用程式開發人員指南