checkout payment credit-card billing ecommerce checkout payment credit-card card-number cvv expiry billing checkout with payment fields billing form with credit card input
Checkout With Payment
Fetch pattern JSON:
curl https://webspire.de/patterns/checkout/with-payment.json with-payment.html
<div class="ws-checkout grid grid-cols-1 gap-8 lg:grid-cols-5">
<form class="space-y-8 lg:col-span-3" aria-label="Checkout form">
<section>
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Billing Information</h2>
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label for="wp-first-name" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">First Name</label>
<input type="text" id="wp-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="wp-last-name" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Last Name</label>
<input type="text" id="wp-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 class="mt-4">
<label for="wp-email" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Email</label>
<input type="email" id="wp-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 class="mt-4">
<label for="wp-address" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Address</label>
<input type="text" id="wp-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="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
<div>
<label for="wp-city" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">City</label>
<input type="text" id="wp-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="wp-zip" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">ZIP Code</label>
<input type="text" id="wp-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="wp-country" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Country</label>
<div class="relative">
<select id="wp-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>
</section>
<section>
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Payment Method</h2>
<div class="mt-4 flex gap-3">
<span class="inline-flex items-center rounded-lg border border-[var(--ws-checkout-border)] px-3 py-1.5 text-xs font-medium text-[var(--ws-checkout-text-soft)]">Visa</span>
<span class="inline-flex items-center rounded-lg border border-[var(--ws-checkout-border)] px-3 py-1.5 text-xs font-medium text-[var(--ws-checkout-text-soft)]">Mastercard</span>
<span class="inline-flex items-center rounded-lg border border-[var(--ws-checkout-border)] px-3 py-1.5 text-xs font-medium text-[var(--ws-checkout-text-soft)]">Amex</span>
</div>
<div class="mt-4">
<label for="card-number" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Card Number</label>
<input type="text" id="card-number" name="card-number" autocomplete="cc-number" placeholder="1234 5678 9012 3456" 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="mt-4 grid grid-cols-2 gap-4">
<div>
<label for="expiry" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Expiry Date</label>
<input type="text" id="expiry" name="expiry" autocomplete="cc-exp" placeholder="MM/YY" 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="cvv" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc" placeholder="123" 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>
</section>
</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
checkoutpaymentcredit-cardbillingecommerce
Slots
| Name | Required | Description |
|---|---|---|
| billing-form | Yes | Billing information form fields. |
| payment-method | Yes | Payment section with card number, expiry, CVV, and method icons. |
| order-summary | Yes | Order items list with subtotal, shipping, and total. |
| submit | Yes | Place order button. |
Checkout form extended with a payment method section featuring card number, expiry date, and CVV fields alongside payment method icons (Visa, Mastercard, Amex).