checkout form order billing ecommerce checkout billing order summary form ecommerce cart checkout page layout billing form with order summary
Checkout Base
Fetch pattern JSON:
curl https://webspire.de/patterns/checkout/base.json base.html
<div class="ws-checkout grid grid-cols-1 gap-8 lg:grid-cols-5">
<form class="space-y-6 lg:col-span-3" aria-label="Billing information">
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Billing Information</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">First Name</label>
<input type="text" id="first-name" name="first-name" autocomplete="given-name" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Last Name</label>
<input type="text" id="last-name" name="last-name" autocomplete="family-name" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Email</label>
<input type="email" id="email" name="email" autocomplete="email" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="address" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Address</label>
<input type="text" id="address" name="address" autocomplete="street-address" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div>
<label for="city" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="zip" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">ZIP Code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="country" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Country</label>
<div class="relative">
<select id="country" name="country" autocomplete="country" class="mt-1 block w-full appearance-none rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 pr-10 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]">
<option>United States</option>
<option>Germany</option>
<option>United Kingdom</option>
<option>France</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-checkout-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
</div>
</div>
</form>
<aside class="rounded-xl border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-card-bg)] p-6 lg:col-span-2" aria-label="Order summary">
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Order Summary</h2>
<ul class="mt-4 divide-y divide-[var(--ws-checkout-border)]">
<li class="flex justify-between py-3">
<span class="text-sm text-[var(--ws-checkout-text-soft)]">Wireless Headphones</span>
<span class="text-sm font-medium text-[var(--ws-checkout-text)]">$149.99</span>
</li>
<li class="flex justify-between py-3">
<span class="text-sm text-[var(--ws-checkout-text-soft)]">Mechanical Keyboard</span>
<span class="text-sm font-medium text-[var(--ws-checkout-text)]">$89.99</span>
</li>
<li class="flex justify-between py-3">
<span class="text-sm text-[var(--ws-checkout-text-soft)]">USB-C Hub</span>
<span class="text-sm font-medium text-[var(--ws-checkout-text)]">$39.99</span>
</li>
</ul>
<dl class="mt-4 space-y-2 border-t border-[var(--ws-checkout-border)] pt-4">
<div class="flex justify-between">
<dt class="text-sm text-[var(--ws-checkout-text-soft)]">Subtotal</dt>
<dd class="text-sm font-medium text-[var(--ws-checkout-text)]">$279.97</dd>
</div>
<div class="flex justify-between">
<dt class="text-sm text-[var(--ws-checkout-text-soft)]">Shipping</dt>
<dd class="text-sm font-medium text-[var(--ws-checkout-text)]">$9.99</dd>
</div>
<div class="flex justify-between border-t border-[var(--ws-checkout-border)] pt-2">
<dt class="text-base font-semibold text-[var(--ws-checkout-text)]">Total</dt>
<dd class="text-base font-semibold text-[var(--ws-checkout-text)]">$289.96</dd>
</div>
</dl>
<button type="submit" class="mt-6 w-full rounded-lg bg-[var(--ws-checkout-action-bg)] px-4 py-3 text-sm font-medium text-[var(--ws-checkout-action-text)] transition hover:opacity-90">Place Order</button>
</aside>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
checkoutformorderbillingecommerce
Slots
| Name | Required | Description |
|---|---|---|
| billing-form | Yes | Billing information form fields (name, email, address, city, zip, country). |
| order-summary | Yes | Order items list with subtotal, shipping, and total. |
| submit | Yes | Place order button. |
Two-column checkout layout with a billing information form (name, email, address, city, zip, country) on the left and an order summary with line items, subtotal, shipping, and total on the right.