requestAutocomplete

Gunakan uang saya, bukan waktu saya

Jake Archibald

Pengantar

Saya suka web. Secara keseluruhan, menurut saya ini ide yang cukup bagus. Karena itu, saya terlibat dalam banyak debat web vs native. Tidak butuh waktu lama bagi orang lain untuk mulai berbicara tentang kemudahan pembayaran melalui sistem native. Respons saya biasanya adalah menjatuhkan bom asap dan berlari keluar ruangan sambil tertawa terbahak-bahak, karena itu bukanlah argumen yang bisa saya menangkan. Pengabaian keranjang belanja di web seluler dapat mencapai 97%. Bayangkan hal itu di dunia nyata. Bayangkan 97% orang di sebuah supermarket, dengan keranjang yang penuh dengan barang-barang yang mereka inginkan, lalu meninggalkan keranjang belanja dan berjalan keluar. Sekarang, sebagian dari orang-orang itu hanya menaikkan harga dan tidak pernah berniat membeli, tetapi pengalaman pengguna yang buruk saat membeli di web adalah kontributor yang signifikan. Kami membuat pengguna dikenai pajak atas kesehatan mereka. Pikirkan pengalaman pembayaran yang menyenangkan yang Anda alami di web, terutama di seluler. Ini adalah app store, bukan? Atau setidaknya sistem tertutup serupa yang sudah memiliki informasi pembayaran Anda. Ini adalah masalah. Hal ini mengharuskan situs untuk berkomitmen pada penyedia pembayaran tertentu yang harus sudah memiliki akun dan login pengguna, atau berkomitmen pada platform yang mengharuskan pengguna login ke penyedia jasa pembayaran tertentu, seperti app storex yang mengharuskan Anda membuat kode hanya untuk platform tersebut. Jika Anda tidak melakukan salah satu dari hal ini, pengguna akan sangat sering mengetuk layar atau keyboard sampai semua kulit jari mereka hilang, atau mereka menyerah. Kita harus memperbaikinya.

requestAutocomplete

Di dunia WebGL, WebRTC, dan API web canggih lainnya yang dimulai dengan “Web”, requestAutocomplete agak aneh. Namun, ini adalah pahlawan super dengan pakaian berwarna krem. API kecil dan membosankan yang dapat terus menempel di jantung vampir waktu pembayaran web.

Situs tidak mengandalkan penyedia jasa pembayaran tertentu dan meminta detail pembayaran dari browser, yang menyimpannya atas nama pengguna. Versi requestAutocomplete() Chrome juga terintegrasi dengan Google Wallet untuk pengguna AS saja (saat ini). Coba di situs uji coba kami.

form.requestAutocomplete

Elemen formulir menggunakan satu metode baru, requestAutocomplete, yang meminta browser untuk mengisi formulir. Browser akan menampilkan dialog kepada pengguna untuk meminta izin dan memungkinkan pengguna memilih detail mana yang ingin mereka berikan. Anda tidak dapat memanggilnya kapan pun Anda mau, metode ini perlu dipanggil selama eksekusi peristiwa interaksi tertentu seperti mouse atas/bawah, klik, tombol, dan peristiwa sentuh. Ini adalah pembatasan keamanan yang disengaja.

button.addEventListener('click', function(event) {
  form.requestAutocomplete();
  event.preventDefault();
});

// TODO: listen for autocomplete events on the form

Sebelum melihat peristiwa, kami perlu memastikan browser memahami kolom formulir Anda...

Persyaratan formulir

Sebelumnya, ketika internet hitam putih, Internet Explorer 5 menggunakan atribut baru, autocomplete, pada elemen input formulir. Opsi ini dapat disetel ke “nonaktif” untuk menghentikan browser yang menawarkan saran, dan selesai. API ini diperluas sehingga Anda dapat menentukan konten kolom yang diharapkan tanpa mengubah atribut “name”, dan inilah yang digunakan requestAutocomplete untuk menautkan kolom formulir ke data pengguna.

<input name="fullname" autocomplete="name">

Sebagai spesifikasi, requestAutocomplete tidak spesifik untuk pembayaran, namun penerapan Chrome saat ini hampir sama. Nantinya, browser akan dapat menangani jenis data lain. Semoga hal-hal seperti detail login dan pembuat sandi, informasi paspor, dan bahkan mengupload avatar.

Saat ini di Chrome, requestAutocomplete mengenali hal-hal berikut:

Pembayaran

• email
• cc-name - nama pada kartu
• cc-number - nomor kartu
• cc-exp-month - bulan kedaluwarsa kartu sebagai dua digit
• cc-exp-year - tahun kedaluwarsa kartu sebagai empat digit
• cc-csc - kode keamanan kartu 3-4 digit

<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">

Atribut “name” yang saya gunakan di atas hanyalah contoh, tidak ada persyaratan untuk menggunakan nilai tertentu. Jika Anda akan menggunakan kembali formulir ini untuk pengguna tanpa requestAutocomplete, yang ideal, Anda dapat menambahkan label, tata letak, dan validasi HTML5 dasar.

Anda juga tidak dibatasi pada elemen input, Anda dapat menggunakan jenis input formulir apa pun. Misalnya, Anda dapat menggunakan <select> untuk kolom masa berlaku kartu.

Alamat

• name - nama lengkap. Menulis nama lengkap sebagai satu {i>field<i} jauh lebih baik daripada beberapa {i>field<i}. Bidang seperti nama depan dan nama belakang menunjukkan bias Barat dan mungkin tidak masuk akal bagi budaya lain, juga lebih mudah untuk mengetik dalam satu bidang

• tel - nomor telepon lengkap termasuk kode negara, dapat di pilah menjadi

  • tel-country-code - mis. +44
  • tel-nasional - sisanya

• alamat jalan - alamat lengkap dengan komponen yang dipisahkan koma, dapat dipecah menjadi

  • baris-alamat1
  • address-line2 - mungkin kosong

• lokalitas - kota

• wilayah - Kode negara bagian, county, atau kanton

• kode pos - Kode pos, kode pos, kode pos

• country

Informasi di atas harus digunakan bersama dengan: - penagihan - pengiriman

<input type="text" autocomplete="billing name" required name="billing-name">
<input type="tel" autocomplete="billing tel" required name="billling-tel">
<input type="text" autocomplete="billing address-line1" required name="billing-address1">
<input type="text" autocomplete="billing address-line2" required name="billing-address2">
<input type="text" autocomplete="billing locality" required name="billing-locality">
<input type="text" autocomplete="billing region" required name="billing-region">
<input type="text" autocomplete="billing postal-code" required name="billing-postal-code">
<select autocomplete="billing country" required name="billing-country">
  <option value="US">United States</option>
  …
</select>

<input type="text" autocomplete="shipping name" name="shipping-name">
…

Sekali lagi, atribut nama adalah contoh, Anda dapat menggunakan apa pun yang Anda inginkan. Tentu saja tidak semua formulir harus meminta alamat pengiriman, misalnya, jangan menanyakan ke mana saya ingin kamar hotel diantarkan, lokasi saat ini sering kali menjadi nilai jual. Benar, jadi kita sudah memiliki formulir dan tahu cara meminta autocompletion. Tapi...

Kapan sebaiknya requestAutocomplete dipanggil?

Idealnya, Anda ingin menampilkan dialog requestAutocomplete, bukan memuat halaman yang menampilkan formulir checkout. Jika semuanya berjalan dengan baik, pengguna tidak akan melihat formulir itu sama sekali.

Pola yang umum adalah memiliki halaman keranjang dengan tombol “checkout” yang mengarahkan Anda ke formulir detail pembayaran. Dalam situasi ini, Anda ingin memuat formulir penagihan di halaman keranjang, tetapi menyembunyikannya dari pengguna, dan memanggil requestAutocomplete saat pengguna menekan tombol "checkout". Ingat, Anda harus menayangkan halaman keranjang melalui SSL untuk menghindari peringatan Skeletor. Untuk memulai, kita harus menyembunyikan tombol {i>checkout<i} sehingga pengguna tidak dapat mengekliknya sampai kita siap, tetapi kita hanya ingin melakukannya untuk pengguna dengan JavaScript. Jadi, di bagian head halaman Anda:

<script>document.documentElement.className += ' js';</script>

Dan di CSS Anda:

.js #checkout-button,
#checkout-form.for-autocomplete {
  display: none;
}

Kita harus menyertakan formulir penagihan di halaman keranjang. Ini bisa terjadi di mana saja, CSS di atas memastikannya tidak terlihat oleh pengguna.

<form id="checkout-form" class="for-autocomplete" action="/checkout" method="post">
  …fields for payment, billing address &amp; shipping if relevant…
</form>

Sekarang JavaScript kita dapat mulai menyiapkan semuanya:

function enhanceForm() {
  var button = document.getElementById('checkout-button');
  var form = document.getElementById('checkout-form');

  // show the checkout button
  button.style.display = 'block';

  // exit early if there's no requestAutocomplete support
  if (!form.requestAutocomplete) {
    // be sure to show the checkout button so users can
    // access the basic payment form!
    return;
  }

  button.addEventListener('click', function(event) {
    form.requestAutocomplete();
    event.preventDefault();
  });

  // TODO: listen for autocomplete events on the form
}

Anda akan memanggil enhanceForm di halaman keranjang, beberapa saat setelah formulir dan tombol checkout. Browser yang mendukung requestAutocomplete akan mendapatkan pengalaman baru yang keren, dan browser lain akan kembali ke metode pembayaran normal Anda. Untuk poin bonus, Anda dapat memuat HTML formulir melalui XHR sebagai bagian dari enhanceForm. Artinya, Anda hanya dapat memuat formulir di browser yang mendukung requestAutocomplete, dan tidak perlu lupa untuk menambahkan formulir ke setiap halaman tempat Anda dapat memanggil enhanceForm. Berikut adalah cara kerja situs demo.

Anda telah memanggil requestAutocomplete, lalu bagaimana?

Proses pelengkapan otomatis bersifat asinkron, requestAutocomplete langsung ditampilkan. Untuk mengetahui bagaimana hal itu berjalan, kita memproses beberapa peristiwa baru:

form.addEventListener('autocomplete', function() {
  // hurrah! You got all the data you needed
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    // the form was populated, but it failed html5 validation
    // eg, the data didn't match one of your pattern attributes
  }
  else if (event.reason == 'cancel') {
    // the user aborted the process
  }
  else if (event.reason == 'disabled') {
    // the browser supports requestAutocomplete, but it's not
    // available at this time. Eg, it wasn't called from an
    // interaction event or the page is insecure
  }
});

Jika semuanya bekerja, Anda dapat melakukan apa pun yang Anda inginkan dengan data, hal paling sederhana untuk dilakukan adalah mengirimkan formulir. Server kemudian dapat memvalidasi data dan memberikan halaman konfirmasi kepada pengguna termasuk biaya pengiriman. Jika data tidak valid, Anda dapat menampilkan formulir dan menandai kolom yang perlu diubah pengguna. Atau, Anda dapat mengirimkan formulir dan membiarkan validasi sisi server reguler mengambil alih. Jika pengguna membatalkan proses, Anda tidak perlu melakukan apa pun. Jika fitur ini dinonaktifkan, arahkan pengguna ke formulir reguler. Jadi dalam kebanyakan kasus, pendengar Anda akan terlihat seperti...

form.addEventListener('autocomplete', function() {
  form.submit();
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    form.submit();
  }
  else if (event.reason != 'cancel') {
    window.location = '/checkout-page/';
  }
});

Di mana browser menyimpan data saya?

Spesifikasi tersebut tidak menentukan di mana data akan disimpan, sehingga {i>browser<i} dapat berinovasi. Jika Anda login ke Chrome, Anda akan mendapatkan opsi untuk menyimpan detail di Google Wallet, sehingga dapat diakses di perangkat lain yang Anda gunakan untuk login. Jika Anda menyimpan detail Anda di Wallet, nomor kartu asli Anda tidak akan ditangani oleh requestAutocomplete, sehingga meningkatkan keamanan. Jika Anda tidak login ke Chrome, atau memilih untuk tidak menggunakan Google Wallet, detail Anda akan disimpan secara lokal di browser agar dapat digunakan kembali. Hal ini merupakan kondisi saat ini, namun di masa mendatang Chrome dan browser lain mungkin akan menggunakan penyedia pembayaran tambahan.

Mempermudah pembayaran

Rasanya konyol jika pengguna harus memasukkan informasi pembayaran berulang kali kapan pun mereka ingin melakukan pembelian. Segala sesuatunya menjadi lebih mudah ketika situs menyimpan detail pembayaran Anda, saya sedikit tidak nyaman dengan berapa banyak situs yang menyimpan detail kartu saya. Ini adalah masalah sempurna yang harus diselesaikan oleh standar web. requestAutocomplete dapat menghadirkan pembayaran sekali klik ke seluruh web, tanpa terikat layanan atau platform, dan juga waktu.

Putaran bonus: Menangani formulir multi-halaman

Jauh lebih baik untuk memanggil requestAutocomplete sekali dan mengumpulkan semua data yang Anda butuhkan. Jika Anda tidak dapat mengubah server untuk menerima semua data ini sekaligus, tidak apa-apa, ambil data dari formulir yang telah diisi dan kirimkan, dengan cara yang paling sesuai untuk Anda. Anda dapat menggunakan fungsi kecil yang bagus ini untuk mengambil semua data yang saat ini didukung sebagai objek sederhana, tanpa harus membuat formulir sendiri. Setelah memiliki data, Anda dapat mengubahnya ke dalam format apa pun yang dibutuhkan server, dan mempostingnya dalam beberapa langkah.

checkoutButton.addEventListener('click', function() {
  requestUserData({
    billing: true,
    shipping: true
  }, function(response) {
    if (response.err == 'cancel') {
      // exit silently
      return;
    }
    if (response.err) {
      // fall back to normal form
      window.location.href = '/normal-checkout-form/';
      return;
    }

    // the rest is just made-up pseudo code as an example
    postToServer(data.shipping).then(function() {
      return postToServer(data.billing);
    }).then(function() {
      return postToServer(data.cc);
    }).catch(function() {
      // handle error
    });
  });
});