Formulir pembayaran sering kali merupakan langkah terakhir sebelum menyelesaikan pembelian. Untuk memaksimalkan konversi, pastikan formulir pembayaran Anda mudah digunakan dan aman.
Pastikan pengguna tahu apa yang harus diisi
Buat formulir pembayaran sesederhana mungkin, cukup tampilkan kolom yang wajib diisi.
Tunjukkan jumlah pembayaran. Tombol Kirim sangat ideal untuk melakukannya.
<button>Pay $300.00</button>
Gunakan kata-kata yang mudah dipahami untuk elemen <label>.
Misalnya, gunakan 'Kode keamanan',
bukan akronim seperti 'CVV' yang hanya digunakan oleh beberapa brand.
Membantu pengguna memasukkan detail pembayaran
Untuk memaksimalkan konversi, pastikan pengguna dapat mengisi formulir pembayaran 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 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 yang 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 ]+" agar pengguna dapat menyertakan spasi saat memasukkan nomor kartu,
karena dengan cara ini angka akan ditampilkan pada kartu fisik.