requestAutocomplete
Take my money, not my time
Introduction #
I like the web. All in all, I think it’s a pretty good idea. As such, I get into a lot of web vs native debates. It doesn’t take long for the other person to start talking about the ease of payments through native systems. My usual response is to drop a smoke bomb and run out of the room laughing maniacally, because it’s not an argument I can win. Shopping cart abandonment on the mobile web can be as high as 97%. Imagine that in the real world. Imagine 97% of people in a supermarket, with a cart brimming full of things that they want, flipping their cart over and walking out. Now, some of those people are just pricing stuff up and never had an intention to buy, but the horrific user experience of buying on the web is a significant contributor. We’re hitting users with a tax on their sanity. Think of a pleasurable payment experience you had on the web, especially on mobile. It’s an app store, right? Or at least a similar closed system that already has your payment information. This is a problem. It requires sites to commit to a particular payment provider that the user must already have an account with and be logged into, or to commit to a platform that requires users to be logged into a particular payment provider, such as an app storexs that require you to code solely for that platform. If you don’t do one of these things, the user is doomed to tap away at their screen or keyboard until all their finger-skin is gone, or they give up. We need to fix that.
requestAutocomplete #
In a world of WebGL, WebRTC and other fancy web APIs that start with “Web”, requestAutocomplete
is rather unglamorous. However, it’s a superhero in beige clothing. A tiny, boring API that can stick a stake through the heart of the web payments time-vampire.
Rather than the site relying on a particular payment provider, it requests payment details from the browser, which stores them on the user’s behalf. Chrome's version of requestAutocomplete() also integrates with Google Wallet for US users only (currently). Give it a try on our test site.
form.requestAutocomplete #
Form elements carry a single new method, requestAutocomplete, which asks the browser to populate the form. The browser will display a dialog to the user asking for permission and allowing the user to select which details they’d like to provide. You can’t call this whenever you want, it needs to be called during the execution of particular interaction events such as mouse up/down, click, key and touch events. This is a deliberate security restriction.
button.addEventListener('click', function(event) {
form.requestAutocomplete();
event.preventDefault();
});
// TODO: listen for autocomplete events on the form
Before we look at the events, we need to make sure the browser understands your form fields…
Form requirements #
Back when the internet was in black and white, Internet Explorer 5 adopted a new attribute, autocomplete
, on form input elements. It could be set to “off” to stop the browser offering suggestions, and that was it. This API was extended so you can specify the expected content of the field without modifying the “name” attribute, and this is what requestAutocomplete
uses to link form fields to user data.
<input name="fullname" autocomplete="name">
As a specification, requestAutocomplete
isn’t payments-specific, but Chrome’s current implementation pretty much is. In future, expect browsers to be able to deal with other kinds of data, hopefully things like login details and password generator, passport information, and even uploading an avatar.
Currently in Chrome, requestAutocomplete
recognises the following:
Payment #
- cc-name - name on card
- cc-number - card number
- cc-exp-month - card expiry month as two digits
- cc-exp-year - card expiry year as four digits
- cc-csc - 3-4 digit card security code
<input type="email" autocomplete="email" name="email">
<input type="text" autocomplete="cc-name" name="card-name">
<input type="text" autocomplete="cc-number" name="card-num">
<input type="text" autocomplete="cc-exp-month" name="card-exp-month">
<input type="text" autocomplete="cc-exp-year" name="card-exp-year">
<input type="text" autocomplete="cc-csc" name="card-csc">
The “name” attributes I’ve used above are examples only, there’s no requirement to use particular values. If you’re going to reuse this form for users without requestAutocomplete
, which is the ideal, you’ll want to add labels, layout and basic HTML5 validation.
You’re not restricted to input elements either, you can use any form input type. For example, you could use <select>
for the card expiry fields.