Cara Meningkatkan UX Formulir Penagihan Anda Dalam Satu Hari

Halaman checkout adalah halaman terakhir yang dikunjungi pengguna sebelum akhirnya memutuskan untuk menyelesaikan pembelian di situs web Anda. Di situlah pembeli jendela berubah menjadi pelanggan yang membayar. Jika Anda ingin meninggalkan kesan yang baik, Anda harus memberikan kegunaan optimal dari formulir penagihan dan meningkatkannya sedapat mungkin.

Dalam waktu kurang dari satu hari, Anda dapat menambahkan beberapa fitur sederhana dan berguna ke proyek Anda untuk membuat formulir penagihan Anda ramah pengguna dan mudah diisi. Demo dengan semua fungsi yang tercakup di bawah tersedia. Anda dapat menemukan kodenya di repositori GitHub.

Bacaan Lebih Lanjut tentang SmashingMag:

• Mengurangi Keranjang Belanja Terbengkalai Di E-Commerce
• Validasi Form-Field: Pendekatan Hanya-Kesalahan
• Pedoman Dasar Desain Checkout E-Commerce
• Panduan Lengkap Untuk Kegunaan Formulir Web

Rincian kartu kredit adalah salah satu bidang yang paling sering dikoreksi dalam formulir. Untungnya, saat ini hampir setiap browser populer memiliki fitur autofill, yang memungkinkan pengguna untuk menyimpan data kartu mereka di browser dan mengisi kolom formulir dengan lebih cepat. Selain itu, sejak iOS 8, pengguna Safari seluler dapat memindai informasi kartu mereka dengan kamera iPhone dan mengisi kolom nomor, tanggal kedaluwarsa, dan nama kartu mereka secara otomatis. Pelengkapan otomatis sederhana, jelas, dan dibangun ke dalam HTML5, jadi kami akan menambahkannya ke formulir kami terlebih dahulu.

Isi otomatis dan pemindaian kartu hanya berfungsi dengan formulir yang memiliki atribut khusus: autocomplete untuk browser modern (tercantum dalam standar HTML5) dan name untuk browser tanpa dukungan HTML5.

Catatan : Demo dengan semua fungsi yang tercakup di bawah ini tersedia. Anda dapat menemukan kodenya di repositori GitHub .

Kartu kredit memiliki atribut IsiOtomatis tertentu. Untuk autocomplete :

• cc-name
• cc-number
• cc-csc
• cc-exp-month
• cc-exp-year
• cc-exp
• cc-type
• cc-csc

Untuk name :

• ccname
• cardnumber
• cvc
• ccmonth
• ccyear
• expdate
• card-type
• cvc
  

Untuk menggunakan IsiOtomatis, Anda harus menambahkan autocomplete dan atribut name yang relevan untuk elemen input dalam file index.html Anda:

 <input type="text" class="card__input card__input_number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber"> <input type="text" class="card__input card__input_date card__input_month" placeholder="MM" pattern="[0-9]{1,2}" required autocomplete="cc-exp-month" name="ccmonth"> <input type="text" class="card__input card__input_date card__input_year" placeholder="YYYY" pattern="[0-9]{2,4}" required autocomplete="cc-exp-year" name="ccyear"> <input type="text" class="card__input card__input_cardholder" placeholder="CARDHOLDER NAME" required autocomplete="cc-name" name="ccname">

Jangan lupa untuk menggunakan placeholder di bidang input untuk membantu pengguna memahami format data yang diperlukan. Kami dapat memberikan validasi input dengan atribut HTML5: pattern (berdasarkan ekspresi reguler JavaScript) dan required . Misalnya, dengan pattern=”[0-9\s]{14,23}” required dalam sebuah bidang, pengguna tidak akan dapat mengirimkan formulir jika bidang tersebut kosong, memiliki non-numerik atau non-numerik. -simbol spasi, atau lebih pendek dari 14 simbol atau lebih panjang dari 23 simbol.

Setelah pengguna menyimpan data kartu mereka di browser, kita dapat melihat cara kerjanya:

Perhatikan bahwa menggunakan satu bidang untuk tanggal kedaluwarsa ( MM/YYYY ) tidak disarankan karena Safari memerlukan bidang bulan dan tahun yang terpisah untuk dilengkapi secara otomatis.

Tentu saja, atribut pelengkapan otomatis dan pengisian otomatis banyak digunakan tidak hanya untuk formulir penagihan tetapi juga untuk nama, alamat email dan pos, serta kata sandi. Anda dapat menghemat waktu pengguna dan membuat mereka lebih bahagia dengan menggunakan atribut ini dengan benar di formulir Anda.

Meskipun sekarang kami memiliki pelengkapan otomatis, Google Payments, dan Apple Wallet, banyak pengguna masih lebih suka memasukkan detail kartu kredit mereka secara manual, dan tidak ada yang aman dari kesalahan ketik dengan nomor 16 digit. Angka yang panjang sulit dibaca, bahkan lebih menyakitkan untuk ditulis dan hampir tidak mungkin diverifikasi.

Untuk membantu pengguna merasa nyaman dengan nomor kartu panjang mereka, kami dapat membaginya menjadi grup empat digit dengan menambahkan perpustakaan VanillaMasker sederhana oleh BankFacil ke proyek kami. Data yang dimasukkan akan diubah menjadi string bertopeng. Jadi, kita dapat menambahkan pola khusus dengan spasi setelah setiap digit keempat nomor kartu, pola dua digit untuk bulan kedaluwarsa, dan pola empat digit untuk tahun kedaluwarsa. VanillaMasker juga dapat memverifikasi format data: Jika kita hanya memasukkan “9” (nomor default untuk masker) ke ID, maka semua karakter non-numerik akan dihapus setelah input.

 npm install vanilla-masker --save

Dalam file index.js , mari impor perpustakaan dan gunakan dengan satu string untuk setiap bidang:

 import masker from 'vanilla-masker'; const cardNumber = document.getElementById('card__input_number'); const cardMonth = document.getElementById('card__input_month'); const cardYear = document.getElementById('card__input_year'); masker(cardNumber).maskPattern('9999 9999 9999 9999 99'); masker(cardMonth).maskPattern('99'); masker(cardYear).maskPattern('9999');

Dengan demikian, digit nomor kartu dalam formulir kami akan dipisahkan, seperti pada kartu asli:

Masker akan menghapus karakter dengan jenis atau panjang nilai yang salah, meskipun validasi HTML kami akan memberi tahu pengguna tentang data yang tidak valid hanya setelah formulir dikirimkan. Tetapi kita juga dapat memeriksa kebenaran nomor kartu saat diisi. Tahukah Anda bahwa semua nomor kartu kredit plastik dihasilkan sesuai dengan algoritma Luhn yang sederhana dan efektif? Itu dibuat pada tahun 1954 oleh Hans Peter Luhn dan kemudian ditetapkan sebagai standar internasional. Kami dapat menyertakan algoritme Luhn untuk memvalidasi sebelumnya bidang input nomor kartu dan memperingatkan pengguna tentang kesalahan ketik.

Untuk melakukan ini, kita dapat menggunakan paket fast-luhn npm kecil, yang diadaptasi dari intisari Shirtless Kirk. Kita perlu menambahkannya ke dependensi proyek kita:

 npm install fast-luhn --save

Untuk menggunakan fast-luhn, kita akan mengimpornya ke dalam modul dan hanya memanggil luhn(number) pada event input untuk memeriksa apakah nomornya benar. Sebagai contoh, mari tambahkan kelas card__input_invalid untuk mengubah outline dan color teks bidang ketika pengguna membuat kesalahan yang tidak disengaja dan pemeriksaan belum lulus. Perhatikan bahwa VanillaMasker menambahkan spasi setelah setiap grup empat digit, jadi kita perlu mengonversi nilai yang dimasukkan ke angka biasa tanpa spasi menggunakan metode split dan join , sebelum memanggil lunh .

Hasilnya adalah kode yang terlihat seperti ini:

 import luhn from 'fast-luhn'; const cardNumber = document.getElementById('card-number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; if (number.length >= 14) { const isLuhnCheckPassed = luhn(number.split(' ').join('')); cardNumber.classList.toggle('card__input_invalid', !isLuhnCheckPassed); cardNumber.classList.toggle('card__input_valid', isLuhnCheckPassed); } else { cardNumber.classList.remove('card__input_invalid', 'card__input_valid'); } });

Untuk mencegah luhn dipanggil saat pengguna mengetik, panggil saja jika nomor yang dimasukkan sepanjang minimum spasi (14 karakter, termasuk 12 digit) atau lebih, atau hapus kelas card__input_invalid .

Berikut adalah contoh validasi dalam tindakan:

Algoritme Luhn juga digunakan untuk beberapa nomor kartu diskon, nomor IMEI, nomor Pengenal Penyedia Nasional di AS, dan Nomor Asuransi Sosial di Kanada. Jadi, paket ini tidak terbatas pada kartu kredit saja.

Banyak pengguna ingin memeriksa detail kartu mereka dengan mata kepala sendiri, meskipun mereka tahu bahwa formulir sedang divalidasi. Tetapi manusia melihat hal-hal dengan cara yang membuat perbandingan angka dengan gaya berbeda sedikit membingungkan. Karena kami ingin antarmukanya sederhana dan intuitif, kami dapat membantu pengguna dengan menunjukkan font yang terlihat mirip dengan yang mereka temukan di kartu asli. Selain itu, font akan membuat formulir input seperti kartu kita terlihat lebih realistis dan sesuai.

Beberapa font kartu kredit gratis tersedia:

• Halter, Lab Apostrofik
• Kredit, Font Typodermic
• Kartu Kredit, K-Type (gratis untuk penggunaan pribadi)

Kami akan menggunakan Halter. Pertama, unduh font, letakkan di folder proyek, dan buat aturan CSS3 @font-face di style.css :

 @font-face { font-family: Halter; src: url(font/HALTER__.ttf); }

Kemudian, cukup tambahkan ke aturan font-family untuk kelas .card-input :

 .card-input { color: #777; font-family: Halter, monospace; }

Jangan lupa bahwa jika Anda memasukkan CSS dalam file JavaScript dengan bundel webpack, Anda harus menambahkan file-loader :

 npm install file-loader --save

Dan tambahkan file-loader untuk jenis file font di webpack.config.js :

 module: { loaders: [ { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file', }], },

Hasilnya terlihat cukup bagus:

Anda dapat membuatnya lebih menarik, jika Anda suka, dengan efek timbul menggunakan text-shadow ganda dan semi-transparan pada color teks :

 .card-input { color: rgba(84,110,122,0.5); text-shadow: -0.75px -0.75px white, 0.75px 0.75px 0 black; font-family: Halter, monospace; } 

Last but not least, Anda dapat mengejutkan pelanggan dengan menambahkan fitur pewarnaan ke formulir. Setiap bank memiliki warna merek tersendiri, yang biasanya mendominasi kartu bank tersebut. Untuk membuat formulir penagihan lebih ramah pengguna, kita dapat menggunakan warna ini dan mencetak nama bank di atas bidang formulir (sesuai dengan tempat munculnya pada kartu asli). Ini juga akan membantu pengguna untuk menghindari kesalahan ketik pada nomor dan untuk memastikan mereka telah memilih kartu yang tepat.

Kami dapat mengidentifikasi bank dari setiap kartu pengguna dengan enam digit pertama, yang berisi Nomor Identifikasi Penerbit (IIN) atau Nomor Identifikasi Bank (BIN). Banks DB by Ramoona adalah database yang mendapatkan nama dan warna merek bank dari awalan ini. Penulis telah menyiapkan demo Bank DB.

Basis data ini digerakkan oleh komunitas, jadi tidak berisi semua bank dunia. Jika bank pengguna tidak terwakili, ruang untuk nama bank akan kosong dan latar belakang akan menampilkan warna default ( #fafafa ).

Banks DB mengasumsikan salah satu dari dua cara menggunakannya: dengan PostCSS atau dengan CSS di JavaScript. Kami menggunakannya dengan PostCSS. Jika Anda baru menggunakan PostCSS, ini adalah alasan bagus untuk mulai menggunakannya. Anda dapat mempelajari lebih lanjut tentang PostCSS di dokumentasi resmi atau di artikel Drew Minns "Pengantar PostCSS".

Kita perlu menginstal plugin PostCSS Banks DB untuk mengatur template CSS untuk Banks DB dan menginstal plugin PostCSS Contrast untuk meningkatkan keterbacaan nama bank:

 npm install banks-db postcss-banks-db postcss-contrast --save

Setelah itu, kami akan menambahkan plugin baru ini ke proses PostCSS kami sesuai dengan bundler modul dan konfigurasi beban yang digunakan dalam proyek kami. Misalnya, dengan Webpack dan postcss-load-config, cukup tambahkan plugin baru ke file .postcssrc .

Kemudian, dalam file style.css kita, kita perlu menambahkan template aturan kelas baru untuk Banks DB dengan plugin postcss-contrast:

 @banks-db-template { .card_bank-%code% { background-color: %color%; color: contrast(%color%); } }

Kami juga dapat mengatur transition panjang di seluruh kelas .card untuk memudarkan masuk dan keluar latar belakang dan warna teks dengan mulus, agar tidak mengejutkan pengguna dengan perubahan mendadak:

 .card { … transition: background 0.6s, color 0.6s; }

Sekarang, impor Banks DB di index.js , dan gunakan di event listener input . Jika BIN diwakili dalam database, kami akan menambahkan kelas yang berisi nama bank ke formulir untuk memasukkan nama dan mengubah latar belakang formulir.

 import banksDB from 'banks-db'; const billingForm = document.querySelector('.card'); const bankName = document.querySelector('.card__bank-name'); const cardNumber = document.getElementById('card__input_number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; const bank = banksDB(number); if (bank.code) { billingForm.classList.add(`card_bank-${(bank.code || 'other')}`); bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle; } else { billingForm.className = 'card'; bankName.innerText = ''; } });

Jika Anda menggunakan webpack, tambahkan json-loader untuk ekstensi file .json ke konfigurasi webpack untuk memasukkan database dalam bundel dengan benar.

Berikut adalah contoh kerja Bank DB:

Jika Anda tidak melihat efek dengan kartu bank Anda, Anda dapat membuka masalah atau menambahkan bank Anda ke database.

Kesimpulan

Meningkatkan formulir penagihan Anda dapat membuat pengalaman pengguna jauh lebih intuitif dan, sebagai hasilnya, memastikan kenyamanan pengguna dan meningkatkan kepercayaan pada produk Anda. Ini adalah bagian penting dari aplikasi web. Kami dapat meningkatkannya dengan cepat dan mudah menggunakan fitur sederhana ini:

• autocomplete dan atribut name yang sesuai untuk pengisian otomatis,
• atribut placeholder untuk memberi tahu pengguna tentang format input,
• pattern dan require atribut untuk mencegah pengiriman formulir yang salah,
• VanillaMasker untuk memisahkan digit kartu,
• fast-luhn untuk verifikasi nomor kartu,
• Font halter untuk perbandingan yang mudah,
• Bank DB untuk presentasi warna yang lebih bagus.

Perhatikan bahwa hanya Banks DB yang memerlukan modul bundler; Anda dapat menggunakan yang lain dalam skrip sederhana. Menambahkan semua fungsi ini ke halaman checkout Anda kemungkinan besar akan memakan waktu kurang dari satu hari.