使用「網路付款」進行付款交易的第一步是發現您的 付款應用程式。瞭解如何設定付款方式及取得付款應用程式 方便商家和客戶付款。
如要與 Payment Request API 搭配使用,付款應用程式必須與 付款方式 ID。想要與付款應用程式整合的商家 會使用付款方式 ID 向瀏覽器表明。這個 這篇文章說明瞭付款應用程式探索功能的運作方式,以及如何設定 讓瀏覽器正確發現並叫用付款應用程式。
不熟悉「網路付款」的概念或付款交易運作方式 請先閱讀下列文章:
瀏覽器支援
「網頁付款」功能結合了幾項不同的技術和支援服務 狀態取決於瀏覽器。
瀏覽器如何找到付款應用程式
所有付款應用程式都必須提供以下資訊:
- 網址式付款方式 ID
- 付款方式資訊清單 (除非付款方式 ID 是 由第三方提供)
- 網頁應用程式資訊清單
![圖表:瀏覽器如何透過網址式付款方式 ID 找出付款應用程式](https://web.developers.google.cn/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=19&hl=zh-tw)
探索程序從商家展開交易時開始:
- 瀏覽器向付款方式傳送要求 identifier 網址和擷取 付款方式 資訊清單。
- 瀏覽器會決定網頁應用程式 資訊清單網址。 付款方式資訊清單,並擷取網頁應用程式資訊清單。
- 瀏覽器會決定要啟動 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' }
}
});
步驟 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
欄位時,會找出
支援的網頁應用程式資訊清單
付款應用程式。
視需要將瀏覽器轉送至其他位置中的付款方式資訊清單
付款方式 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 會使用這些圖示。其他 如未指定 屬於付款方式的一部分 |
serviceworker
|
用於偵測作為網路付款的 Service Worker 應用程式。 |
serviceworker.src |
用來下載 Service Worker 指令碼的網址。 |
serviceworker.scope |
這個字串代表定義 Service Worker 的網址 註冊範圍 |
serviceworker.use_cache |
用來下載 Service Worker 指令碼的網址。 |
related_applications
|
用於偵測做為 OS 所提供付款應用程式的應用程式。 如需瞭解詳情,請前往 Android 付款應用程式開發人員指南。 |
prefer_related_applications
|
當 OS 提供的付款應用程式和網頁式付款應用程式時,可使用此屬性決定要啟動哪一個付款應用程式。 |
![包含圖示的付款應用程式。](https://web.developers.google.cn/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=19&hl=zh-tw)
網頁應用程式資訊清單的 name
屬性會做為付款應用程式名稱 (icons
)
屬性做為付款應用程式圖示。
Chrome 如何決定要啟動的付款應用程式
啟動平台專屬付款應用程式
如要啟動平台專屬的付款應用程式,必須符合下列條件:
- 網頁應用程式資訊清單中指定了
related_applications
欄位,且:- 已安裝應用程式的套件 ID 和簽章相符,
網頁應用程式資訊清單中的版本 (
min_version
) 小於或等於 已安裝應用程式版本
- 已安裝應用程式的套件 ID 和簽章相符,
網頁應用程式資訊清單中的版本 (
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
系統會呼叫 show()
。
如要直接啟動付款應用程式,必須符合下列條件:
show()
會透過使用者手勢 (例如按一下滑鼠) 觸發。- 只有單一付款應用程式符合下列條件:
- 支援要求的付款方式 ID。
網站式付款應用程式何時會註冊及時註冊 (JIT)?
不需使用者明確造訪即可啟動網頁式付款應用程式 並註冊 Service Worker。「服務」 使用者選擇用 網站式付款應用程式註冊時間有兩種:
- 如果向使用者顯示付款要求 UI,表示應用程式已註冊。 使用者按一下「繼續」,系統就會啟動並啟動應用程式。
- 如果略過付款要求 UI,系統會註冊付款應用程式 並直接啟動略過付款要求使用者介面即可啟動 只有在剛註冊的應用程式內需要使用者做出手勢, 跨來源 Service Worker 的意外註冊。
後續步驟
現在您已找到付款應用程式,接下來請瞭解如何開發特定平台專用的應用程式 以及網路式付款應用程式