在此页

• Payment Request concepts and usage
• 接口
• 字典
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

安全上下文
此特征只可用于 安全上下文 (HTTPS)，在某些或所有 支持浏览器 .

The Payment Request API provides a consistent user experience for both merchants and users. It is not a new way for paying for things; rather, it's a way for users to select their preferred way of paying for things, and make that information available to a merchant.

Payment Request concepts and usage

Many problems related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. The 支付请求 API is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. It aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a HTML form.

Advantages of using the Payment Request API with "basic-card" (card-based payments):

• Fast purchase experience : Users enter their details once into the browser and are then ready to pay for goods and services on the web. They no longer have to fill out the same details repeatedly across different sites.
• Consistent experience on every site (that supports the API): As the payment sheet is controlled by the browser, it can tailor the experience to the user. This can include localizing the UI into the user's preferred language.
• 可访问性 : As the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. A browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment.
• Credentials management : Users can manage their credit cards and shipping addresses directly in the browser. A browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things.
• Consistent error handling: The browser can check the validity of card numbers, and can tell the user if a card has expired (or is about to expire). The browser can automatically suggest which card to use based on past usage patterns or restrictions from the merchant (e.g, "we only accept Visa or Mastercard"), or allow the user to say which is their default/favorite card.

To request a payment, a web page creates a PaymentRequest object in response to a user action that initiates a payment, such as clicking a "Purchase" button. The PaymentRequest allows the web page to exchange information with the user agent while the user provides input to complete the transaction.

You can find a complete guide in Using the Payment Request API .

注意 : The API is available inside cross-origin <iframe> elements only if they have had the allowpaymentrequest attribute set on them.

接口

PaymentAddress

An object that contains address information; used for billing and shipping addresses, for example.

PaymentRequest

An object that provides the API for creating and managing the user agent's payment interface.

PaymentRequestEvent

An event delivered to a payment handler when a PaymentRequest is made.

PaymentRequestUpdateEvent

Enables the web page to update the details of the payment request in response to a user action.

PaymentMethodChangeEvent

Represents the user changing payment instrument (e.g., switching from a credit card to debit card).

PaymentResponse

An object returned after the user selects a payment method and approves a payment request.

MerchantValidationEvent

Represents the browser requiring the merchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use Apple Pay).

字典

AddressErrors

A dictionary containing strings providing descriptive explanations of any errors in any PaymentAddress entries which have errors.

PayerErrors

A dictionary containing strings providing descriptive explanations of any errors in related to PaymentResponse 's email, phone, and name attributes.

PaymentDetailsUpdate

An object describing changes that need to be made to the payment details in the event that the server needs to update information following the instantiation of the payment interface but before the user begins to interact with it.

Related dictionaries for the Basic Card specification

BasicCardChangeDetails

An object providing redacted address information that is provided as the methodDetails 在 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.

规范

规范	状态	注释
支付请求 API	候选推荐	初始定义。
Basic Card Payment	工作草案	定义 BasicCardRequest and BasicCardResponse , among other things needed for handling credit card payment
Payment Method Identifiers	候选推荐	Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.

浏览器兼容性

PaymentRequest interface

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
PaymentRequest	Chrome 61	Edge ≤18	Firefox 55 Disabled 55 注意事项 Disabled 注意事项 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 ) 和 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	Opera 不支持 No	Safari 11.1	WebView Android 不支持 No	Chrome Android 53	Firefox Android 55 Disabled 55 注意事项 Disabled 注意事项 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 ) 和 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	Safari iOS 11.3	Samsung Internet Android 6.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• Using the Payment Request API
• Payment processing concepts
• Introducing the Payment Request API for Apple Pay
• Google Pay API PaymentRequest Tutorial
• W3C Payment Request API FAQ
• Feature Policy directive payment

元数据

• 最后修改： Dec 7, 2019

相关话题

1. 支付请求 API
2. 指南

   1. Using the Payment Request API
   2. Payment processing concepts
3. 接口

   1. MerchantValidationEvent
   2. PaymentAddress
   3. PaymentMethodChangeEvent
   4. PaymentRequest
   5. PaymentRequestUpdateEvent
   6. PaymentResponse
4. 特性

   1. HTMLIFrameElement.allowPaymentRequest