設定付款方式

使用「網路付款」進行付款交易的第一步是發現您的 付款應用程式。瞭解如何設定付款方式及取得付款應用程式 方便商家和客戶付款。

Eiji Kitamura

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

不熟悉「網路付款」的概念或付款交易運作方式 請先閱讀下列文章：

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

瀏覽器支援

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

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

注意： *Safari 支援 Apple Pay，但不支援第三方付款應用程式。

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

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

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

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

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

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

步驟 1：提供付款方式 ID

付款方式 ID 是以網址為基礎的字串。舉例來說，Google Pay 的 ID 是 https://google.com/pay。付款應用程式開發人員可選擇任何網址做為付款 方法 ID，前提是這些 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' }
  }
});

注意： 使用 Chrome 的付款方式 ID 時，最多可在同一網站上重新導向三次。

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

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

提供付款方式資訊清單

商家發起付款交易時，瀏覽器會傳送 HTTP GET 要求傳送至付款方式 ID 網址。 伺服器以付款方式回應 資訊清單內文。

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

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

付款方式資訊清單欄位

屬性名稱	說明
default_applications (必填)	一組指向付款的網頁應用程式資訊清單的網址陣列 代管應用程式(網址可以是相對網址)。預期會顯示這個陣列 參照開發資訊清單、正式環境資訊清單等。
supported_origins	指向可能代管第三方來源的網址陣列 採用相同付款方式的付款應用程式。請注意 是由多個付款應用程式實作。

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

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

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

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

注意： 自 Chrome 第 83 版起，Chrome 支援每種付款方式的單一預設付款應用程式。

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

付款方式 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

注意： 如要進一步瞭解付款方式做法，請參閱 W3C 說明文件。

步驟 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 會使用這些圖示。其他 如未指定 屬於付款方式的一部分
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 欄位中指定網頁式付款應用程式。

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

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

瀏覽器透過傳送 paymentrequest 來啟動網頁式付款應用程式 傳送事件給 Service Worker。Service Worker 不一定要註冊 下一步。任何裝置都能及時註冊。

瞭解特殊的最佳化功能

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

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

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

在啟動付款應用程式前顯示付款要求使用者介面，可提升 使用者完成付款所需的步驟數。為了將流程最佳化 瀏覽器就能將該資訊的執行要求委派給付款應用程式， 直接啟動付款應用程式，而不顯示付款要求 UI 系統會呼叫 show()。

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

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

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

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

注意： Safari 目前僅支援 Apple Pay，因此一律直接啟動應用程式，略過付款要求使用者介面。

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

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

• 如果向使用者顯示付款要求 UI，表示應用程式已註冊。 使用者按一下「繼續」，系統就會啟動並啟動應用程式。
• 如果略過付款要求 UI，系統會註冊付款應用程式 並直接啟動略過付款要求使用者介面即可啟動 只有在剛註冊的應用程式內需要使用者做出手勢， 跨來源 Service Worker 的意外註冊。

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

注意： 雖然單一付款方式 ID 可支援多個付款應用程式，但只有在付款方式資訊清單指向同一個付款應用程式時，才能註冊 JIT 註冊。

後續步驟

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

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