Imagine a World Without Checkout Forms
Close your eyes and imagine a world where online shopping is seamless and effortless. No more digging out your wallet to check your credit card number, no more remembering expiry dates, and no more filling out tedious checkout forms. Sounds amazing, right?
The Problem with Traditional Checkout
Meet Rondo the Hairdresser, who wants to sell his hair products online. And meet Sasha, who wants to buy those products. But when Sasha tries to check out, she’s faced with a long and tedious process that often leads to abandoned shopping carts. This is a common problem that affects many online merchants.
Introducing the Payment Request API
The Payment Request API is a system designed to eliminate checkout forms and make online shopping easier and faster. It allows the browser to act as an intermediary between the merchant, the user, and the payment method, making the checkout process simpler and more secure.
How the Payment Request API Works
The Payment Request API enables the browser to reuse stored payments and address information, passing it onto the merchant without the need for an HTML form. This means that users like Sasha can quickly and easily select their payment method, shipping address, and contact information in a fast and secure way.
The Benefits of the Payment Request API
The Payment Request API provides a fast and consistent user experience, allowing users to complete purchases quickly and easily. It also enables developers to create a standardized API for getting user payment preferences, and provides secure, tokenized payments to the web via HTTPS.
The Goals of the Payment Request API
The Payment Request API is under development by the W3C Web Payments Working Group, with the goal of creating a universal cross-browser standard for any website to accept any form of payment. The API aims to effortlessly support different secure payment methods, standardize the communication flow, and eventually support every browser on any device.
Building a Checkout Flow with the Payment Request API
To use the Payment Request API, we need to create a PaymentRequest object, which allows the website to trade information with the browser as the user provides information to complete the transaction. The PaymentRequest object takes three parameters: methodData, details, and options.
Creating a PaymentRequest Object
Let’s create a PaymentRequest object for Rondo’s website. We’ll start by creating an array of objects for the payment methods that Rondo’s website accepts. Then, we’ll create a details object that provides information about the specific payment, including total payment amount, shipping, tax, and more. Finally, we’ll add an options parameter to control the behavior of the browser.
The Future of Online Shopping
The Payment Request API has the potential to revolutionize online shopping, making it faster, easier, and more secure. With its ability to eliminate checkout forms and provide a consistent user experience, it’s an exciting development for both merchants and users alike.