Code Reference

Checkout Form

HTML · Example / how-to

HTML · Example / how-to


📋 Overview

Accessible checkout fields with autocomplete tokens and native validation.

🔧 Core concepts

Fieldautocomplete
Emailemail
Namename
Card namecc-name
Countrycountry

💡 Examples

<form method="post" action="/checkout">
  <fieldset>
    <legend>Contact</legend>
    <label>Email
      <input name="email" type="email" required autocomplete="email" />
    </label>
  </fieldset>
  <fieldset>
    <legend>Shipping</legend>
    <label>Full name
      <input name="name" required autocomplete="name" />
    </label>
    <label>Country
      <input name="country" required autocomplete="country-name" />
    </label>
  </fieldset>
  <button type="submit">Pay</button>
</form>

⚠️ Pitfalls

  • Never put raw card numbers in your own inputs unless PCI-compliant — use a processor iframe/widget.

On this page