Formulir pembayaran adalah bagian paling penting dalam proses checkout. Desain formulir pembayaran yang buruk adalah penyebab umum pengabaian keranjang belanja.
Buat formulir yang memudahkan pengguna memasukkan detail pembayaran di desktop dan perangkat seluler. Pastikan formulir memanfaatkan fitur browser bawaan untuk isi otomatis, validasi, dan batasan entri data.
Cara menerapkan
Berikut adalah panduan paling penting untuk membuat formulir pembayaran yang berhasil.
Menggunakan HTML yang bermakna dan valid
Manfaatkan elemen dan atribut yang dibuat untuk membuat formulir:
<form>,<input>,<label>, dan<button>type,autocomplete, daninputmode
Elemen ini mengaktifkan fungsi browser bawaan, meningkatkan aksesibilitas, dan menambahkan makna pada markup.
Menggunakan elemen <label> untuk memberi label pada kolom formulir untuk entri data
Untuk memberi label pada <input>, <select>, atau <textarea>, gunakan <label>. Kaitkan label dengan input dengan memberikan nilai yang sama pada atribut for label dengan id input.
Memanfaatkan atribut HTML secara maksimal
Permudah pengguna memasukkan data, dengan menggunakan atribut <type> elemen <input> yang sesuai untuk menyediakan keyboard yang tepat di perangkat seluler dan mengaktifkan validasi bawaan dasar oleh browser.
Selalu gunakan type="email" untuk alamat email dan type="tel" untuk nomor telepon.
<!-- 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">
Setiap elemen <input>, <select>, dan <textarea> HARUS memiliki atribut autocomplete yang sesuai, untuk meningkatkan aksesibilitas dan membantu pengguna menghindari memasukkan ulang data.
Membuat tombol yang bermanfaat
Gunakan <button> untuk tombol. Anda juga dapat menggunakan <input type="submit">, tetapi jangan gunakan div atau elemen acak lainnya yang berfungsi sebagai tombol. Elemen tombol memberikan perilaku yang mudah diakses, fungsi pengiriman formulir bawaan, dan dapat diberi gaya dengan mudah.
Beri setiap tombol kirim formulir nilai yang menjelaskan fungsinya. Untuk setiap langkah menuju checkout, gunakan pesan ajakan (CTA) deskriptif yang menunjukkan progres dan memperjelas langkah berikutnya. Misalnya, beri label tombol kirim pada formulir alamat pengiriman Anda Lanjutkan ke Pembayaran, bukan Lanjutkan atau Simpan.
Gunakan satu input nama jika memungkinkan
Izinkan pengguna memasukkan nama mereka menggunakan satu input, kecuali jika Anda memiliki alasan yang kuat untuk menyimpan nama depan, nama keluarga, gelar, atau bagian nama lainnya secara terpisah. Menggunakan satu input nama membuat formulir tidak terlalu rumit, memungkinkan potong dan tempel, serta membuat isi otomatis lebih sederhana.
Izinkan nama internasional. Untuk validasi, hindari penggunaan ekspresi reguler yang hanya cocok dengan karakter Latin. Opsi Hanya Latin mengecualikan pengguna dengan nama atau alamat yang menyertakan karakter yang tidak ada dalam alfabet Latin. Sebagai gantinya, izinkan pencocokan huruf Unicode—dan pastikan backend Anda mendukung Unicode dengan aman sebagai input dan output. Unicode dalam ekspresi reguler didukung dengan baik oleh browser modern.
Memungkinkan berbagai format alamat
Saat menambahkan kolom formulir untuk alamat dalam formulir pembayaran, perhatikan berbagai format alamat, bahkan dalam satu negara. Jangan membuat asumsi tentang alamat "normal".
Jika memungkinkan dalam persyaratan data Anda, pertimbangkan untuk menggunakan satu elemen <textarea> untuk alamat. Ini adalah opsi yang paling fleksibel untuk berbagai format alamat lokal dan internasional.
Menggunakan pelengkapan otomatis untuk alamat penagihan
Secara default, tetapkan alamat penagihan agar sama dengan alamat pengiriman. Kurangi kekacauan visual dengan memberikan link untuk mengedit alamat penagihan (atau menggunakan elemen ringkasan dan detail), bukan menampilkan alamat penagihan dalam formulir.
Gunakan nilai pelengkapan otomatis yang sesuai untuk alamat penagihan, seperti yang Anda lakukan untuk alamat pengiriman, sehingga pengguna tidak perlu memasukkan data lebih dari sekali. Tambahkan kata awalan ke atribut pelengkapan otomatis jika Anda memiliki nilai yang berbeda untuk input dengan nama yang sama di bagian yang berbeda. Contoh:
<!-- 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" ...>
Menampilkan progres checkout
Untuk setiap langkah menuju pembayaran, gunakan judul halaman dan nilai tombol deskriptif yang memperjelas tindakan yang perlu dilakukan sekarang, dan langkah checkout berikutnya.
Gunakan atribut enterkeyhint pada input formulir untuk menetapkan label tombol enter keyboard seluler. Misalnya, gunakan enterkeyhint="previous" dan enterkeyhint="next" dalam formulir multi-halaman, enterkeyhint="done" untuk input akhir dalam formulir, dan enterkeyhint="search" untuk input penelusuran.
Membantu pengguna agar tidak perlu memasukkan ulang data pembayaran
Pastikan untuk menambahkan nilai autocomplete yang sesuai dalam formulir kartu pembayaran. Tanpa pelengkapan otomatis, pengguna mungkin menyimpan catatan fisik detail kartu pembayaran atau menyimpannya dengan tidak aman.
<!-- 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>
Tampilkan petunjuk format di atas input
Jika kolom memiliki format yang diperlukan (misalnya tanggal habis masa berlaku MM/YY), tempatkan petunjuk dalam elemen yang terlihat di atas input dan tautkan keduanya dengan aria-describedby, seperti dalam contoh cc-exp di atas. Petunjuk yang berada di bawah input mudah disembunyikan oleh keyboard seluler atau popover isi otomatis saat pengguna membutuhkannya.
Jangan mengandalkan atribut placeholder sebagai satu-satunya petunjuk format, dan jangan pernah menggunakannya sebagai pengganti <label>: teks placeholder disembunyikan segera setelah pengguna mulai mengetik, sehingga tidak dapat diperiksa saat mengedit. Placeholder dapat digunakan sebagai petunjuk tambahan bersama label dan petunjuk persisten.
Jangan menyamarkan kode keamanan
Gunakan type="text" dengan inputmode="numeric" untuk kode keamanan kartu, bukan type="password". Pengguna tidak dapat memeriksa kesalahan ketik pada kode tiga atau empat digit yang disamarkan, sehingga kesalahan ketik pada digit tidak akan terdeteksi hingga pembayaran ditolak, dan penyamaran memberikan sedikit perlindungan karena kode tersebut dicetak pada kartu yang dipegang pengguna.
Menggunakan satu input untuk kartu pembayaran dan nomor telepon
Untuk kartu pembayaran dan nomor telepon, gunakan satu input: jangan pisahkan nomor menjadi beberapa bagian. Hal ini memudahkan pengguna memasukkan data, menyederhanakan validasi, dan memungkinkan browser melakukan isi otomatis. Pertimbangkan untuk melakukan hal yang sama pada data numerik lainnya seperti PIN dan kode bank.
Validasi dengan cermat
Anda harus memvalidasi entri data secara real-time dan sebelum pengiriman formulir. Salah satu caranya adalah dengan menambahkan atribut pola ke input kartu pembayaran. Jika pengguna mencoba mengirimkan formulir pembayaran dengan nilai yang tidak valid, browser akan menampilkan pesan peringatan dan menetapkan fokus pada input.
Namun, ekspresi reguler pola Anda harus cukup fleksibel untuk menangani rentang panjang nomor kartu pembayaran: dari 14 digit (atau mungkin kurang) hingga 20 (atau lebih). Kode keamanan kartu (juga dikenal sebagai CSC, CVC, CVV, atau nama lainnya) terdiri dari 3 atau 4 digit.
Izinkan pengguna menyertakan spasi saat memasukkan nomor kartu pembayaran baru, karena ini adalah cara nomor ditampilkan di kartu fisik. Hal ini lebih memudahkan pengguna (Anda tidak perlu memberi tahu mereka bahwa "mereka melakukan kesalahan"), cenderung tidak mengganggu alur konversi, dan mudah untuk menghapus spasi dalam angka sebelum diproses.
Membantu mencegah pengguna melewatkan kolom data secara tidak sengaja
Tambahkan atribut required ke kolom wajib diisi. Browser modern otomatis menampilkan dialog dan menetapkan fokus untuk data yang tidak ada.
Strategi penggantian
Isi otomatis adalah progressive enhancement. Di browser yang tidak mendukung isi otomatis, pengguna hanya perlu memasukkan detail pembayaran mereka secara manual. Batasan HTML semantik (seperti type, inputmode, pattern, dan required) akan tetap berfungsi dengan baik untuk memvalidasi input pengguna dan menyediakan keyboard virtual yang benar.