Checkout Review

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

review.html

<div class="ws-checkout mx-auto max-w-2xl">
  <div class="rounded-xl border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-card-bg)] p-6">
    <h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Order Review</h2>
    <ul class="mt-6 divide-y divide-[var(--ws-checkout-border)]">
      <li class="flex items-center gap-4 py-4">
        <div class="h-16 w-16 shrink-0 rounded-lg bg-gradient-to-br from-indigo-200 to-indigo-300"></div>
        <div class="flex-1">
          <p class="text-sm font-medium text-[var(--ws-checkout-text)]">Wireless Headphones</p>
          <p class="text-xs text-[var(--ws-checkout-text-soft)]">Qty: 1</p>
        </div>
        <span class="text-sm font-medium text-[var(--ws-checkout-text)]">$149.99</span>
      </li>
      <li class="flex items-center gap-4 py-4">
        <div class="h-16 w-16 shrink-0 rounded-lg bg-gradient-to-br from-emerald-200 to-emerald-300"></div>
        <div class="flex-1">
          <p class="text-sm font-medium text-[var(--ws-checkout-text)]">Mechanical Keyboard</p>
          <p class="text-xs text-[var(--ws-checkout-text-soft)]">Qty: 1</p>
        </div>
        <span class="text-sm font-medium text-[var(--ws-checkout-text)]">$89.99</span>
      </li>
      <li class="flex items-center gap-4 py-4">
        <div class="h-16 w-16 shrink-0 rounded-lg bg-gradient-to-br from-amber-200 to-amber-300"></div>
        <div class="flex-1">
          <p class="text-sm font-medium text-[var(--ws-checkout-text)]">USB-C Hub</p>
          <p class="text-xs text-[var(--ws-checkout-text-soft)]">Qty: 2</p>
        </div>
        <span class="text-sm font-medium text-[var(--ws-checkout-text)]">$79.98</span>
      </li>
    </ul>
    <div class="mt-6 grid gap-4 border-t border-[var(--ws-checkout-border)] pt-6 sm:grid-cols-2">
      <div>
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-semibold text-[var(--ws-checkout-text)]">Shipping Address</h3>
          <a href="#" class="text-xs font-medium text-[var(--ws-checkout-action-bg)] hover:underline">Edit</a>
        </div>
        <p class="mt-2 text-sm text-[var(--ws-checkout-text-soft)]">Jane Doe<br>123 Main Street<br>San Francisco, CA 94102<br>United States</p>
      </div>
      <div>
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-semibold text-[var(--ws-checkout-text)]">Payment Method</h3>
          <a href="#" class="text-xs font-medium text-[var(--ws-checkout-action-bg)] hover:underline">Edit</a>
        </div>
        <div class="mt-2 flex items-center gap-2">
          <span class="inline-flex items-center rounded border border-[var(--ws-checkout-border)] px-2 py-0.5 text-xs font-medium text-[var(--ws-checkout-text-soft)]">Visa</span>
          <span class="text-sm text-[var(--ws-checkout-text-soft)]">ending in 4242</span>
        </div>
      </div>
    </div>
    <dl class="mt-6 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)]">$319.96</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)]">$329.95</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">Confirm Order</button>
  </div>
</div>

Details

Family

checkout

Tier

enhanced

Kind

component

Extends

checkout/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

checkoutrevieworderconfirmationecommerce

Slots

Name	Required	Description
item-list	Yes	Order items with thumbnails, quantities, and prices.
shipping-address	Yes	Shipping address summary with edit link.
payment-method	Yes	Payment method summary (card type, last 4 digits) with edit link.
totals	Yes	Subtotal, shipping, and total summary.
submit	Yes	Confirm order button.

Order review step showing an item list with thumbnails, quantities, and prices. Below: shipping address and payment method summaries with edit links. Subtotal, shipping, and total at the bottom with a Confirm Order CTA.