Payment Request API

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Payment Request API 提供商家與用戶雙方一致的用戶體驗。它並不是嶄新的支付方式、而是讓用戶選擇偏好的支付方式、並把該方式提供給商家。

Payment Request 的概念和用法

很多放棄線上購物的問題,與結帳表單的填寫有關:填寫這些東西既困難又耗時、步驟還極度繁雜。Payment Request API正是為減少、甚至擺脫要完成表單所需的填寫步驟而生。它藉由不假手 HTML 表單的情況下,記下要傳給商家的用戶資訊,來簡化結帳步驟。

針對信用卡付款,使用 Payment Request API 的好處有:

  • 快速的訂購體驗:用戶在進入瀏覽器時輸入資訊、接著就備齊網路購物所需。用戶再也無須於多個網站,填寫相同資訊。
  • 各站一致且支援 API 的用戶體驗:由於是瀏覽器在掌管付款資訊,用戶體驗將能客製化、還可以把 UI 本土化為用戶偏好的語言。
  • 無障礙:由於是瀏覽器在掌管輸入表單,各網站針對鍵盤和螢幕閱讀器的無障礙將確保一致,而無須開發者動工。瀏覽器還能調整輸入表單的字體大小、色彩對比,讓用戶能更輕鬆地完成付款。
  • 憑證管理:用戶能在瀏覽器,管理信用卡與送達地址的資訊。瀏覽器還能跨設備同步這些「憑證」,以便用戶在電腦與手機周旋間,依舊能輕易付款。
  • 一致的錯誤處理:瀏覽器會檢查信用卡號碼、並告訴用戶該卡片(將)過期與否;瀏覽器也可以藉由商家的使用模式或限制(例如「只接受 Visa 卡或萬事達卡(Mastercard)」)自動提示用戶、或允許其選擇偏好的信用卡。

要請求支付的話,建立 PaymentRequest 物件的網頁,將回應用戶發動付款的行為,像是點選「購物」按鈕。PaymentRequest 將允許網頁在用戶提供完成交易所需資訊時交換之。

你可以在 使用 Payment Request API 文章看到完整教學。

注意:此 API 只有在設定 allowpaymentrequest 屬性下,才可支援跨域 <iframe> 元素。

介面

PaymentAddress
地址資訊物件,具體用途有付款與送達。
PaymentRequest
提供 API 以便建立與管理用戶代理的付款介面物件。
PaymentRequestEvent
建立 PaymentRequest 時發送給付款處理器(payment handler)的事件。
PaymentRequestUpdateEvent
允許網頁針對用戶行為,發動更新用戶付款資訊的請求。
PaymentMethodChangeEvent
表示用戶更改付款工具(例如從信用卡轉為簽帳金融卡)。
PaymentResponse
在用戶選取付款方法、並同意付款請求後,所回傳的物件。
MerchantValidationEvent
表示商家(網站)要求使用特定支付方法的瀏覽器驗證處理器(例如:要不要放行 Apple Pay)

字詞(dictionary)

AddressErrors
此字詞包含任何與 PaymentAddress entry 錯誤相關的描述性解釋字串。
PayerErrors
此字詞包含任何與 PaymentResponse 的 email、電話、名字屬性(name attribute)錯誤相關之描述性解釋字串。
PaymentDetailsUpdate
此物件描述伺服器在用戶開始互動前、實例化支付界面後,針對行為需要修改的付款資訊。
BasicCardChangeDetails
An object providing redacted address information that is provided as the methodDetails on the paymentmethodchange event sent to the PaymentRequest when the user changes payment information.
BasicCardErrors
An object providing any error messages associated with the fields in the BasicCardResponse object that are not valid. This is used as the value of the paymentMethod property on the PaymentValidationErrors object sent to the PaymentRequest when an error occurs.
BasicCardRequest
Defines an object structure for containing payment request details such as card type.
BasicCardResponse
Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.

規範

規範 狀態 註解
Payment Request API Candidate Recommendation 初始定義。
Basic Card Payment Working Draft 定義 BasicCardRequestBasicCardResponse,提供處理信用卡付款所需的事務。
Payment Method Identifiers Candidate Recommendation 提供付款方法標識、驗證方法、還有 where applicable, minted and formally registered with the W3C。

瀏覽器相容性

PaymentRequest 介面

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
PaymentRequestChrome Full support 61Edge Full support YesFirefox Full support 55
Notes Disabled
Full support 55
Notes Disabled
Notes Available only in nightly builds.
Disabled From version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedRegions preference (needs to be set to A comma-delineated list of one or more 2-character ISO country codes indicating the countries in which to support payments (for example, US,CA).). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari Full support 11.1WebView Android No support NoChrome Android Full support 53Firefox Android Full support 55
Notes Disabled
Full support 55
Notes Disabled
Notes Available only in nightly builds.
Disabled From version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedRegions preference (needs to be set to A comma-delineated list of one or more 2-character ISO country codes indicating the countries in which to support payments (for example, US,CA).). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS Full support 11.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

參見