Checkout

Checkout form patterns with single-page, split layout, and multi-step flows. Accessible and secure payment form designs.

Overview

Checkout forms are critical for e-commerce success. These patterns demonstrate best practices for collecting shipping and payment information while maintaining user trust and a smooth experience using Vanilla Breeze components.

Key features:

<fieldset> with <legend> for semantic grouping of related fields
<form-field> for consistent input styling and validation
data-layout="sidebar" with <main> and <aside> for order summary placement
data-layout="split" for side-by-side fields (city/state, expiry/CVC)
data-layout="cluster" for inline elements (security note, summary rows)
<icon-wc name="lock"> for security indicators
Proper autocomplete attributes for address and payment autofill
inputmode="numeric" for mobile keyboard optimization

Single-Page Checkout

A complete checkout form on a single page, using <fieldset> to group contact, shipping, and payment sections. Centered with data-layout="center" and wrapped in a <layout-card> for visual containment. Ideal for simpler purchases or when you want to minimize steps.

<body>
  <main data-layout="center" data-layout-max="narrow">
    <layout-card data-padding="l">
      <form action="/checkout" method="POST" data-layout="stack" data-layout-gap="l">
        <header data-layout="stack" data-layout-gap="s">
          <h1>Checkout</h1>
          <p>Complete your purchase by providing the information below.</p>
        </header>

<fieldset data-layout="stack" data-layout-gap="m">
          <legend>Contact information</legend>
            <form-field>
              <label for="email">Email address</label>
              <input type="email" id="email" name="email" required
                     autocomplete="email" placeholder="you@example.com"
                     aria-describedby="email-error"/>
              <output id="email-error" class="error" for="email" aria-live="polite">
                Please enter a valid email address.
              </output>
            </form-field>
        </fieldset>

<fieldset data-layout="stack" data-layout-gap="m">
          <legend>Shipping address</legend>
            <form-field>
              <label for="full-name">Full name</label>
              <input type="text" id="full-name" name="full_name" required
                     autocomplete="name" placeholder="John Doe"/>
            </form-field>

<form-field>
              <label for="address">Street address</label>
              <input type="text" id="address" name="address" required
                     autocomplete="street-address" placeholder="123 Main St"/>
            </form-field>

<form-field>
                <label for="state">State / Province</label>
                <input type="text" id="state" name="state" required
                       autocomplete="address-level1" placeholder="CA"/>
              </form-field>
            </div>

<div data-layout="split" data-layout-gap="m">
              <form-field>
                <label for="zip">ZIP / Postal code</label>
                <input type="text" id="zip" name="zip" required
                       autocomplete="postal-code" placeholder="94102"/>
              </form-field>

<form-field>
                <label for="country">Country</label>
                <select id="country" name="country" required autocomplete="country-name">
                  <option value="">Select country</option>
                  <option value="US" selected>United States</option>
                  <option value="CA">Canada</option>
                  <option value="GB">United Kingdom</option>
                </select>
              </form-field>
            </div>
        </fieldset>

<fieldset data-layout="stack" data-layout-gap="m">
          <legend>Payment</legend>
            <form-field>
              <label for="card-number">Card number</label>
              <input type="text" id="card-number" name="card_number" required
                     autocomplete="cc-number" placeholder="1234 5678 9012 3456"
                     inputmode="numeric"/>
            </form-field>

<div data-layout="split" data-layout-gap="m">
              <form-field>
                <label for="expiry">Expiration date</label>
                <input type="text" id="expiry" name="expiry" required
                       autocomplete="cc-exp" placeholder="MM / YY"
                       inputmode="numeric"/>
              </form-field>

<form-field>
                <label for="cvc">CVC</label>
                <input type="text" id="cvc" name="cvc" required
                       autocomplete="cc-csc" placeholder="123"
                       inputmode="numeric" maxlength="4"/>
              </form-field>
            </div>

<p class="security-note" data-layout="cluster" data-layout-gap="xs" data-layout-align="center">
              <icon-wc name="lock"></icon-wc>
              Your payment information is encrypted and secure.
            </p>
        </fieldset>

<button type="submit">Place order</button>
      </form>
    </layout-card>
  </main>
</body>

Fieldset Styles

VB provides native <fieldset> styling (border, radius, padding, legend formatting). These overrides increase the padding and legend font size for a more spacious checkout layout:

Split Layout with Order Summary

A two-column layout using data-layout="sidebar" with the checkout form in a <main> and an order summary <aside>. The sidebar layout automatically recognizes these semantic elements for content vs sidebar sizing. Order items use data-layout="cluster" for label/price pairs and data-layout="stack" for item details. Native <hr> elements provide visual dividers.

<div data-layout="sidebar" data-layout-gap="xl" data-layout-content-min="60">
  
  <main data-layout="stack" data-layout-gap="l">
    <header data-layout="stack" data-layout-gap="s">
      <h1>Checkout</h1>
      <p>Complete your purchase by providing shipping and payment information.</p>
    </header>

<form action="/checkout" method="POST" data-layout="stack" data-layout-gap="l">
      
      <fieldset data-layout="stack" data-layout-gap="m">
        <legend>Shipping address</legend>
          <form-field>
            <label for="email">Email address</label>
            <input type="email" id="email" name="email" required
                   autocomplete="email" placeholder="you@example.com"/>
          </form-field>

<form-field>
            <label for="full-name">Full name</label>
            <input type="text" id="full-name" name="full_name" required
                   autocomplete="name" placeholder="John Doe"/>
          </form-field>

<form-field>
            <label for="address">Street address</label>
            <input type="text" id="address" name="address" required
                   autocomplete="street-address" placeholder="123 Main St"/>
          </form-field>

<form-field>
              <label for="state">State</label>
              <input type="text" id="state" name="state" required
                     autocomplete="address-level1" placeholder="CA"/>
            </form-field>
          </div>

<form-field>
              <label for="country">Country</label>
              <select id="country" name="country" required>
                <option value="">Select country</option>
                <option value="US" selected>United States</option>
                <option value="CA">Canada</option>
              </select>
            </form-field>
          </div>
      </fieldset>

<fieldset data-layout="stack" data-layout-gap="m">
        <legend>Payment</legend>
          <form-field>
            <label for="card-number">Card number</label>
            <input type="text" id="card-number" name="card_number" required
                   autocomplete="cc-number" placeholder="1234 5678 9012 3456"
                   inputmode="numeric"/>
          </form-field>

<div data-layout="split" data-layout-gap="m">
            <form-field>
              <label for="expiry">Expiration</label>
              <input type="text" id="expiry" name="expiry" required
                     autocomplete="cc-exp" placeholder="MM / YY"/>
            </form-field>

<form-field>
              <label for="cvc">CVC</label>
              <input type="text" id="cvc" name="cvc" required
                     autocomplete="cc-csc" placeholder="123" maxlength="4"/>
            </form-field>
          </div>

<p class="security-note" data-layout="cluster" data-layout-gap="xs" data-layout-align="center">
            <icon-wc name="lock"></icon-wc>
            Your payment information is encrypted and secure.
          </p>
      </fieldset>

<button type="submit">Place order</button>
    </form>
  </main>

<aside class="order-summary" data-layout="stack" data-layout-gap="l">
    <h3>Order summary</h3>

<div data-layout="stack" data-layout-gap="m">
      <div data-layout="cluster" data-layout-justify="between" data-layout-align="start" data-layout-gap="m">
        <div data-layout="stack" data-layout-gap="2xs">
          <span class="order-item-name">Premium Wireless Headphones</span>
          <span class="order-item-details">Black, Qty: 1</span>
        </div>
        <span class="order-item-price">$249.00</span>
      </div>
      
    </div>

<hr/>

<div data-layout="stack" data-layout-gap="s">
      <div class="summary-row" data-layout="cluster" data-layout-justify="between">
        <span>Subtotal</span>
        <span>$327.98</span>
      </div>
      <div class="summary-row" data-layout="cluster" data-layout-justify="between">
        <span>Shipping</span>
        <span>$9.99</span>
      </div>
      <div class="summary-row" data-layout="cluster" data-layout-justify="between">
        <span>Tax</span>
        <span>$27.12</span>
      </div>
    </div>

<hr/>

<div class="summary-row total" data-layout="cluster" data-layout-justify="between">
      <span>Total</span>
      <span>$365.09</span>
    </div>
  </aside>
</div>

Order Summary Styles

Layout is handled entirely by data-layout attributes. These styles cover only visual concerns (font sizes, weights, and colors):

Multi-Step Checkout

A wizard-style checkout flow with a visual step indicator. Breaks the checkout into Shipping, Payment, and Review steps. Uses data-layout="cluster" for the progress indicator. Reduces cognitive load by focusing on one section at a time.

<body>
  <main data-layout="center" data-layout-max="narrow">
    <layout-card data-padding="l">
      <div data-layout="stack" data-layout-gap="l">
        <header data-layout="stack" data-layout-gap="s">
          <h1>Checkout</h1>
          <p>Step 1 of 3: Shipping</p>
        </header>

<nav class="steps" aria-label="Checkout progress">
          <ol>
            <li aria-current="step">Shipping</li>
            <li>Payment</li>
            <li>Review</li>
          </ol>
        </nav>

<form action="/checkout/shipping" method="POST" data-layout="stack" data-layout-gap="l">
          <fieldset data-layout="stack" data-layout-gap="m">
            <legend>Contact information</legend>
              <form-field>
                <label for="email">Email address</label>
                <input type="email" id="email" name="email" required
                       autocomplete="email" placeholder="you@example.com"/>
              </form-field>

<form-field>
                <label for="phone">Phone number</label>
                <input type="tel" id="phone" name="phone"
                       autocomplete="tel" placeholder="(555) 123-4567"/>
              </form-field>
          </fieldset>

<fieldset data-layout="stack" data-layout-gap="m">
            <legend>Shipping address</legend>
              <div data-layout="split" data-layout-gap="m">
                <form-field>
                  <label for="first-name">First name</label>
                  <input type="text" id="first-name" name="first_name" required
                         autocomplete="given-name" placeholder="John"/>
                </form-field>

<form-field>
                  <label for="last-name">Last name</label>
                  <input type="text" id="last-name" name="last_name" required
                         autocomplete="family-name" placeholder="Doe"/>
                </form-field>
              </div>

<form-field>
                <label for="address">Street address</label>
                <input type="text" id="address" name="address" required
                       autocomplete="street-address" placeholder="123 Main St"/>
              </form-field>

<form-field>
                  <label for="state">State</label>
                  <select id="state" name="state" required autocomplete="address-level1">
                    <option value="">Select state</option>
                    <option value="CA" selected>California</option>
                  </select>
                </form-field>
              </div>

<form-field>
                  <label for="country">Country</label>
                  <select id="country" name="country" required>
                    <option value="US" selected>United States</option>
                    <option value="CA">Canada</option>
                  </select>
                </form-field>
              </div>
          </fieldset>

<div data-layout="cluster" data-layout-justify="between" data-layout-gap="m">
            <a href="/cart" class="button secondary">Back to cart</a>
            <button type="submit">Continue to payment</button>
          </div>
        </form>
      </div>
    </layout-card>
  </main>
</body>

Step Indicator

The step indicator uses nav.steps from VB core — no custom CSS needed. See the Steps pattern for all variants and customization.

Configuration

Key configuration options for checkout forms:

Element/Attribute	Purpose	Options
`fieldset` + `legend`	Group related fields semantically	Contact, Shipping, Payment sections
`data-layout="split"`	Side-by-side form fields	City/State, Expiry/CVC pairs
`data-layout="sidebar"`	Two-column layout with order summary	Uses `<main>` (content) + `<aside>` (sidebar)
`inputmode="numeric"`	Mobile numeric keyboard	Card number, CVC, ZIP code
`autocomplete`	Enable browser/payment autofill	`cc-number`, `cc-exp`, `cc-csc`, `street-address`
`maxlength`	Limit input length	CVC: `4`, ZIP: `10`

Usage Notes

PCI Compliance

Never store raw credit card numbers on your server
Use a payment processor (Stripe, Braintree, etc.) with hosted fields or tokenization
These patterns show the form structure; actual payment handling requires integration with a PCI-compliant payment gateway
Display security indicators (lock icon, "encrypted" messaging) to build user trust

Address Autofill

Use proper autocomplete values: street-address, address-level2 (city), address-level1 (state), postal-code, country-name
Consider integrating address verification services (Google Places, SmartyStreets) for accuracy
Support international addresses with flexible field requirements

Same Billing/Shipping Address

Add a checkbox "Billing address same as shipping" to reduce form fields
Show/hide billing address section based on checkbox state
Pre-populate billing fields when checkbox is unchecked

Form Validation

Validate card numbers with Luhn algorithm
Check expiration date is in the future
Validate ZIP/postal codes based on selected country
Show inline validation errors using <output class="error">

Accessibility

<fieldset> and <legend> provide semantic grouping for screen readers
All inputs have associated labels
Error messages linked via aria-describedby
Step indicator uses aria-current="step" for current step
Progress is announced with descriptive step text (e.g., "Step 1 of 3: Shipping")