Payment Request API

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The Payment Request API defines a consistent user experience across payment methods, payment systems, platforms, and merchants. It is not a new payment method; rather, it is a conduit from the user's preferred payment method to a merchant.

Payment Request Concepts and Usage

Many problems related to online purchase abandonment can be traced to checkout forms, which are user-intensive, difficult to use, slow to load and refresh, and require multiple steps to complete. The Payment Request API is a system that is meant to eliminate checkout forms. It vastly improves user workflow during the purchase process, providing a more consistent user experience and enabling web merchants to easily leverage disparate payment methods. 

Advantages of using the Payment Request API with "basic-card":

  • 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.
  • Accessibility:  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 confortable 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.

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

Interfaces

PaymentRequest
Manages the process of a user making a payment.
PaymentRequestUpdateEvent
Enables the web page to update the details of the payment request in response to a user action.
PaymentResponse
Returned after a user selects a payment method and approves a payment request.
PaymentAddress
Stores address information.
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.

Specifications

Specification Status Comment
Payment Request API Candidate Recommendation Initial definition.
Basic Card Payment Working Draft Defines BasicCardRequest and BasicCardResponse.

Browser Compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

61

(Yes) No support[1] ? No support ?
  
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 51 (Yes) No support[1] ? No support ?

[1] Supported but disabled on all versions. Hidden behind the dom.payments.request.enabled pref.

See also

Document Tags and Contributors

 Last updated by: chrisdavidmills,