設定付款方式

使用 Web Payments 進行付款交易時，首先要找到付款應用程式。瞭解如何設定付款方式，並準備好付款應用程式，讓商家和客戶付款。

Eiji Kitamura

發布日期：2017 年 9 月 27 日，上次更新日期：2026 年 10 月 16 日

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

如果您是第一次使用網頁付款，請先參閱網頁付款總覽。

付款應用程式類型

付款方式可由 Android 付款應用程式、網頁式付款應用程式或兩者支援：

• Android 付款應用程式：Chrome 透過 Android 意圖啟動的安裝版應用程式。Chrome 會驗證應用程式的套件名稱和簽署憑證。
• 網頁式付款應用程式：Chrome 在互動視窗中啟動的 Service Worker。使用者不必安裝任何軟體。

Android 付款應用程式適用於 Android 版 Chrome 和 WebView。 網頁式付款應用程式可在所有平台的 Chrome 中使用，但不支援 WebView。

如果付款方式同時支援這兩種應用程式，且網頁應用程式資訊清單將 prefer_related_applications 設為 true，Chrome 就會隱藏網頁式付款應用程式。否則，使用者可能會在付款要求 UI 中同時看到這兩種應用程式，並從中選擇。

瀏覽器支援

Web Payments 包含幾種不同的技術，支援狀態取決於瀏覽器。

瀏覽器如何偵測付款應用程式

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

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

商家發起交易時，探索程序就會啟動：

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

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

步驟 1：提供付款方式 ID

付款方式 ID 是以網址為基礎的字串。舉例來說，Google Pay 的 ID 是 https://google.com/pay。付款應用程式開發人員只要能控制網址，並提供任意內容和 HTTP 標頭，就能選擇任何網址做為付款方式 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 檔案，定義哪些付款應用程式可以使用這種付款方式。

提供付款方式資訊清單

商家發起付款交易時，瀏覽器會向付款方式 ID 網址傳送 HTTP HEAD 要求。付款方式 ID 網址會以 Link HTTP 標頭回應，指向瀏覽器可擷取付款方式資訊清單的網址。

設定付款方式伺服器，以 HTTP Link 標頭回應，其中包含 rel="payment-method-manifest" 屬性和付款方式資訊清單網址。舉例來說，如果資訊清單位於 https://bobbucks.dev/pay/payment-manifest.json，回應標頭會包含：

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

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

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

接著，瀏覽器會向付款方式資訊清單網址傳送 HTTP GET 要求。伺服器會傳回付款方式資訊清單主體。

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

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

[payment handler] /payment-manifest.json:

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

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

步驟 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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome 會根據付款應用程式的類型讀取不同欄位。如果是 Android 付款應用程式，Chrome 只會讀取 related_applications。如果是網頁式付款應用程式，Chrome 會讀取 name、icons、serviceworker、payment 和 prefer_related_applications。

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

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

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

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

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

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

[payment handler] /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"
  }]
}]

如果 prefer_related_applications 為 true，且平台專屬付款應用程式可用，Chrome 會隱藏網頁式付款應用程式。否則，Chrome 也會尋找網頁式付款應用程式。

啟動網頁式付款應用程式

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

[payment handler] /manifest.json:

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

瀏覽器會將 paymentrequest 事件傳送至 Service Worker，啟動網頁式付款應用程式。Service Worker 不必事先註冊。可即時註冊。

瞭解特殊最佳化

瀏覽器如何略過付款要求使用者介面，直接啟動付款應用程式

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

如果在啟動付款應用程式前顯示 Payment Request UI，使用者完成付款所需的步驟就會增加。為最佳化程序，瀏覽器可將該資訊的填寫作業委派給付款應用程式，並在呼叫 show() 時直接啟動付款應用程式，而不顯示 Payment Request UI。

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

• show() 是由使用者手勢 (例如點按滑鼠) 觸發。
• 只有一個付款應用程式符合以下條件：
  • 支援要求的付款方式 ID。
  • 支援商家要求的所有運送和聯絡資訊。

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

使用者不必事先造訪付款應用程式網站並註冊 Service Worker，即可啟動網頁式付款應用程式。當使用者選擇透過網頁式付款應用程式付款時，系統可以即時註冊 Service Worker。註冊時間有兩種變化：

• 如果使用者看到 Payment Request UI，應用程式會即時註冊，並在使用者點選「Continue」時啟動。
• 如果略過 Payment Request UI，付款應用程式會即時註冊並直接啟動。如要略過 Payment Request UI，啟動即時註冊的應用程式，必須使用使用者手勢，以免意外註冊跨源 Service Worker。

建構網頁式付款應用程式

商家呼叫 show() 時，Chrome 會將 paymentrequest 事件傳送至 Service Worker。在 respondWith() 內呼叫 openWindow()，顯示付款 UI，然後使用付款回應進行解析。

如需完整的 API，請參閱 MDN 上的 Web-Based Payment Handler API。

後續步驟

• Android 付款應用程式開發人員指南
• 從 Android 付款應用程式提供運送和聯絡資訊