The Payment Request API improves mobile web checkout (shopping cart) and accepts credit cards electronically (and eventually a number of other payment services and solutions in the wild).
The Payment Request API allows merchants to easily collect payment information with minimal integration. The API is an open and cross-browser standard that replaces traditional checkout flows by allowing merchants to request and accept any payment in a single API call. The API eliminates manual and tedious entry by storing the user's information securely in the browser. The browser passes addresses and credit card (or other payment) details directly to the website. And, because the browser is collecting payment information from the user, making a payment goes from " n " taps to one tap.
About Web Payments
For mobile device users, making purchases on the web, particularly on mobile devices, can be a frustrating experience. Every web site has its own flow and its own validation rules, and most require us to manually type in the same set of information over and over again. Likewise, it is difficult and time consuming for developers to create good checkout flows that support various payment schemes.
For businesses, checkout can be a complicated process to develop and complete. That's why it is worthwhile investing in capabilities such as the Payment Request API and enhanced autofill to assist your users with the task of accurately filling in forms.
Mobile users are likely to abandon online purchase forms that are user-intensive, difficult to use, slow to load and refresh, and require multiple steps to complete. This is because two primary components of online payments – security and convenience – often work at cross-purposes, where more of one typically means less of the other.
Any system that improves or solves one or more of those problems is a welcome change. We've found that forms and payments are completed 25% more when autofill is available, increasing odds for conversion. We started solving the problem already with Autofill, but now we're talking about a more comprehensive solution called the Payment Request API.
Introduction to the Payment Request API
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 convenient and consistent user experience and enabling web merchants to easily leverage disparate payment methods. The Payment Request API is not a new payment method, nor does it integrate directly with payment processors. Rather, it is a process layer whose goals are:
- To let the browser act as intermediary among merchants, users, and payment methods
- To standardize the payment communication flow as much as possible
- To seamlessly support different secure payment methods
- To work on any browser, device, or platform—mobile or otherwise
The Payment Request API is currently under development by the W3C Web Payments Working Group. The group's goal is to create a universal cross-browser standard for any website to accept any form of payment. See the Can I use website for up-to-date browser support.
The Payment Request API's open-web approach is designed:
- For developers to minimize the need to fill out checkout forms and improve user's payment experience from the ground up. This API follows the recommendations in the W3C Payment Request API specification published by the Web Payments Working Group.
- For users to check out, make a payment, or fill in forms with minimal use of the mobile device keyboard.
The API uses securely cached data to facilitate payment interaction between the user and the merchant's site. The API also gets the data necessary to process transactions as quickly as possible.
The Payment Request API is a standards-based way to enable checkout on the web that:
- Provides a native user interface for users to select or add a payment method, a shipping address, a shipping option, and contact information in an easy, fast, and secure way.
- Brings secure, tokenized payments to the web (browser as middleman) using secure origin, HTTPS.
- Always returns a payment credential that a merchant can use to get paid (credit card, push payment, token, etc).
- Is designed so that additional functionality can be added in, depending on your particular product requirements (shipping information, email, and phone number collection).
Goals of the Payment Request API
The Payment Request API is an open and cross-browser standard that replaces traditional checkout flows by allowing merchants to request and accept any payment in a single API call. The API allows the web page to exchange information with the browser while the user is providing input, before approving or denying a payment request.
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. The Payment Request API is neither a new payment method, nor does it integrate directly with payment processors. Rather, it is a process layer whose goals are to:
- Allow the browser act as intermediary among merchants, users, and payment methods
- Standardize the payment communication flow as much as possible
- Seamlessly support different secure payment methods
- Eventually work on any browser, device, or platform, including mobile devices and otherwise (as of this writing the Payment Request API is available on Chrome for Android (v53), Samsung Internet (v5.0), and partially supported on Edge (v15), but other third-party solutions will be supported in the future)
Best of all, the browser acts as an intermediary, storing all the information necessary for a fast checkout so users can just confirm and pay with a single tap or click.
Payment Request demos are available at these URLs:
- Demo: https://emerald-eon.appspot.com/
- Polymer Shop demo: https://polykart-credential-payment.appspot.com/
- Simple demos and sample code: https://googlechrome.github.io/samples/paymentrequest/
- Deep dive documentation: https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request
- Samsung Internet demos:
How Payment Request Processing Works
Using the Payment Request API, the transaction process is made as seamless as possible for both users and merchants.
The process begins when the merchant site creates a new
PaymentRequest and passes to the browser all the information required to make the purchase: the amount to be charged, what currency they expect payment in, and what payment methods are accepted by the site. The browser determines compatibility between the accepted payment methods for the site and the methods the user has installed on the target device.
The browser then presents the payments UI to the user, who selects a payment method and authorizes the transaction. A payment method can be as straightforward as a credit card that is already stored by the browser, or as esoteric as a third-party system (for example, Android Pay or PayPal) written specifically to deliver payments to the site (this functionality is coming soon). After the user authorizes the transaction, all the necessary payment details are sent directly back to the site. For example, for a credit card payment, the site gets a card number, a cardholder name, an expiration date, and a CVC.
PaymentRequest can also be extended to return additional information, such as shipping addresses and options, payer email, and payer phone. This allows you to get all the information you need to finalize a payment without ever showing the user a checkout form.
Using the Payment Request API
To learn more about Payment Request API, see these documents and resources: