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

設定付款方式

使用 Web Payments 的付款交易會從發現付款應用程式開始。請瞭解如何設定付款方式，並準備好付款應用程式，讓商家和顧客付款。

Eiji Kitamura

如要與 Payment Request API 搭配使用，付款應用程式必須與付款方式 ID。如要整合付款應用程式，商家會使用付款方式 ID 向瀏覽器指出這項資訊。這個這篇文章說明瞭付款應用程式探索功能的運作方式，以及如何設定讓瀏覽器正確發現並叫用付款應用程式。

如果您不熟悉 Web Payments 的概念或透過付款應用程式進行付款交易的方式，請先閱讀以下文章：

瀏覽器支援

「網頁付款」功能結合了幾項不同的技術和支援服務狀態取決於瀏覽器。

	鉻		Safari		Firefox
	電腦	Android	電腦	行動裝置	電腦/行動裝置
Payment Request API	✔	✔	✔	✔
付款處理常式 API	✔	✔
iOS/Android 付款應用程式	✔	✔	✔*	✔*

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

每個付款應用程式都必須提供下列項目：

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

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

瀏覽器會傳送要求至付款方式 ID 網址，並擷取付款方式資訊清單。
瀏覽器會從付款方式資訊清單中判斷網頁應用程式資訊清單網址，並擷取網頁應用程式資訊清單。
瀏覽器會決定是否要從網頁應用程式資訊清單啟動 OS 付款應用程式或以網頁為基礎的付款應用程式。

以下各節將詳細說明如何設定自己的付款方式，供瀏覽器找到

步驟 1：提供付款方式 ID

付款方式 ID 是一種以網址為基礎的字串。例如，Google Pay 的 ID 為 https://google.com/pay。付款應用程式開發人員可選擇任何網址做為付款方法 ID，前提是這些 ID 可以控制此方法內容。本文將使用 https://bobbucks.dev/pay 做為付款方式 ID。

商家如何使用付款方式 ID

系統會透過一份付款方式清單來建構 PaymentRequest 物件可識別付款的 ID 應用程式。付款方式 ID 已設為值至 supportedMethods 屬性。例如：

[merchant] 要求付款：

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。

，瞭解如何調查及移除這項存取權。

付款方式資訊清單欄位
屬性名稱	說明
`default_applications` (必填)	網址陣列，指向代管付款應用程式的網頁應用程式資訊清單。(網址可以是相對網址)。這個陣列應參照開發資訊清單、正式版資訊清單等。
`supported_origins`	指向可能代管第三方來源的網址陣列。請注意，多個付款應用程式可以實作相同的付款方式。

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

[payment handler] /payment-manifest.json：

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

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

可選擇將瀏覽器導向其他位置，以便在該處尋找付款方式資訊清單

付款方式 ID 網址可選擇以 Link 標頭回應指向另一個網址，瀏覽器可擷取付款方式資訊清單。如果付款方式資訊清單是由不同來源代管，這項功能就非常實用伺服器傳送或是由第三方提供。

瀏覽器如何透過重新導向，從網址式付款方式 ID 找到付款應用程式

設定付款方式伺服器，以 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)。

一般網頁應用程式資訊清單如下所示：

[payment handler] /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 會使用這些圖示。其他如未指定屬於付款方式的一部分
`serviceworker`	用於偵測作為網路付款的 Service Worker 應用程式。
`serviceworker.src`	用來下載 Service Worker 指令碼的網址。
`serviceworker.scope`	這個字串代表定義 Service Worker 的網址註冊範圍
`serviceworker.use_cache`	用來下載 Service Worker 指令碼的網址。
`related_applications`	用於偵測會充當 OS 提供的付款應用程式。詳情請參閱 Android 付款應用程式開發人員指南。
`prefer_related_applications`	當系統同時提供 OS 付款應用程式和網頁式付款應用程式時，可用於判斷要啟動哪個應用程式。

付款應用程式標籤和圖示。

網頁應用程式資訊清單的 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 欄位中指定網頁版付款應用程式。

[payment handler] /manifest.json：

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

瀏覽器會傳送 paymentrequest 事件給服務工作者，藉此啟動網路付款應用程式。Service Worker 不一定要註冊下一步。任何裝置都能及時註冊。

瞭解特殊最佳化

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

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

啟動付款應用程式前，付款要求 UI 介入處理。

在啟動付款應用程式前顯示付款要求使用者介面，可提升使用者完成付款所需的步驟數。為了改善這個程序，瀏覽器可以將這項資訊的處理工作委派給付款應用程式，並在呼叫 show() 時直接啟動付款應用程式，而不會顯示付款要求 UI。

略過付款要求 UI，直接啟動付款應用程式。

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

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

網頁式付款應用程式何時登錄 Just-In-Time (JIT)？

您可以啟動以網頁為基礎的付款應用程式，而無須使用者事先明確造訪付款應用程式網站，並註冊服務工作者。當使用者選擇透過網路付款應用程式付款時，服務 worker 可即時註冊。註冊時間有兩種變化：

如果向使用者顯示付款要求 UI，應用程式會在使用者按一下「Continue」時才註冊，並在使用者按一下「Continue」時啟動。
如果略過付款要求 UI，付款應用程式會即時註冊並直接啟動。如要略過付款要求 UI 並啟動及時註冊的應用程式，必須使用手勢，這可避免跨來源服務 worker 意外註冊。

後續步驟

現在您已找到付款應用程式，接下來請瞭解如何開發特定平台專用的應用程式以及網路式付款應用程式