Checkout Form

Fetch pattern JSON: curl https://webspire.de/patterns/forms/checkout.json

checkout.html

<section class="ws-forms bg-[var(--ws-forms-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">
    <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-forms-text)]">Checkout</h2>

    <div class="mt-10 grid gap-10 lg:grid-cols-5">
      <!-- Form -->
      <form class="lg:col-span-3">
        <fieldset>
          <legend class="text-base font-semibold text-[var(--ws-forms-text)]">Contact information</legend>
          <div class="mt-4 space-y-4">
            <div>
              <label for="ck-email" class="block text-sm font-medium text-[var(--ws-forms-label)]">Email</label>
              <input type="email" id="ck-email" name="email" autocomplete="email" required
                class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
                placeholder="you@example.com">
            </div>
            <div class="grid gap-4 sm:grid-cols-2">
              <div>
                <label for="ck-first" class="block text-sm font-medium text-[var(--ws-forms-label)]">First name</label>
                <input type="text" id="ck-first" name="first_name" autocomplete="given-name" required
                  class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
              </div>
              <div>
                <label for="ck-last" class="block text-sm font-medium text-[var(--ws-forms-label)]">Last name</label>
                <input type="text" id="ck-last" name="last_name" autocomplete="family-name" required
                  class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
              </div>
            </div>
          </div>
        </fieldset>

        <fieldset class="mt-8">
          <legend class="text-base font-semibold text-[var(--ws-forms-text)]">Payment details</legend>
          <div class="mt-4 space-y-4">
            <div>
              <label for="ck-card" class="block text-sm font-medium text-[var(--ws-forms-label)]">Card number</label>
              <input type="text" id="ck-card" name="card_number" inputmode="numeric" autocomplete="cc-number" required
                class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
                placeholder="1234 5678 9012 3456">
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="ck-expiry" class="block text-sm font-medium text-[var(--ws-forms-label)]">Expiry</label>
                <input type="text" id="ck-expiry" name="expiry" autocomplete="cc-exp" required
                  class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
                  placeholder="MM / YY">
              </div>
              <div>
                <label for="ck-cvc" class="block text-sm font-medium text-[var(--ws-forms-label)]">CVC</label>
                <input type="text" id="ck-cvc" name="cvc" inputmode="numeric" autocomplete="cc-csc" required
                  class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
                  placeholder="123">
              </div>
            </div>
          </div>
        </fieldset>

        <button type="submit" class="mt-8 w-full rounded-xl bg-[var(--ws-forms-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-forms-action-text)] transition hover:brightness-110">Pay $149.00</button>
      </form>

      <!-- Order summary -->
      <div class="rounded-2xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-bg)] p-6 lg:col-span-2">
        <h3 class="text-base font-semibold text-[var(--ws-forms-text)]">Order summary</h3>
        <ul class="mt-6 divide-y divide-[var(--ws-forms-input-border)] text-sm">
          <li class="flex justify-between py-3">
            <span class="text-[var(--ws-forms-label)]">Pro Plan (Annual)</span>
            <span class="font-medium text-[var(--ws-forms-text)]">$129.00</span>
          </li>
          <li class="flex justify-between py-3">
            <span class="text-[var(--ws-forms-label)]">Priority support add-on</span>
            <span class="font-medium text-[var(--ws-forms-text)]">$20.00</span>
          </li>
        </ul>
        <dl class="mt-4 space-y-2 border-t border-[var(--ws-forms-input-border)] pt-4 text-sm">
          <div class="flex justify-between">
            <dt class="text-[var(--ws-forms-label)]">Subtotal</dt>
            <dd class="text-[var(--ws-forms-text)]">$149.00</dd>
          </div>
          <div class="flex justify-between">
            <dt class="text-[var(--ws-forms-label)]">Tax</dt>
            <dd class="text-[var(--ws-forms-text)]">$0.00</dd>
          </div>
          <div class="flex justify-between border-t border-[var(--ws-forms-input-border)] pt-2 text-base font-semibold">
            <dt class="text-[var(--ws-forms-text)]">Total</dt>
            <dd class="text-[var(--ws-forms-text)]">$149.00</dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</section>

Details

Family

forms

Tier

enhanced

Kind

section

Extends

forms/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

formcheckoutpaymentorderecommerce

Slots

Name	Required	Description
contact	Yes	Contact information fields (email, name).
payment	Yes	Payment method fields (card number, expiry, CVC).
summary	Yes	Order summary with line items and total.

Two-column checkout layout. Left column has contact info (email, name) and payment details (card number, expiry, CVC) in a clean form. Right column shows order summary with line items, subtotal, shipping, tax, and total. Responsive: stacks on mobile with summary on top.