requestAutocomplete

Zamanımı değil paramı al

Jake Archibald

Giriş

Web'i seviyorum. Sonuçta bence oldukça iyi bir fikir. Bu nedenle, birçok farklı internet tartışmasına katılıyorum. Karşınızdaki kişinin yerel sistemler üzerinden ödeme yapmanın kolaylığından bahsetmeye başlaması uzun sürmez. Her zamanki yanıtım sis bombası atıp çılgınca gülerek odadan çıkmak oluyor çünkü bu kazanabileceğim bir tartışma değil. Mobil web'de alışveriş sepetini terk etme oranı %97'ye kadar çıkabilir. Bunu gerçek dünyada hayal edin. Bir süpermarkette alışveriş yapan kullanıcıların% 97'sinin olduğunu ve istedikleriyle dolu bir alışveriş sepetinin alışveriş sepetini ters çevirerek dışarı çıktığını düşünün. Şimdiyse bu kullanıcılardan bazıları yalnızca fiyatları yükseltiyor ve satın alma niyeti hiç yoktu. Ancak web'de alışveriş yaparken hissedilen korkunç kullanıcı deneyimi bunun önemli bir katkısı. Sağlıkları gereği kullanıcılardan vergi alıyoruz. Web'de, özellikle de mobilde keyif aldığınız bir ödeme deneyimi düşünün. Uygulama mağazası, değil mi? Ya da en azından ödeme bilgilerinizin zaten bulunduğu benzer bir kapalı sistem. Bu bir sorundur. Sitelerin, kullanıcının hesabına sahip olması ve giriş yapmış olması gereken belirli bir ödeme sağlayıcısını taahhüt etmesini veya yalnızca bu platform için kodlama yapmanızı gerektiren uygulama mağazaları gibi kullanıcıların belirli bir ödeme sağlayıcıya giriş yapmasını gerektiren bir platformu taahhüt etmesini gerektirir. Bunlardan birini yapmazsanız kullanıcı, parmaklarının tüm derisi kaybolana ya da vazgeçene kadar ekranına veya klavyesine dokunmak zorunda kalacak. Bunu düzeltmemiz gerekiyor.

requestAutocomplete

Not: Web'in Temelleri sitemizde çok daha güncel form eğiticilerinin yanı sıra requestAutocomplete hakkında daha ayrıntılı bilgiler de bulabilirsiniz.

WebGL, WebRTC ve "Web" ile başlayan diğer süslü web API'leri dünyasında requestAutocomplete oldukça sıra dışıdır. Ancak bu karakter, bej kıyafetler giyen bir süper kahramandır. Web ödemelerinin kalbinde söz sahibi olabilecek küçük, sıkıcı bir API, zaman vampiri.

Belirli bir ödeme sağlayıcıyı temel alan site yerine, tarayıcıdan ödeme ayrıntılarını istiyor ve bu ayrıntıları kullanıcının adına depoluyor. Chrome'un requestAutocomplete() sürümü ayrıca yalnızca ABD'deki kullanıcılar için (şu anda) Google Cüzdan ile de entegre edilebilir. Test sitemizde deneyin.

form.requestAutocomplete

Form öğelerinde, tarayıcıdan formu doldurmasını isteyen yeni bir requestAutocomplete yöntemi kullanılır. Tarayıcı, kullanıcıya izin isteyen bir iletişim kutusu gösterir ve kullanıcının sağlamak istediği ayrıntıları seçmesine olanak tanır. Bunu istediğiniz zaman çağıramazsınız. Fare yukarı/aşağı, tıklama, tuş ve dokunma etkinlikleri gibi belirli etkileşim etkinliklerinin yürütülmesi sırasında ç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

.

Not: Etkinlikleri JavaScript kitaplığı kullanarak ekliyorsanız bazılarının etkinlikleri yeniden dağıtarak orijinal etkileşimin bağlantısını kaybedeceğini unutmayın. Bu durumda, otomatik tamamlama isteğinde bulunduğunuz çağrı güvenlik kontrolünde başarısız olacaktır. Bu durumda addEventListener öğesini doğrudan yukarıdaki gibi kullanın.

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

Form şartları

İnternet siyah beyaz olduğunda, Internet Explorer 5 form giriş öğelerinde yeni bir özellik olan autocomplete benimsedi. Tarayıcının öneriler sunmasını durdurmak için düğme "kapalı" olarak ayarlanmış olabilir. İşte bu kadar. "Ad" özelliğini değiştirmeden alanın beklenen içeriğini belirtebilmeniz için bu API genişletildi. requestAutocomplete, form alanlarını kullanıcı verilerine bağlamak için bunu kullanır.

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

Spesifikasyon olarak requestAutocomplete, ödemelere özel değildir. Ancak Chrome'un mevcut uygulaması neredeyse böyledir. Gelecekte tarayıcılar, giriş bilgileri, şifre oluşturma aracı, pasaport bilgileri ve hatta avatar yükleme gibi diğer verileri işleyebilir.

requestAutocomplete şu an için Chrome'da şunları tanır:

Ödeme

• e-posta
• cc-adı - karttaki ad
• cc-number - kart numarası
• cc-exp-month - iki basamaklı kart son kullanma ayı
• cc-exp-year - dört basamaklı kart son kullanma yılı
• 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 "name" özellikleri yalnızca örnektir. Belirli değerleri kullanma zorunluluğu yoktur. Bu formu requestAutocomplete kullanmayan kullanıcılar için yeniden kullanacaksanız (en uygunu) etiketler, düzen ve temel HTML5 doğrulaması eklemeniz faydalı olacaktır.

Giriş öğeleriyle sınırlı değilsiniz. Tüm form giriş türlerini kullanabilirsiniz. Örneğin, kart geçerlilik sonu alanları için <select> kullanabilirsiniz.

Not: RequestAutocomplete şimdilik yalnızca ödemelere yönelik olduğundan,

reklamınıza en az bir kredi kartı ile ilgili alan eklemenizi gerektirir ve yalnızca SSL ile şifrelenmiş sayfalarda çalışır. Geliştiricilerin kodlarını daha hızlı çalıştırmalarına yardımcı olmak için Chrome, requestAutocomplete'in tam olarak geliştirici konsoluna neden başarısız olduğunu kaydeder.

Ayrıntılı konsol mesajı

Adres

• ad - tam ad. Tam adı tek bir alan olarak almak, birden fazla alandan çok daha iyidir. Ad ve soyadı gibi birden çok alan, Batılı ön yargıları gösterir ve diğer kültürlere hitap etmeyebilir. Tek bir alana yazmak daha kolaydır.

• tel - ülke kodu dahil tam telefon numarası; alternatif olarak bölümlere ayrılabilir

  • tel-country-code - ör. +44
  • tel-ulusal - gerisi

• sokak-adresi - bileşenleri virgülle ayrılmış olarak tam adres, ayrılabilir

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

• konum - şehir/ilçe

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

• posta kodu - Posta kodu, posta kodu, posta kodu

• country

Yukarıdakilerle 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 özellikleri de örnek olarak verilebilir. İstediğinizi kullanabilirsiniz. Elbette tüm formlarda gönderim adresi talep edilmemelidir (ör. bana otel odamın nereye teslim edilmesini istediğimi sormayın. Şu anda bulunduğum konum çoğu zaman satışımı artıran özellik oluyor. Evet, formumuz geldi ve autocompletion isteğinde nasıl bulunulacağını biliyoruz. Ancak...

Otomatik tamamlama ne zaman çağrılmalıdır?

İdeal olan, ödeme formunun gösterildiği sayfayı yüklemek yerine requestAutocomplete iletişim kutusunu göstermektir. Her şey yolunda giderse kullanıcı formu hiç görmeyecektir.

Genellikle ödeme ayrıntıları formuna yönlendiren "ödeme" düğmesi bulunan bir alışveriş sepeti sayfası bulunur. Bu durumda, alışveriş sepeti sayfasında faturalandırma formunuzu yüklemek, ancak kullanıcıdan gizlemek ve kullanıcı "ödeme" düğmesine bastığında formda requestAutocomplete yöntemini çağırmak isteyebilirsiniz. İskeletor uyarısını almamak için alışveriş sepeti sayfanızı SSL üzerinden sunmanız gerektiğini unutmayın. Başlangıç olarak, ödeme düğmemizi gizleyerek kullanıcıların biz hazır olana kadar tıklayamaması gerekir. Ancak bunu yalnızca JavaScript kullanan kullanıcılar için yapmak istiyoruz. Bu nedenle, sayfanızın başlık bölümünde:

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

CSS'nizde:

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

Alışveriş sepeti sayfamıza faturalandırma formunu eklememiz gerekiyor. Bu her yere gidebilir. Yukarıdaki CSS, kodun kullanıcı tarafından görülmemesini sağlar.

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

JavaScript'imiz artık 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
}

enhanceForm adlı satıcıyı alışveriş sepeti sayfasında, ödeme formunuz ve düğmenizden bir süre sonra ararsınız. requestAutocomplete desteği olan tarayıcılar hızlı ve eğlenceli bir deneyim yaşar. Diğer tarayıcılar ise normal ödeme şeklinizi kullanmaya devam eder. Bonus puanlar için HTML formunu enhanceForm kapsamında XHR aracılığıyla yüklemek isteyebilirsiniz. Bu, formu yalnızca requestAutocomplete destekleyen tarayıcılarda yükleyebileceğiniz ve enhanceForm yöntemini çağırabileceğiniz her sayfaya formu eklemeyi hatırlamanız gerekmediği anlamına gelir. Demo sitesi bu şekilde çalışır.

Otomatik tamamlama isteğinde bulundunuz, şimdi ne olacak?

Otomatik tamamlama işlemi eş zamansızdır, requestAutocomplete anında geri döner. Bunun nasıl gittiğini anlamak için birkaç yeni etkinliğe kulak veriyoruz:

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 yolundaysa verilerle istediğiniz her şeyi yapabilirsiniz. Yapılacak en basit şey formu göndermektir. Daha sonra sunucu verileri doğrulayabilir ve kullanıcıya teslimat maliyetini içeren bir onay sayfası verebilir. Veriler geçersizse formu gösterebilir ve kullanıcının değişiklik yapması gereken alanları vurgulayabilirsiniz. Alternatif olarak, formu gönderip normal sunucu tarafı doğrulamanızın devralmasını sağlayabilirsiniz. Kullanıcı işlemi iptal ettiyse herhangi bir işlem yapmanız gerekmez. Özellik devre dışıysa kullanıcıyı normal forma gönderin. Çoğu durumda dinleyicileriniz...

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 depolar?

Spesifikasyon verilerin nerede saklanacağını belirtmez ve tarayıcılar yenilik yapabilir. Chrome'da oturum açtıysanız ayrıntıları Google Cüzdan'da saklama seçeneği sunulur. Böylece, giriş yaptığınız diğer cihazlardan bu bilgilere erişebilirsiniz. Bilgilerinizi Cüzdan'da saklarsanız gerçek kart numaranız requestAutocomplete tarafından işleme alınmaz. Bu da güvenliği artırır. Chrome'a giriş yapmadıysanız veya Google Cüzdan'ı kullanmamayı seçerseniz bilgileriniz, isteğe bağlı olarak yeniden kullanılmak üzere tarayıcıda yerel olarak depolanır. Şu an için bu durum geçerli, ancak gelecekte Chrome ve diğer tarayıcılar ek ödeme sağlayıcılar kullanmaya başlayabilir.

Ödemeleri kolaylaştırma

Kullanıcıların satın alma işlemi gerçekleştirmek istediklerinde ödeme bilgilerini tekrar tekrar girmek zorunda olmaları çok saçma bir şey. Bir sitede ödeme bilgileriniz depolandığında işler kolaylaşır. Kart bilgilerimi kaç sitenin sakladığı konusunda biraz rahatsızım. Bu, web standartlarının çözülmesi gereken mükemmel bir sorun. requestAutocomplete, hizmet veya platforma bağlı kalmadan tek tıklamayla ve web'in tamamından ödeme alabilir.

Bonus turu: Çok sayfalı formları işleme

requestAutocomplete numaralı telefonu bir kez arayıp ihtiyacınız olan tüm verileri toplamak çok daha iyidir. Sunucunuzu tüm bu verileri tek seferde alacak şekilde değiştiremiyorsanız sorun değil, verileri doldurduğunuz formdan alıp size en uygun şekilde gönderin. Şu anda desteklenen tüm verileri form oluşturmak zorunda kalmadan basit bir nesne olarak yakalamak için bu küçük şık işlevi kullanabilirsiniz. Elinizde verileri aldıktan sonra, sunucunuzun ihtiyacı olan herhangi bir biçime dönüştürüp birkaç adımda gönderebilirsiniz.

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