Formulir pembayaran sering kali menjadi langkah terakhir sebelum menyelesaikan pembelian. Untuk memaksimalkan konversi, pastikan metode pembayaran Anda mudah digunakan dan aman.
Pastikan pengguna tahu apa yang harus diisi
Buat formulir pembayaran yang sesederhana mungkin, hanya menampilkan kolom yang wajib diisi.
Tunjukkan jumlah pembayaran. Tombol Submit cocok untuk hal ini.
<button>Pay $300.00</button>
Gunakan kata-kata yang mudah dipahami untuk elemen <label> Anda.
Misalnya, gunakan "Kode keamanan",
bukan akronim seperti 'CVV' yang hanya digunakan
oleh beberapa merek.
Membantu pengguna memasukkan detail pembayaran
Untuk memaksimalkan konversi, pastikan pengguna dapat mengisi formulir pembayaran Anda secepat mungkin.
Gunakan inputmode="numeric" untuk kolom nomor kartu dan kode keamanan
guna menampilkan keyboard virtual yang dioptimalkan untuk memasukkan angka.
Tambahkan nilai autocomplete yang sesuai untuk kontrol formulir pembayaran Anda guna memastikan browser menawarkan fitur isi otomatis.
Gunakan autocomplete="cc-name" untuk nama.
autocomplete="cc-number" untuk nomor kartu, dan autocomplete="cc-exp" untuk tanggal habis masa berlaku.
Memastikan pengguna memasukkan data dalam format yang benar
Gunakan atribut required untuk setiap <input> guna memastikan pengguna mengisi formulir lengkap.
Kode keamanan kartu pembayaran dapat terdiri dari tiga atau empat digit.
Gunakan minlength="3" dan maxlength="4" untuk hanya mengizinkan tiga dan empat digit.
Pastikan pengguna hanya memasukkan nomor untuk nomor kartu dan kode keamanan.
Gunakan pattern="[0-9 ]+" untuk mengizinkan pengguna menyertakan spasi saat memasukkan nomor kartu,
karena ini adalah bagaimana
angka-angka ditampilkan pada kartu fisik.