Codelab praktik terbaik formulir pembayaran

Sam Dutton

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Codelab ini menunjukkan cara membuat metode pembayaran yang aman, mudah diakses, dan mudah digunakan.

Perhatian: Artikel ini membahas praktik terbaik frontend untuk formulir pembayaran. Artikel ini tidak menjelaskan cara menerapkan transaksi di situs Anda. Untuk mengetahui lebih lanjut cara menambahkan fungsi pembayaran ke situs Anda, lihat Pembayaran Web.

Langkah 1: Gunakan HTML sebagaimana mestinya

Gunakan elemen yang dibuat untuk pekerjaan:

• <form>
• <section>
• <label>
• <input>, <select>, <textarea>
• <button>

Seperti yang akan Anda lihat, elemen-elemen ini mengaktifkan fungsionalitas {i>built-in browser<i}, meningkatkan aksesibilitas, dan memberikan makna pada markup Anda.

• Klik Remix to Edit agar project dapat diedit.

Lihat HTML untuk formulir Anda di index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Ada <input> elemen untuk nomor kartu, nama di kartu, tanggal habis masa berlaku, dan kode keamanan. Mereka semua adalah digabungkan dalam <section> elemen, dan masing-masing memiliki label. Tombol Selesaikan Pembayaran adalah HTML <button>. Nanti dalam codelab ini, Anda akan mempelajari fitur browser yang dapat diakses menggunakan elemen-elemen ini.

Catatan: Elemen <input> tidak memiliki tag penutup. Itu karena elemen tersebut adalah elemen void (kosong): tidak ada konten dalam dirinya sendiri. Sebuah "/" karakter di akhir elemen void bersifat opsional: <input> atau <input /> diperbolehkan.

Klik Lihat Aplikasi untuk melihat pratinjau formulir pembayaran.

• Apakah formulirnya cukup berfungsi sebagaimana mestinya?
• Apakah ada yang ingin Anda ubah untuk membuatnya berfungsi lebih baik?
• Bagaimana kalau di perangkat seluler?

Klik Lihat Sumber untuk kembali ke kode sumber Anda.

Langkah 2: Desain untuk perangkat seluler dan desktop

HTML yang Anda tambahkan valid, tetapi gaya browser default membuat formulir sulit digunakan, terutama di perangkat seluler. Itu juga tidak terlihat bagus.

Anda perlu memastikan formulir berfungsi dengan baik di berbagai perangkat dengan menyesuaikan padding, margin, dan ukuran font.

Salin semua CSS di bawah dan tempelkan ke file css/main.css Anda sendiri.

Terlalu banyak CSS. Hal utama yang harus diperhatikan adalah perubahan ukuran:

• padding dan margin ditambahkan ke input.
• font-size dan nilai lainnya berbeda untuk ukuran area pandang yang berbeda.

Setelah Anda siap, klik View App untuk melihat gaya formulir. Anda juga akan melihat bahwa {i>border <i}memiliki telah disesuaikan, dan display: block; digunakan untuk label sehingga diletakkan dalam baris sendiri, dan inputnya bisa berupa lebar penuh. Praktik terbaik formulir login menjelaskan manfaat pendekatan ini secara lebih rinci.

Pemilih :invalid digunakan untuk menunjukkan saat input memiliki nilai yang tidak valid. (Anda akan menggunakan nanti di codelab.)

CSS mengutamakan perangkat seluler:

• CSS default ditujukan untuk area pandang dengan lebar kurang dari 400px.
• Kueri media adalah digunakan untuk mengganti default untuk area pandang yang lebarnya minimal 400px, lalu sekali lagi untuk area pandang yang lebarnya minimal 500px. Ini akan berfungsi dengan baik untuk ponsel yang lebih kecil dan perangkat seluler dengan layar yang lebih besar, dan juga di {i>desktop<i}.

Setiap kali membangun aplikasi untuk web, Anda perlu melakukan pengujian di berbagai perangkat dan ukuran area pandang. Itu adalah terutama untuk formulir, karena satu gangguan kecil dapat membuatnya tidak dapat digunakan. Anda harus selalu menyesuaikan Titik henti sementara CSS untuk memastikan titik henti sementara berfungsi baik dengan dan perangkat target Anda.

• Apakah seluruh formulir terlihat?
• Apakah {i>input<i} formulirnya cukup besar?
• Apakah semua teks dapat dibaca?
• Apakah Anda melihat adanya perbedaan antara menggunakan perangkat seluler sungguhan, dan melihat formulir di Mode Perangkat di Chrome DevTools?
• Apakah Anda perlu menyesuaikan titik henti sementara?

Ada beberapa cara untuk menguji formulir Anda di berbagai perangkat:

• Menggunakan Mode Perangkat Chrome DevTools untuk melakukan simulasi perangkat seluler.
• Kirim URL dari komputer ke ponsel Anda.
• Gunakan layanan seperti BrowserStack untuk melakukan pengujian pada rentang perangkat dan browser.

Langkah 3: Tambahkan atribut untuk membantu pengguna memasukkan data

Aktifkan browser untuk menyimpan dan mengisi otomatis nilai input, serta memberikan akses ke keamanan bawaan pembayaran, dan fitur validasi.

Tambahkan atribut ke formulir di file index.html Anda sehingga terlihat seperti ini:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Lihat aplikasi Anda lagi, lalu ketuk atau klik kolom Nomor kartu. Tergantung pada perangkat dan Anda mungkin melihat pemilih yang menampilkan metode pembayaran yang disimpan untuk browser, seperti di bawah ini.

Pemilih dan isi otomatis pembayaran browser bawaan.

Setelah Anda memilih metode pembayaran dan memasukkan kode keamanan Anda, browser akan mengisi otomatis formulir menggunakan nilai kartu pembayaran autocomplete yang Anda tambahkan ke formulir:

• cc-number
• cc-name
• cc-exp
• cc-csc

Banyak browser juga memeriksa dan mengonfirmasi validitas nomor kartu kredit dan kode keamanan.

Catatan: Jangan kaget! Browser Anda mungkin dapat mengisi otomatis formulir dengan data kartu pembayaran yang tersimpan, tetapi tidak dapat melakukan pembayaran, dan tidak ada data yang ditransfer atau disimpan.

Di perangkat seluler, Anda juga akan menyadari bahwa ada keyboard numerik segera setelah Anda mengetuk Nomor kartu. Hal itu karena Anda menggunakan inputmode="numeric". Untuk isian numerik, ini membuat lebih mudah untuk memasukkan angka dan tidak mungkin memasukkan karakter non-numerik, dan mendorong pengguna untuk mengingat jenis data yang mereka masukkan.

Anda harus menambahkan semua nilai autocomplete yang tersedia dengan benar ke formulir pembayaran. Penting cukup umum bagi situs kehilangan nilai autocomplete untuk tanggal habis masa berlaku kartu dan kolom. Jika satu nilai autofill salah atau tidak ada, pengguna harus mengambil nilai sebenarnya untuk memasukkan data kartu secara manual, dan Anda bisa kehilangan penjualan. Jika isi otomatis pada formulir pembayaran tidak berfungsi dengan baik, pengguna juga dapat memutuskan untuk menyimpan catatan detail kartu pembayaran di ponsel atau komputer, yang sangat tidak aman.

Catatan: Penelitian menunjukkan bahwa mungkin lebih baik menggunakan elemen tertentu untuk bulan dan tahun secara terpisah daripada input tunggal. Terserah Anda mana yang terbaik. Uji ini dengan me-remix dan mengedit HTML dari demo formulir pembayaran lengkap kami, yang mencakup kode untuk kedua jenis kolom tanggal habis masa berlaku.

Coba kirimkan formulir pembayaran dengan kolom kosong. Permintaan browser untuk menyelesaikan layanan otomatis dan data skalabel. Sekarang tambahkan huruf ke nilai di kolom Nomor kartu dan coba kirimkan formulirnya. Tujuan browser memperingatkan bahwa nilai tidak valid. Hal ini terjadi karena Anda menggunakan atribut pattern untuk menentukan nilai yang valid untuk sebuah kolom. Hal yang sama berlaku untuk maxlength dan lainnya batasan validasi JavaScript tidak diperlukan.

Formulir pembayaran Anda sekarang akan terlihat seperti ini:

• Coba hapus nilai autocomplete dan isi formulir pembayaran. Kesulitan apa yang Anda hadapi?
• Coba formulir pembayaran di toko online. Pertimbangkan hal apa saja yang berjalan dengan baik dan mana yang salah. Apakah ada masalah umum atau praktik terbaik yang harus Anda ikuti?

Langkah 4: Nonaktifkan tombol pembayaran setelah formulir dikirimkan

Anda harus mempertimbangkan untuk menonaktifkan tombol kirim setelah pengguna mengetuk atau mengkliknya—terutama saat pengguna sedang melakukan pembayaran. Banyak pengguna mengetuk atau mengklik tombol berulang kali, bahkan jika mereka bekerja dengan baik. Hal tersebut dapat menyebabkan masalah dengan pemrosesan pembayaran dan menambah beban server.

Tambahkan JavaScript berikut ke file js/main.js Anda:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Coba kirimkan formulir pembayaran dan lihat apa yang terjadi.

Perhatian: Beberapa situs menonaktifkan tombol kirim formulir hingga pengguna melengkapi semua kolom formulir dengan benar. Sebaiknya jangan lakukan hal tersebut, karena pengguna dapat secara tidak sengaja melewatkan nilai yang diperlukan, atau menggunakan nilai yang tidak valid, lalu ketuk atau klik tombol kirim yang dinonaktifkan dan menganggap situs Anda rusak. Meskipun Anda menandai nilai formulir sebagai tidak valid atau tidak ada, pengguna mungkin tidak melihat peringatan tersebut (terutama untuk formulir yang lebih panjang, dan di perangkat seluler). Sebaiknya validasi secara inline saat pengguna memasukkan data–dan saat mereka mencoba mengirimkan formulir.

Berikut adalah tampilan kode Anda pada titik ini, dengan tambahan beberapa komentar dan Fungsi validate():

• Anda akan melihat bahwa JavaScript menyertakan kode yang diberi komentar untuk validasi data. Kode ini menggunakan Constraint Validation API (yang didukung secara luas) untuk menambahkan metrik kustom validasi, mengakses UI browser bawaan untuk mengatur fokus dan menampilkan prompt. Hapus tanda komentar pada kode dan mencobanya. Anda harus menetapkan nilai yang sesuai untuk someregex dan message, serta menetapkan nilai untuk someField.

• Apa saja data analisis dan Pemantauan Pengguna Nyata akan Anda pantau untuk mengidentifikasi cara memperbaiki formulir Anda?

Formulir pembayaran lengkap Anda sekarang akan terlihat seperti ini:

• Coba formulir Anda di perangkat lain. Perangkat dan browser apa yang Anda penargetan khusus? Bagaimana cara memperbaiki formulirnya?

Lebih jauh

Pertimbangkan fitur formulir penting berikut yang tidak dibahas dalam codelab ini:

• Link ke dokumen Persyaratan Layanan dan kebijakan privasi: jelaskan kepada pengguna bagaimana Anda melindungi data mereka.

• Gaya dan branding: pastikan keduanya cocok dengan elemen lain di situs Anda. Saat memasukkan nama dan alamat dan melakukan pembayaran, pengguna harus merasa nyaman, percaya bahwa mereka tetap berada di tempat yang tepat.

• Pemantauan Analisis dan Pengguna Nyata: memungkinkan performa dan kegunaan desain formulir Anda untuk diuji dan dipantau untuk pengguna sungguhan.