Get rid of those checkout forms with Payment Request API

A Web Standard

A lot of us use internet is for shopping. Whether it’s clothes, groceries, gifts for the loved ones or a plane ticket to India. Ability to accept payments online is one of the features that has driven internet so popular as it allows business to be profitable and to contribute more. Businesses want to enable people to quickly make a purchase once they have decided on the product and, this is the reason they are spending more money and resources to enable faster checkout on the websites.

The checkout forms hasn’t change much since the beginning of internet . A whopping 69.89% of people abandon the website at the checkout stage, and one the prominent reasons for that is those checkout forms[1]. Different checkout flows and UX at different websites also confuse people and prevent them from trying out your new website.

Payment Request API

The new Payment Request API, a web standard, enables your website to get Payment Information from your customers a simple task, standardizing the payments flow and removing the need for checkout forms. The API not only support different payment methods but also being a web standard, it works in different browsers across different device.

Payment Request UI

The payment request API follows a simple process.

1. The merchant website initiate a payment process by calling just one API.
2. The browser then displays a standard UI with all the required information and customer can then select the payment option. Customers can choose to save the payment information in the browser so they can fill out this form with a single click later on any website.
3. Customer authorizes the transaction on the UI and then all the necessary payment information such as card number, shipping address etc. are sent back to the merchant.
4. Merchant can then use any of his payment providers to process the payment.

The payment request API is flexible enough to support -

1. Different payment methods such as Credit cards, Google Pay etc

Additional payment methods such as Google Pay

2. Accepting cards from certain schemes such as only Mastercard and certain type such as only credit and debit

Configure cards accepted

3. Displaying order information including line items, discount and tax amount

4. Collecting additional information such as payer’s email and phone

5. Displaying address type such as shipping, pickup or delivery

6. Display and configure pricing for different shipping methods

One of the thing that it doesn’t have for now is the multi currency support.

Payment Request API is available now for your website to integrate with. At the time of writing, it is supported by Chrome for all devices Desktop, Android and iOS and Microsoft EDGE. It is in technology preview in safari and under development in Firefox[2]. You can always test if the feature is available and fallback to your old checkout flow.

For more information please checkout the Google’s developer blog on Payment Request API.

References

[1] 40 Cart Abandonment Rate Statistics https://baymard.com/lists/cart-abandonment-rate
[2] Can I Use — Payment Request API https://caniuse.com/#feat=payment-request

Note that the images are taken from Google’s Developer Blog and are licensed under Creative Commons Attribution 3.0 License