Formulir pembayaran

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.

Resource