requestAutocomplete

Zamanımı değil, paramı al

Jake Archibald

Giriş

Web'i seviyorum. Sonuç olarak bence bu oldukça iyi bir fikir. Bu nedenle, web'de ve yerel dilde tartışmalara katılıyorum. Diğer kişinin yerel sistemler aracılığıyla ödeme kolaylığından bahsetmeye başlaması çok uzun sürmez. Her zamanki tepkim bir sis bombası atıp odadan çıkıp çılgınca gülmek, çünkü bu kazanabileceğim bir tartışma değil. Mobil web'de alışveriş sepetini terk etme oranı %97'ye kadar yüksek olabilir. Bunu gerçek dünyada hayal edin. Bir süpermarketteki kullanıcıların% 97'sinin, bir alışveriş sepetinin arzu ettiği şeylerle dolu olduğunu, arabalarını çevirip ayrıldığını hayal edin. Şu anda bu kullanıcıların bazıları yalnızca fiyatlarını yükseltiyor ve hiçbir zaman satın alma niyeti yokken web üzerinden satın alma gibi korkunç kullanıcı deneyimleri de önemli bir etken. Kullanıcıları vergi düzenlemelerine karşı teşvik ediyoruz. Özellikle mobil cihazlarda, internette yaşadığınız güzel bir ödeme deneyimini düşünün. Burası bir uygulama mağazası, değil mi? Ya da en azından ödeme bilgilerinizi zaten barındıran benzer bir kapalı sistem. Bu bir sorundur. Sitelerin belirli bir ödeme sağlayıcıya taahhütte bulunması ve kullanıcının zaten bir hesabının olması ve giriş yapmış olması veya kullanıcıların belirli bir ödeme sağlayıcıya giriş yapmasını gerektiren bir platforma (ör. yalnızca ilgili platform için kodlama yapmanızı gerektiren uygulama mağazaları) taahhütte bulunması gerekir. Bunlardan birini yapmazsanız kullanıcı, tüm parmak cildi kayboluncaya veya vazgeçene kadar ekranını veya klavyesini başka bir yere dokunmaya mahkum olur. Bu sorunu düzeltmemiz gerekiyor.

requestAutocomplete

WebGL, WebRTC ve "Web" ile başlayan diğer havalı web API'leri dünyasında requestAutocomplete pek hoş görünmemektedir. Ancak karakter bej kıyafetli bir süper kahraman. Web ödemeleri için zamanın en iyi olduğu, küçücük ve sıkıcı bir API.

Site, belirli bir ödeme sağlayıcıyı temel almak yerine, ödeme ayrıntılarını kullanıcı adına saklayan tarayıcıdan ister. Chrome'un requestAutocomplete() sürümü, yalnızca ABD'deki kullanıcılar (şu anda) için Google Cüzdan ile de entegre edilmiştir. Test sitemizde deneyin.

form.requestAutocomplete

Form öğelerinde tek bir yeni yöntem olan requestAutocomplete, tarayıcıdan formu doldurmasını ister. Tarayıcı, kullanıcıya izin isteyen ve sağlamak istediği ayrıntıları seçebilmesini isteyen bir iletişim kutusu görüntüler. Bu işlevi istediğiniz zaman çağıramazsınız. Fare yukarı/aşağı, tıklama, tuş ve dokunma etkinlikleri gibi belirli etkileşim etkinlikleri yürütülürken çağrılması gerekir. Bu, kasıtlı bir güvenlik kısıtlamasıdır.

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

// TODO: listen for autocomplete events on the form

Etkinliklere bakmadan önce, tarayıcının form alanlarınızı anladığından emin olmamız gerekir...

Form gereksinimleri

İnternet siyah beyaz olduğunda Internet Explorer 5, form girişi öğelerinde yeni bir özellik olan autocomplete'i benimsedi. Tarayıcının öneri sunmasını durdurmak için bu düğme "kapalı" olarak ayarlanabilirdi. Hepsi bu kadar. Bu API'nın kapsamı genişletildi. Böylece, "name" özelliğini değiştirmeden alanın beklenen içeriğini belirtebilirsiniz. requestAutocomplete, form alanlarını kullanıcı verilerine bağlamak için bu API'yi kullanır.

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

Spesifikasyon olarak requestAutocomplete, ödemelere özel değildir, ancak Chrome'un şu anki uygulaması hemen hemen aynı şekilde çalışmaktadır. Gelecekte, tarayıcıların giriş bilgileri ve şifre oluşturma aracı, pasaport bilgileri gibi şeyler ve hatta avatar yükleme gibi konularla başa çıkabilmesini bekleyebilirsiniz.

requestAutocomplete şu anda Chrome'da şunları tanır:

Ödeme

• e-posta
• cc-name - karttaki ad
• cc-number - kart numarası
• cc-exp-month - kartın son kullanma ayı (iki basamaklı)
• cc-exp-year - kartın son kullanma tarihi (dört basamaklı)
• cc-csc - 3-4 haneli kart güvenlik kodu

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

Yukarıda kullandığım "ad" özellikleri yalnızca örnek niteliğindedir. Özel değerlerin kullanılması zorunlu değildir. Bu formu requestAutocomplete kullanmayan kullanıcılar için yeniden kullanacaksanız (ideal seçenek), etiketler, düzen ve temel HTML5 doğrulaması eklemeniz gerekir.

Giriş öğeleriyle sınırlı değilsiniz. Herhangi bir form giriş türünü kullanabilirsiniz. Örneğin, kartın son geçerlilik tarihi alanları için <select> değerini kullanabilirsiniz.

Adres

• ad - tam ad. Tam adı tek bir alan olarak almak, birden fazla alandan çok daha iyidir. Ad ve soyadı gibi birden fazla alan Batılı bir yaklaşıma sahiptir ve başka kültürlere anlam vermeyebilir. Tek bir alana yazmak daha kolaydır.

• tel - ülke kodunu içeren tam telefon numarası

  • tel-ülke-kodu - ör. +44
  • tel-national - kalan

• sokak-adresi - bileşenlerin virgülle ayrıldığı tam adres

  • adres-satırı1
  • adres-satırı2 - boş olabilir

• şehir - şehir/ilçe

• bölge - Eyalet kodu, ilçe veya kanton

• posta kodu: Posta kodu, posta kodu

• country

Yukarıdaki bilgiler şunlarla birlikte kullanılmalıdır: - faturalandırma - gönderim

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

Ad özelliklerini tekrar örnek olarak verebiliriz. İstediğiniz her şeyi kullanabilirsiniz. Elbette tüm formlarda gönderim adresi istenmemelidir.Örneğin, otel odamın nereye teslim edilmesini istediğimi sormayın. Genellikle satış noktası şu anki konumdur. Evet, elimizde formumuz var ve autocompletion için nasıl istekte bulunacağımızı biliyoruz. Ancak...

requestAutocomplete ne zaman çağrılmalıdır?

İdeal olarak ödeme formunun gösterildiği sayfa yüklemek yerine requestAutocomplete iletişim kutusunu göstermeniz gerekir. Her şey yolunda giderse kullanıcı formu hiçbir şekilde görmez.

Yaygın olarak kullanılan bir yöntem, sizi ödeme ayrıntıları formuna yönlendiren "ödeme" düğmesi içeren bir alışveriş sepeti sayfasıdır. Bu durumda faturalandırma formunuzu alışveriş sepeti sayfasına yüklemek, ancak kullanıcıdan gizlemek ve kullanıcı "ödeme" düğmesine bastığında requestAutocomplete numarasını aramak istersiniz. Skeletor uyarısıyla karşılaşmamak için alışveriş sepeti sayfanızı SSL aracılığıyla sunmanız gerektiğini unutmayın. Başlangıç olarak, kullanıcıların biz hazır olana kadar tıklaymaması için ödeme düğmemizi gizlemeliyiz, ancak bunu yalnızca JavaScript kullanan kullanıcılar için yapmak istiyoruz. Bunun için sayfanızın başlığında:

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

Ve CSS'nizde:

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

Alışveriş sepeti sayfamıza faturalandırma formunu eklememiz gerekir. Bu dosya herhangi bir yere gidebilir. Yukarıdaki CSS, kullanıcıya görünür durumda olmadığından emin olur.

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

Artık JavaScript'imiz her şeyi ayarlamaya başlayabilir:

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
}

Ödeme formunuzdan ve düğmenizden bir süre sonra, alışveriş sepeti sayfasında enhanceForm numaralı telefonu ararsınız. requestAutocomplete destekleyen tarayıcılar bu yepyeni ve hızlı deneyimi kullanırken diğer tarayıcılar normal ödeme şeklinizi kullanmaya başlayacak. Bonus puan için enhanceForm formunun bir parçası olarak XHR üzerinden HTML formunu yükleyebilirsiniz. Bu, formu yalnızca requestAutocomplete destekleyen tarayıcılarda yükleyebileceğiniz ve enhanceForm yöntemini çağırabileceğiniz her sayfaya formu eklemeyi unutmamanız gerektiği anlamına gelir. Demo sitesinin işleyiş şekli bu şekildedir.

requestAutocomplete'i çağırdınız, şimdi ne olacak?

Otomatik tamamlama işlemi eşzamansızdır ve requestAutocomplete hemen geri döner. Bu sürecin nasıl gittiğini öğrenmek için birkaç yeni etkinlik dinledik:

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
  }
});

Her şey işe yaradıysa verilerle her şeyi yapabilirsiniz. Yapılacak en basit şey formu göndermektir. Sunucu, daha sonra verileri doğrulayabilir ve kullanıcıya teslimat maliyetini içeren bir onay sayfası sunabilir. Veriler geçersizse formu gösterebilir ve kullanıcının değiştirmesi gereken alanları vurgulayabilirsiniz. Alternatif olarak, formu gönderebilir ve normal sunucu tarafı doğrulamanızın devralmasını sağlayabilirsiniz. Kullanıcı işlemi iptal ettiyse başka bir şey yapmanız gerekmez. Bu özellik devre dışıysa kullanıcıyı normal forma gönderin. Çoğu durumda, dinleyicileriniz aşağıdaki gibi görünür.

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/';
  }
});

Tarayıcı, verilerimi nerede depoluyor?

Spesifikasyon, verilerin nerede depolanacağını belirtmiyor ve böylece tarayıcıların yenilik yapmasını sağlıyor. Chrome'a giriş yaptıysanız ayrıntıları Google Cüzdan'da depolama seçeneği sunulur. Böylece, giriş yaptığınız diğer cihazlardan bu ayrıntılara erişebilirsiniz. Bilgilerinizi Cüzdan'da saklarsanız gerçek kart numaranız requestAutocomplete tarafından değiştirilmez ve güvenlik artırılır. Chrome'a giriş yapmadıysanız veya Google Cüzdan'ı kullanmamayı seçerseniz bilgileriniz isteğe bağlı olarak tarayıcıda yerel olarak yeniden kullanılmak üzere depolanır. Şu anda bu durum geçerlidir, ancak gelecekte Chrome ve diğer tarayıcılar ek ödeme sağlayıcıları benimseyebilir.

Ödemeleri kolaylaştırma

Kullanıcıların bir satın alma işlemi yapmak istediklerinde ödeme bilgilerini tekrar tekrar girmek zorunda kalmaları çok saçma. Siteler ödeme ayrıntılarınızı sakladığında işler kolaylaşıyor. Kaç sitenin kart bilgilerimi sakladığı konusunda biraz endişelerim var. Bu, web standartlarının çözülmesi gereken mükemmel bir problemdir. requestAutocomplete, tek tıklamayla ödemeleri hizmete veya platforma bağımlı olmadan ve zamanla Web'in tamamına taşıyabilir.

Bonus tur: Çok sayfalı formları yönetme

requestAutocomplete numarasını bir kez arayıp ihtiyacınız olan tüm verileri toplamak çok daha iyidir. Sunucunuzu tüm bu verileri bir defada alacak şekilde değiştiremiyorsanız, sorun değil. Verileri doldurduğunuz formdan çıkarıp sizin için en uygun olanı gönderin. Şu anda desteklenen tüm verileri kendiniz form oluşturmak zorunda kalmadan basit bir nesne olarak yakalamak için bu küçük işlevi kullanabilirsiniz. Verileri aldıktan sonra, sunucunuzun ihtiyacı olan biçime dönüştürebilir ve birden çok adımda yayınlayabilirsiniz.

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
    });
  });
});