Create Amazing Forms

Simplify checkout with requestAutocomplete API

While requestAutocomplete was designed to help users fill out any form, today its most common use is in eCommerce where shopping cart abandonment on the mobile web can be as high as 97% . Imagine 97% of people in a supermarket, with a cart brimming full of things that they want, flipping their cart over and walking out.

TL;DR

requestAutocomplete can greatly simplify the checkout process and improve the user experience.
If requestAutocomplete is available, hide the checkout form and move people directly to the confirmation page.
Ensure input fields include the appropriate autocomplete attribute.

Rather than the site relying on a particular payment provider, requestAutocomplete requests payment details (such as name, address and credit card information) from the browser, which are optionally stored by the browser much like other auto-complete fields.

`requestAutocomplete` flow

The ideal experience will show the requestAutocomplete dialog instead of loading the page that displays the checkout form. If all goes well, the user shouldn’t see the form at all. You can easily add requestAutoComplete to existing forms without having to change any field names. Simply add the autocomplete attribute to each form element with the appropriate value and add the requestAutocomplete() function on the form element. The browser will handle the rest.

Request autocomplete flow

                              
                                    var doRAC = document.getElementById("doRAC");
    doRAC.addEventListener("click", doRequestAutocomplete);

    form = document.getElementById("usrForm");
    form.addEventListener("autocompleteerror", requestAutocompleteError);
    form.addEventListener("autocomplete", requestAutocompleteCompleted);

    if (form.requestAutocomplete) {
      isRACSupported(true, "");
    } else {
      isRACSupported(false, "Please complete the form manually.");
    }
    
                               View full sample

The requestAutocomplete function on the form element indicates to the browser that it should populate the form. As a security feature, the function must be called via a user gesture like a touch or mouse click. A dialog is then displayed asking the user permission to populate the fields and which details they want to populate it with.

                              
                                    function requestAutocompleteCompleted(evt) {
      console.log("requestAutocomplete Completed", evt);
      form.classList.toggle("hidden", false);
    }

    function requestAutocompleteError(evt) {
      console.log("requestAutocomplete Error", evt);
      isRACSupported(false, "An error occured attempting to autocomplete the form.");
    }
    
                               View full sample

Upon completion of requestAutocomplete , the function will either fire the autocomplete event if it finished successfully, or autocompleteerror if it was unable to complete the form. If it completed successfully and the form validates to your needs, simply submit the form and proceed to the final confirmation.

Remember

If you're asking for any kind of personal information or credit card data, ensure the page is served via SSL. Otherwise the dialog will warn the user their information may not be secure.

Create Amazing Forms

Simplify checkout with requestAutocomplete API

`requestAutocomplete` flow

Next Sections

Authors

Create Amazing Forms

Simplify checkout with requestAutocomplete API

requestAutocomplete flow

Next Sections

Authors

`requestAutocomplete` flow