Presenting is hard

How I commute

Why I don't like driving to the store

traffic map of LA
Google Maps

Meatspace payments: so easy, a baby can do it

Cyberspace payments: not so simple

guest checkout option address billing info email android keyboard shut up and take my money

Chrome Autofill

The right formula is hard to find

  • Intuitive UI
  • Localized field sets
  • Input validation

Agenda

  • A demo on the desktop
  • How to get it on your site
  • Feature set walkthrough
  • indoor skydiving

    Dan is blown away

  • A demo on mobile

Demo time!

Site Integration

Site Integration

  • Tweak your markup
  • Invoke the UI
  • Handle fallback cases

Site Integration

Tweak your markup

<form action="/gimme-da-money" method="post">
  <input name="full-name">
  <input name="credit-card">
  <input name="cvc">
  <input name="addr">
  <input name="zip">
  <input name="state">
</form>

HTML5 to the rescue!

Site Integration

Tweak your markup

<form action="/gimme-da-money" method="post">
  <input name="full-name" autocomplete="full-name">
  <input name="credit-card" autocomplete="cc-number">
  <input name="cvc" autocomplete="cc-csc">
  <input name="addr" autocomplete="billing address-line1">
  <input name="zip" autocomplete="billing postal-code">
  <input name="state" autocomplete="billing locality">
</form>

Site Integration

Invoke the UI

<script>
  // Don't start hacking away yet...
  document.forms[0].requestAutocomplete();
</script>

Site Integration

Invoke the UI

<button id="check-out">Check out</button>
<script>
  var button = document.getElementById('check-out');
  var form = document.forms[0];
  if ('requestAutocomplete' in form) {
    button.onclick = function() {
      form.requestAutocomplete();  // Invoke and show.
    };
    form.onautocomplete = function() { form.submit(); };
  } else {
    button.onclick = function() {
      location.href = 'old_checkout.php';  // Fallback.
    };
  }
</script>

Site Integration

Invoke the UI

<form action="/gimme-da-money" method="post" hidden>
  <input name="full-name" autocomplete="full-name">
  <input name="credit-card" autocomplete="cc-number">
  <input name="cvc" autocomplete="cc-csc">
  <input name="addr" autocomplete="billing address-line1">
  <input name="zip" autocomplete="billing postal-code">
  <input name="state" autocomplete="billing locality">
</form>

Site Integration

Handling fallback

Site Integration

Handling fallback

<script>
  form.onautocompleteerror = function(event) {
    if (event.reason == 'cancel') {
      return;
    } else {  // 'disabled' or 'invalid'
      location.href = 'old_checkout.php';
    }
  };
</script>

Chrome implementation

New Chrome Installs

Existing Google Users

One
time
only!
(cards)

Detect fraudsters

Like this guy →

Mobile screenshots

Mobile screenshots

Mobile screenshots

Mobile screenshots

Mobile screenshots

This is us

Questions?


Using requestAutocomplete()