Ödeme formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

Bu codelab'i takip etmek için bu Glitch'i ikinci bir sekmede açın.

Bu codelab'de güvenli, erişilebilir ve kullanımı kolay bir ödeme formunu nasıl oluşturabileceğiniz anlatılmaktadır.

Dikkat: Bu makale, ödeme formlarına yönelik ön uç en iyi uygulamaları hakkındadır. Bu bölümde, işlemleri sitenizde nasıl uygulayacağınız açıklanmamaktadır. Web sitenize ödeme işlevi ekleme hakkında daha fazla bilgi edinmek için Web Ödemeleri'ne bakın.

1. Adım: HTML'yi gerektiği gibi kullanın

İş için oluşturulan öğeleri kullanın:

• <form>
• <section>
• <label>
• <input>, <select> <textarea>
• <button>

Göreceğiniz gibi bu öğeler yerleşik tarayıcı işlevini etkinleştirir, erişilebilirliği ve biçimlendirmenizi öneririm.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.

index.html ürünündeki formunuzun HTML'sine göz atın.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Kart numarası, karttaki ad, son kullanma tarihi ve güvenlik kodu için <input> öğe vardır. Hepsi <section> öğeleri içine yerleştirilir ve her biri bir etikete sahiptir. Ödemeyi Tamamla düğmesi, Google Etiket Yöneticisi'nin <button>. Bu codelab'in ilerleyen bölümlerinde, bu unsurlardan bazıları.

Not: <input> öğelerinin kapanış etiketleri yok. Bunun nedeni, bunların geçersiz (boş) öğeler olmalarıdır: Bu öğelerde içerik bulunmaz. "/" karakterinin sondaki karakteri isteğe bağlıdır: <input> veya <input /> kullanılabilir.

Ödeme formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın.

• Form, bu haliyle yeterince iyi çalışıyor mu?
• Daha iyi çalışmasını sağlamak için değiştirmek istediğiniz bir şey var mı?
• Peki ya mobil cihazlarda?

Kaynak kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.

2. Adım: Mobil ve masaüstü için tasarlayın

Eklediğiniz HTML geçerli, ancak varsayılan tarayıcı stili, özellikle mobil cihazda. Ayrıca, çok da iyi görünmüyor.

Dolguları, kenar boşlukları ve alanları ayarlayarak formlarınızın çeşitli cihazlarda düzgün çalıştığından emin olmanız gerekir. yazı tipi boyutları kullanabilirsiniz.

Aşağıdaki tüm CSS'leri kopyalayıp kendi css/main.css dosyanıza yapıştırın.

Bu ne kadar çok CSS! Dikkat edilmesi gereken başlıca noktalar, boyutlarda yapılan değişikliklerdir:

• padding ve margin girişlere eklendi.
• font-size ve diğer değerler, farklı görüntü alanı boyutları için birbirinden farklıdır.

Hazır olduğunuzda, stil özellikleri ayarlanmış formu görmek için Uygulamayı Görüntüle'yi tıklayın. Ayrıca kenarlıklarda gördüğünüz gibi ayarlanmıştır ve etiketler için display: block; kullanılır. Böylece, kendi başına bir satıra geçerler ve tam genişlikte olabilir. Oturum açma formuyla ilgili en iyi uygulamalar bu yaklaşımın yararlarını daha ayrıntılı bir şekilde açıklıyor.

:invalid seçici, bir girişte geçersiz değer olduğunu belirtmek için kullanılır. ( daha sonra tekrar deneyin.)

CSS, mobil önceliklidir:

• Varsayılan CSS, genişliği 400px değerinden küçük görüntü alanları içindir.
• Medya sorguları en az 400px genişliğindeki görüntü alanlarında varsayılanı geçersiz kılmak ve daha sonra en az 500px genişliğinde görüntü alanları. Bu yöntem, daha küçük telefonlarda ve mobil cihazlarda iyi performans gösterir. daha büyük ekranlarda ve masaüstünde.

Web için derleme yaparken farklı cihazlarda ve görüntü alanı boyutlarında test yapmanız gerekir. İşte bu küçük bir aksaklık nedeniyle kullanılamaz hale getirebilirsiniz. Her zaman CSS ayrılma noktalarını kullanarak ve hedef cihazlarınıza göre değişir.

• Formun tamamı görülebiliyor mu?
• Formdaki girişler yeterince büyük mü?
• Metnin tamamı okunabiliyor mu?
• Gerçek bir mobil cihaz kullanmakla formun görüntülenmesi arasında herhangi bir fark olduğunu fark ettiniz mi? Chrome Geliştirici Araçları'ndaki cihaz modu nasıl?
• Kesme noktalarını ayarlamanız gerekti mi?

Formunuzu farklı cihazlarda test etmenin birkaç yolu vardır:

• Chrome Geliştirici Araçları Cihaz Modu'nu kullanma simüle eder.
• URL'yi bilgisayarınızdan telefonunuza gönderin.
• Bir aralık üzerinde test yapmak için BrowserStack gibi bir hizmet kullanın cihazlar ve tarayıcılar.

3. Adım: Kullanıcıların veri girmesine yardımcı olmak için özellikler ekleyin

Tarayıcının giriş değerlerini depolamasını ve otomatik doldurmasını sağlayın, güvenli yerleşik özelliğe erişim sağlayın ödeme ve doğrulama özelliklerinden yararlanabilirsiniz.

index.html dosyanızdaki forma aşağıdaki gibi özellikler ekleyin:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Uygulamanızı tekrar görüntüleyin ve ardından Kart numarası alanına dokunun veya bu alanı tıklayın. Cihaza ve kullandığınıza göre, tarayıcı için saklanan ödeme yöntemlerini gösteren bir seçici görebilirsiniz.

Yerleşik tarayıcı ödeme seçici ve otomatik doldurma.

Bir ödeme yöntemi seçip güvenlik kodunuzu girdikten sonra, tarayıcı aşağıdaki kodu kullanarak formu otomatik olarak doldurur: forma eklediğiniz ödeme kartı autocomplete değerleri:

• cc-number
• cc-name
• cc-exp
• cc-csc

Birçok tarayıcı, kredi kartı numaralarının ve güvenlik kodlarının da geçerliliğini kontrol edip onaylar.

Not: Endişelenmeyin! Tarayıcınız, kayıtlı ödeme kartı verileriyle formu otomatik olarak doldurabilir ancak ödeme yapılamaz, hiçbir veri aktarılmaz veya kaydedilmez.

Mobil cihazlarda, Kart numarası alanına girin. Bunun nedeni inputmode="numeric" kullanmış olmanızdır. Sayısal alanlarda bu, rakam girmek ve sayısal olmayan karakter girmek imkansızdır ve kullanıcıları girdikleri veri türünü hatırlamalarına yardımcı olur.

Mevcut tüm autocomplete değerlerini ödeme formlarına doğru şekilde eklemek son derece önemlidir. İnsanların Sitelerin, kartın son kullanma tarihi için autocomplete değerini ve diğer bilgileri kaçırması sık karşılaşılan bir durumdur. alanları. Tek bir autofill değeri yanlış veya eksikse kullanıcıların gerçek değerlerini almaları gerekir kartını kullanın. Bu işlemi yaptığınızda indirim fırsatını kaybedebilirsiniz. Ödeme formlarında otomatik doldurma özelliği kullanılıyorsa düzgün çalışmadığında kullanıcılar, ödeme kartı ayrıntılarının kaydını telefonlarından tutmaya da karar verebilir. güvenli değildir.

Not: Araştırmalar, tek bir giriş yerine ay ve yıl için ayrı seçim öğeleri kullanmanın daha iyi olabileceğini gösteriyor. Hangisinin en iyi olduğunu düşündüğünüz size kalmıştır. Bu özelliği, her iki son kullanma tarihi alanı türü için de kod içeren eksiksiz ödeme formu demomuzda HTML'yi remiksleyip düzenleyerek test edebilirsiniz.

Ödeme formunu boş bir alanla göndermeyi deneyin. Tarayıcının eksik tamamlama istemlerini almaması dışı verilerdir. Şimdi Kart numarası alanındaki değere bir harf ekleyin ve formu göndermeyi deneyin. İlgili içeriği oluşturmak için kullanılan tarayıcı değerin geçersiz olduğu konusunda uyarır. Bunun nedeni, pattern özelliğini şu amaçlarla kullanmanızdır: bir alan için geçerli değerler belirtin. Aynı durum maxlength ve diğerleri için de geçerlidir. doğrulama kısıtlamaları JavaScript gerekmez.

Ödeme formunuz aşağıdaki gibi görünecektir:

• autocomplete değerlerini kaldırıp ödeme formunu doldurmayı deneyin. Ne tür zorluklar nelerle karşılaşıyorum?
• İnternet mağazalarında ödeme formlarını deneyin. Neyin işe yaradığını ve neyin yanlış gittiğini düşünün. Cevap var mı? Sık karşılaşılan sorunlar veya uymanız gereken en iyi uygulamalar var mı?

4. Adım: Form gönderildikten sonra ödeme düğmesini devre dışı bırakın

Gönder düğmesini, kullanıcı dokunduktan veya tıkladıktan sonra (özellikle de ödeme yapar. Birçok kullanıcı düğmelere arka arkaya dokunur veya tıklar, çalışmaya devam edebilirler. Bu durum, ödeme işlemede sorunlara ve sunucu yüküne ekleme sorunlarına neden olabilir.

js/main.js dosyanıza aşağıdaki JavaScript'i ekleyin:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Ödeme formunu göndermeyi deneyin ve neler olacağına bakın.

Dikkat: Bazı siteler, kullanıcı tüm form alanlarını doğru şekilde tamamlayana kadar form gönderme düğmelerini devre dışı bırakır. Kullanıcılar yanlışlıkla gerekli bir değeri listeden çıkarabileceğinden veya geçersiz bir değer kullanabileceğinden, devre dışı bırakılmış gönder düğmesine dokunup veya tıklayarak sitenizin bozuk olduğunu varsayabileceği için bunu yapmamanız en iyisidir. Form değerlerini geçersiz veya eksik olarak işaretleseniz bile kullanıcı bu uyarıları göremeyebilir (özellikle uzun formlarda ve mobil cihazlarda). Kullanıcı veri girerken ve formu göndermeye çalışırken satır içinde doğrulama yapmak daha iyidir.

Buraya, bazı yorumlar ve bir açıklama ekleyerek kodunuzun bu noktada nasıl olması gerektiği validate() işlevi:

• JavaScript'in, veri doğrulaması için açıklama eklenen kod içerdiğini fark edeceksiniz. Bu kod, Constraint Validation API (Kısıtlama Doğrulama API'si) eklemek için (geniş bir şekilde desteklenir) odaklanma ve görüntüleme istemlerini ayarlamak için yerleşik tarayıcı kullanıcı arayüzüne erişme. Koddaki açıklamayı kaldırın ve hemen deneyin. someregex ve message için uygun değerler ve someField.

• Hangi analytics ve Real User Monitoring verileri neleri izlersiniz?

Eksiksiz ödeme formunuz aşağıdaki gibi görünecektir:

• Formunuzu farklı cihazlarda deneyin. Hangi cihaz ve tarayıcılardasınız? hedeflemeli mi? Form nasıl iyileştirilebilir?

Daha ileri gidiyoruz

Bu codelab'de yer almayan aşağıdaki önemli form özelliklerini göz önünde bulundurun:

• Hizmet Şartları ve gizlilik politikası belgelerinizin bağlantısı: verilerini koruyabilmek.

• Stil ve markalama: Bunların sitenizin geri kalanıyla eşleştiğinden emin olun. Ad ve adres girerken Kullanıcılar ödeme yaparken kendilerini rahat hissetmeli, hâlâ doğru yerde olduklarından emin olmalıdır.

• Analytics ve Gerçek Kullanıcı İzleme: Form tasarımınızın performansı ile kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenebilmesini sağlar.