Ödeme formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

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

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şlevselliğini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.

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

index.html ürününde 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ı, kart üzerindeki ad, son kullanma tarihi ve güvenlik kodu için <input> öğe bulunur. Bunların tümü <section> öğeleri içine yerleştirilmiş ve her biri bir etikete sahip. Ödemeyi Tamamla düğmesi HTML biçimindedir <button>. Bu codelab'in ilerleyen bölümlerinde bu öğeleri kullanarak erişebileceğiniz tarayıcı özellikleri hakkında bilgi edineceksiniz.

Ödeme şeklinizi önizlemek için Uygulamayı Göster'i tıklayın.

• Form şu anki haliyle yeterince iyi çalışıyor mu?
• Daha iyi çalışması 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 mobilde formun kullanımını zorlaştırıyor. Ayrıca, çok da iyi görünmüyor.

Dolgu, kenar boşlukları ve yazı tipi boyutlarını ayarlayarak formlarınızın çeşitli cihazlarda sorunsuz bir şekilde çalışmasını sağlamanız gerekir.

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

Çok fazla CSS var! Dikkat edilmesi gereken temel noktalar boyutlardaki değişikliklerdir:

• padding ve margin girişlere eklenir.
• font-size ve diğer değerler, farklı görüntü alanı boyutları için 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ıkların ayarlandığını ve etiketlerde kendi başlarına bir çizgi üzerinde ilerlemeleri için display: block; değerinin kullanıldığını ve girişlerin tam genişlikte olabileceğini de fark edeceksiniz. Oturum açma formu en iyi uygulamaları, bu yaklaşımın avantajlarını daha ayrıntılı bir şekilde açıklar.

:invalid seçici, bir giriş geçersiz bir değere sahip olduğunda bunu göstermek için kullanılır. (Bunu daha sonra codelab'de kullanacaksınız.)

CSS mobil önceliklidir:

• Varsayılan CSS, genişliği 400px altında olan görüntü alanları içindir.
• Medya sorguları, en az 400px genişliğindeki görüntü alanları ve ardından en az 500px genişliğindeki görüntü alanları için varsayılan değeri geçersiz kılmak için kullanılır. Bu özelliğin küçük telefonlarda, büyük ekranlı mobil cihazlarda ve masaüstü bilgisayarlarda sorunsuz çalışması beklenir.

Web için geliştirme yaparken farklı cihazlarda ve görüntü alanı boyutlarında test yapmanız gerekir. Bu, özellikle formlar için doğrudur, çünkü küçük bir hata onları kullanılamaz hale getirebilir. CSS ayrılma noktalarını, içeriğiniz ve hedef cihazlarınızla iyi çalışacak şekilde her zaman ayarlamanız gerekir.

• Formun tamamı görülebiliyor mu?
• Form girişleri yeterince büyük mü?
• Tüm metin okunabiliyor mu?
• Gerçek bir mobil cihaz kullanma ile formu Chrome Geliştirici Araçları'nda Cihaz Modu'nda görüntüleme arasında herhangi bir fark fark ettiniz mi?
• Kesme noktalarını ayarlamanız gerekti mi?

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

• Mobil cihazları simüle etmek için Chrome Geliştirici Araçları Cihaz Modu'nu kullanın.
• Bilgisayarınızdan telefonunuza URL'yi gönderin.
• Çeşitli cihaz ve tarayıcılarda test yapmak için BrowserStack gibi bir hizmet kullanın.

3. Adım: Kullanıcıların veri girmesine yardımcı olacak özellikler ekleyin

Tarayıcının giriş değerlerini saklayıp otomatik doldurmasını sağlayın ve güvenli yerleşik ödeme ve doğrulama özelliklerine erişim sağlayın.

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 platforma bağlı olarak, tarayıcı için depolanan ödeme yöntemlerini gösteren, aşağıdakine benzer bir seçici görebilirsiniz.

Bir ödeme yöntemi seçip güvenlik kodunuzu girdiğinizde tarayıcı, forma eklediğiniz ödeme kartı autocomplete değerlerini kullanarak formu otomatik olarak doldurur:

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

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

Mobil cihazlarda, Kart numarası alanına dokunur dokunmaz bir sayısal klavyenin olduğunu görürsünüz. Bunun nedeni inputmode="numeric" hizmetini kullanmış olmanızdır. Sayısal alanlara sayı girmeyi kolaylaştırır ve sayısal olmayan karakterler girilmesini imkansız kılar. Ayrıca kullanıcıların girdikleri veri türünü hatırlamalarını sağlar.

Ödeme formlarına mevcut tüm autocomplete değerlerinin doğru şekilde eklenmesi son derece önemlidir. Sitelerin, kart son kullanma tarihi ve diğer alanlar için autocomplete değerini atlamasına sıklıkla rastlanır. Tek bir autofill değeri yanlış veya eksikse kullanıcıların kart verilerini manuel olarak girebilmeleri için gerçek kartlarını almaları gerekir ve indirimi kaybedebilirsiniz. Ödeme formlarında otomatik doldurma özelliği düzgün çalışmazsa kullanıcılar, ödeme kartı ayrıntılarının kaydını telefon veya bilgisayarlarında da tutmaya karar verebilir, bu da son derece güvensiz bir yöntemdir.

Ödeme formunu boş bir alanla göndermeyi deneyin. Tarayıcı, eksik verileri tamamlamak ister. Şimdi Kart numarası alanındaki değere bir harf ekleyin ve formu göndermeyi deneyin. Tarayıcı, değerin geçersiz olduğu konusunda uyarır. Bunun nedeni, bir alan için geçerli değerleri belirtmek üzere pattern özelliğini kullanmış olmanızdır. Aynı durum maxlength ve diğer doğrulama kısıtlamaları için de geçerlidir. JavaScript gerekmez.

Ödeme formunuz artık şu şekilde görünmelidir:

• autocomplete değerlerini kaldırıp ödeme formunu doldurmayı deneyin. Ne tür zorluklarla karşılaşıyorsunuz?
• Online mağazalarda ödeme şekillerini deneyin. Neyin işe yaradığını ve neyin yanlış gittiğini düşünün. Takip etmeniz gereken yaygın sorunlar veya en iyi uygulamalar var mı?

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

Özellikle kullanıcı ödeme yaparken, kullanıcı düğmeye dokunduğunda veya tıkladığında gönder düğmesini devre dışı bırakmayı düşünmelisiniz. Düzgün çalışıyor olsalar bile birçok kullanıcı düğmelere tekrar tekrar dokunur veya tıklar. Bu, ödemenin işlenmesinde ve sunucu yüküne ekleme işleminde sorunlara 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 sonucu görün.

Birkaç yorum ve bir validate() işlevi de ekleyerek kodunuzun bu noktada nasıl bakması gerektiğini aşağıda görebilirsiniz:

• JavaScript'in, veri doğrulama için açıklama metni içeren bir kod içerdiğini fark edeceksiniz. Bu kod, özel doğrulama eklemek için Constraint Validation API'yi (kapsamlı şekilde desteklenir) kullanır. Odaklanma ve görüntüleme istemlerini ayarlamak için yerleşik tarayıcı kullanıcı arayüzüne erişir. Koddaki açıklamaları kaldırıp deneyin. someregex ve message için uygun değerleri ve someField için bir değer belirlemeniz gerekir.

• Formlarınızı iyileştirmenin yollarını belirlemek için hangi analizleri ve Gerçek Kullanıcı İzleme verilerini izlersiniz?

Tam ödeme formunuz şu şekilde görünmelidir:

• Formunuzu farklı cihazlarda deneyin. Hangi cihazları ve tarayıcıları hedefliyorsunuz? Form nasıl daha iyi hale getirilebilir?

Daha da ileri

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ını vererek kullanıcılara verilerini nasıl koruduğunuzu açıkça belirtin.

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

• Analizler ve Gerçek Kullanıcı İzleme: Form tasarımınızın performans ve kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenmesine olanak tanır.