Ödeme formları, ödeme sürecinin en önemli parçasıdır. Ödeme formu tasarımının kötü olması, alışveriş sepetini terk etmenin yaygın bir nedenidir.
Kullanıcıların masaüstü ve mobil cihazlarda ödeme bilgilerini girmesini mümkün olduğunca kolaylaştıran bir form oluşturun. Formun otomatik doldurma, doğrulama ve veri girişi kısıtlamaları için yerleşik tarayıcı özelliklerinden en iyi şekilde yararlandığından emin olun.
Nasıl uygulanır?
Başarılı ödeme formları oluşturmak için en önemli kurallar aşağıda özetlenmiştir.
Anlamlı ve geçerli HTML kullanma
Form oluşturmak için tasarlanmış öğelerden ve özelliklerden en iyi şekilde yararlanın:
<form>,<input>,<label>ve<button>type,autocompleteveinputmode
Bunlar, yerleşik tarayıcı işlevini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemeye anlam katar.
Veri girişi için form alanlarını etiketlemek üzere <label> öğesini kullanın
<input>, <select> veya <textarea> etiketlemek için <label> kullanın. Etiketin for özelliğine girişin id özelliğiyle aynı değeri vererek etiketi bir girişle ilişkilendirin.
HTML özelliklerinden en iyi şekilde yararlanma
Mobil cihazlarda doğru klavyeyi sağlamak ve tarayıcı tarafından temel yerleşik doğrulamayı etkinleştirmek için uygun <input> öğe <type> özelliğini kullanarak kullanıcıların veri girmesini kolaylaştırın.
E-posta adresleri için her zaman type="email", telefon numaraları için ise type="tel" kullanın.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Erişilebilirliği iyileştirmek ve kullanıcıların verileri yeniden girmesini önlemek için her <input>, <select> ve <textarea> öğesinin uygun bir autocomplete özelliği OLMALIDIR.
Düğmeleri faydalı hale getirme
Düğmeler için <button> kullanın. <input type="submit"> öğesini de kullanabilirsiniz ancak div veya düğme işlevi gören başka bir rastgele öğe kullanmayın. Düğme öğeleri, erişilebilir davranış ve yerleşik form gönderme işlevi sunar ve kolayca stillendirilebilir.
Her form gönderme düğmesine, ne yaptığını belirten bir değer verin. Ödeme işlemine yönelik her adımda, ilerleme durumunu gösteren ve bir sonraki adımı netleştiren açıklayıcı bir harekete geçirici mesaj kullanın. Örneğin, teslimat adresi formunuzdaki gönder düğmesini Devam veya Kaydet yerine Ödemeye Geç olarak etiketleyin.
Mümkün olduğunda tek bir ad girişi kullanın
Adları, soyadları, unvanları veya adın diğer kısımlarını ayrı ayrı saklamak için geçerli bir nedeniniz yoksa kullanıcılarınızın adlarını tek bir giriş kullanarak girmelerine izin verin. Tek bir ad girişi kullanmak formları daha az karmaşık hale getirir, kesme ve yapıştırma işlemlerini mümkün kılar ve otomatik doldurmayı kolaylaştırır.
Uluslararası adlara izin verin. Doğrulama için yalnızca Latin karakterleriyle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin alfabesi seçeneği, adlarında veya adreslerinde Latin alfabesinde olmayan karakterler bulunan kullanıcıları hariç tutar. Bunun yerine Unicode harf eşleştirmeye izin verin ve arka ucunuzun Unicode'u hem giriş hem de çıkış olarak güvenli bir şekilde desteklediğinden emin olun. Normal ifadelerdeki Unicode, modern tarayıcılar tarafından iyi bir şekilde desteklenir.
Çeşitli adres biçimlerine izin verme
Ödeme formuna adres için form alanları eklerken tek bir ülkede bile çeşitli adres biçimleri olabileceğini unutmayın. "Normal" adresler hakkında varsayımlarda bulunmayın.
Veri gereksinimleriniz açısından mümkünse adres için tek bir <textarea> öğesi kullanmayı düşünün. Bu, çeşitli yerel ve uluslararası adres biçimleri için en esnek seçenektir.
Fatura adresi için otomatik tamamlama özelliğini kullanma
Varsayılan olarak, fatura adresini teslimat adresiyle aynı olacak şekilde ayarlayın. Fatura adresini bir formda göstermek yerine fatura adresini düzenlemek için bir bağlantı sağlayarak (veya özet ve ayrıntı öğelerini kullanarak) görsel karmaşayı azaltın.
Kullanıcının verileri birden fazla kez girmemesi için kargo adresinde olduğu gibi fatura adresi için de uygun otomatik tamamlama değerlerini kullanın. Farklı bölümlerde aynı ada sahip girişler için farklı değerleriniz varsa otomatik tamamlama özelliklerine bir ön ek kelime ekleyin. Örneğin:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
Ödeme sürecinin ilerleme durumunu gösterme
Ödeme sürecindeki her adımda, o anda ne yapılması gerektiğini ve bir sonraki ödeme adımının ne olduğunu netleştiren sayfa başlıkları ve açıklayıcı düğme değerleri kullanın.
Mobil klavyenin Enter tuşu etiketini ayarlamak için form girişlerinde enterkeyhint özelliğini kullanın. Örneğin, çok sayfalı bir formda enterkeyhint="previous" ve enterkeyhint="next", formdaki son giriş için enterkeyhint="done" ve arama girişi için enterkeyhint="search" kullanın.
Kullanıcıların ödeme verilerini yeniden girmesini önleme
Ödeme kartı formlarına uygun autocomplete değerlerini eklediğinizden emin olun. Otomatik tamamlama özelliği olmadığında kullanıcılar, ödeme kartı bilgilerini fiziksel olarak kaydedebilir veya güvenli olmayan bir şekilde saklayabilir.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
Girişin üzerinde biçim ipuçlarını göster
Bir alanın zorunlu bir biçimi varsa (ör. MM/YY son kullanma tarihi) ipucunu girişin üstündeki görünür bir öğeye yerleştirin ve yukarıdaki cc-exp örneğinde olduğu gibi ikisini aria-describedby ile bağlayın. Giriş alanının altında bulunan ipuçları, kullanıcının ihtiyaç duyduğu anda mobil klavye veya otomatik doldurma popover'ı tarafından kolayca gizlenir.
Tek biçim ipucu olarak placeholder özelliğine güvenmeyin ve bu özelliği hiçbir zaman <label> yerine kullanmayın: Yer tutucu metin, kullanıcı yazmaya başlar başlamaz gizlenir. Bu nedenle, düzenleme sırasında kontrol edilemez. Yer tutucu, etiket ve kalıcı ipucunun yanı sıra ek bir ipucu olarak kullanılabilir.
Güvenlik kodunu maskeleme
Kart güvenlik kodu için type="password" yerine inputmode="numeric" ile type="text" kullanın. Kullanıcılar, maskelenmiş üç veya dört haneli bir kodda yazım hatası olup olmadığını kontrol edemez. Bu nedenle, yanlış yazılan bir hane, ödeme reddedilene kadar fark edilmez. Ayrıca kod, kullanıcının elindeki kartın üzerinde basılı olduğundan maskeleme çok az koruma sağlar.
Ödeme kartı ve telefon numaraları için tek bir giriş kullanma
Ödeme kartı ve telefon numaraları için tek bir giriş kullanın: Numarayı parçalara ayırmayın. Bu sayede kullanıcılar verileri daha kolay girebilir, doğrulama daha basit hale gelir ve tarayıcılar otomatik doldurma yapabilir. PIN ve banka kodları gibi diğer sayısal veriler için de aynı işlemi yapabilirsiniz.
Dikkatlice doğrulayın
Veri girişini hem gerçek zamanlı olarak hem de form gönderilmeden önce doğrulamalısınız. Bunu yapmanın bir yolu, ödeme kartı girişine bir kalıp özelliği eklemektir. Kullanıcı, ödeme formunu geçersiz bir değerle göndermeye çalışırsa tarayıcı bir uyarı mesajı gösterir ve girişe odaklanır.
Ancak kalıp normal ifadeniz, ödeme kartı numarası uzunlukları aralığını (14 haneden veya muhtemelen daha azdan 20'ye veya daha fazlaya kadar) işleyecek kadar esnek olmalıdır. Kart güvenlik kodları (CSC, CVC, CVV veya başka adlarla da bilinir) 3 veya 4 haneden oluşur.
Kullanıcıların yeni bir ödeme kartı numarası girerken boşluk kullanmasına izin verin. Numaralar fiziksel kartlarda bu şekilde gösterilir. Bu, kullanıcı için daha kolaydır (onlara "yanlış bir şey yaptıklarını" söylemeniz gerekmez), dönüşüm akışını kesintiye uğratma olasılığı daha düşüktür ve işlemden önce sayılardaki boşlukları kaldırmak kolaydır.
Kullanıcıların veri alanlarını yanlışlıkla kaçırmasını önlemeye yardımcı olma
Zorunlu alanlara required özelliğini ekleyin. Modern tarayıcılar, eksik veriler için otomatik olarak istemde bulunur ve odağı ayarlar.
Yedek stratejiler
Otomatik doldurma, progresif bir geliştirmedir. Otomatik doldurmayı desteklemeyen tarayıcılarda kullanıcıların ödeme bilgilerini manuel olarak girmesi gerekir. Semantik HTML kısıtlamaları (type, inputmode, pattern ve required gibi), kullanıcı girişini doğrulamak ve doğru sanal klavyeleri sağlamak için uygun şekilde çalışmaya devam eder.