Google says that up to 80% of all mobile orders only contains one single product. That means that customers don’t want to complete a five-step checkout process, but want to order a product fast. With that in mind, Google developed the Payment Request API which is now adopted by several browsers like Chrome, Edge, and Firefox. It includes an optimized and consistent UI, handles all user interactions and it stores data in the browser as long as the user is logged in.
"80% of all mobile orders only contains one single product"
- Think With Google
The main problem with checkout processes is that it includes too many steps, is not consistent across webshops and users need to re-enter personal information between webshops. This leads to abandoned shopping carts. A checkout process should be simple and easy to use and you want to prevent that users spend a lot of time entering the same personal information like shipping and payment address across multiple webshops. There are several companies like Klarna that are trying to solve that problem by providing a hosted checkout process. All data that the user enters is stored at Klarna and that data can be reused between webshops. The new Payment Requests API is a free browser feature that is optimized for mobile devices, data is stored inside the browser, and it’s supported by several modern browsers. It provides a consistent experience for customers and the look and feel is the same across webshops.
It’s important to understand that the Payment Request API provides a standardized UI and handles all user interactions, but the integration with the merchant itself is not provided out-of-the-box. However, some companies have already made an integration; for example Google Pay, Apple Pay, and Stripe.
The UI is optimized for mobile devices and for that reason very compact and easy to use. It can be split up into five sections. The order summary displays the payment total, but it’s possible to add additional items, for example in order to display the shipping costs or discounts. The shipping address and shipping option section is optional and can be configured in code. All data that is entered by the user is stored inside the browser as long as the user is logged in. It’s also synced between devices. In the payment step, the user can select one of the payment options. In case you need more information about the user like their name, email, and phone number, the optional contact info section can be enabled.
Payments can be handled by using a standardized or URL-based payment method identifier. Currently, there is one standardized payment method identifier which is basic cards to support credit and debit card payments. Examples of the supported networks are VISA, Mastercard, AMEX and many more. Third-party payment processors are URL-based payment methods. That means that the visitors are redirected to the payment processors page or that a native payment app is opened when clicking on the ‘Pay’ button inside the Payment Request UI. Examples are Google and Apple Pay.
The Payment Request API is driven by a JavaScript API. It’s pretty straightforward to use and implement on your website. In order to use the Payment Request API, it’s mandatory that your website is served over HTTPS but hopefully that is a given nowadays.
Find a full demo of the Payment Request API here.
