A browser API for one click payments
2 min read

A browser API for one click payments

TLDR: A JavaScript API to access the browser's autocomplete data, allowing one-click signups and purchases.

In the early 1900s, when stagecoaches were first being converted into automobiles, the engineers were so entrenched by existing coach design that they positioned the driver on the outside of the car. Some models went as as far as putting fake horses on the front, their eyes containing lamps, their mouths incorporating horns, and the torso housing fuel, tools and spare tires.

Horseless Carriages

I feel that auto-completing forms are much like those 'Horseless Carriages', a solution to a specific problem and not the wider picture. What if we removed the forms altogether?

I'm proposing a JavaScript API that lets us fetch autocomplete data that's already stored in the browser, such as name, address and credit cards. This means that a site's checkout flow consists of two steps: clicking 'purchase' and authorizing the domain's access to the relevant data.

requestProfile

It's not just payments that could be streamlined, but signups too. Sites could check to see if the API was supported and, if not, display the usual signup form. The fact that this process is now streamlined means it's likely to increase conversion rates.

The API is extremely simple, consisting of one call to navigator.requestProfile, passing an array of requested data types and a callback function.

navigator.requestProfile(['firstName', 'email', 'cardNumber'], function(profile){
  console.log('Your name is:', profile.firstName);

  /* ... */
});

I've created a proof of concept Chrome extension that implements the API, and allows sites access to pre-configured data stored in the browser.

There are a number of things I want to improve over this initial implementation, such as making the permissions dialog modal, encrypting credit card numbers and displaying previews of any data that was going to be shared with the page. However, I feel it's a good starting point.

Getting the security considerations right is key to making this work. As browsers already store (and encrypt) credit card data, I feel that aspect is less of an issue. Rather, it's more of a usability concern, as people tend to blindly authorize permissions. Perhaps the answer is requiring the card's CVC, or a countdown forcing users to read the infobar.

I've also started a discussion on the public-webapps list. If this is something you'd like to see in the browser, or want to weigh in on, by all means share your thoughts. Together we can improve the status quo!

Enjoying these posts? Subscribe for more