Blocks / Order Confirmation

Order Confirmation beta Pro

The page after the payment: what was bought, what it cost, when it arrives, what to do next.

Preview

Order confirmed

Order #AC-88412 · A receipt was sent to [email protected]

KATA Pro — lifetime × 1$129
Mold poster, A2 × 1$24
ShippingFree
Total paid$153

Estimated delivery Nov 6 – Nov 8. The download link for Pro is in your receipt, and the poster ships separately.

Built from: Button, Badge — include their CSS alongside this block.

<div class="k-oc">
  <span class="ok"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg></span>
  <h3>Order confirmed</h3>
  <p class="no">Order <b>#AC-88412</b> · A receipt was sent to [email protected]</p>
  <div class="k-oc-items">
    <div class="r"><span>KATA Pro — lifetime × 1</span><b>$129</b></div>
    <div class="r"><span>Mold poster, A2 × 1</span><b>$24</b></div>
    <div class="r"><span>Shipping</span><b>Free</b></div>
    <div class="t"><span>Total paid</span><span>$153</span></div>
  </div>
  <p class="k-oc-eta">Estimated delivery <b>Nov 6 – Nov 8</b>. The download link for Pro is in your receipt, and the poster ships separately.</p>
  <div class="k-oc-actions">
    <button class="btn btn-pri" type="button">Track order</button>
    <button class="btn btn-ghost" type="button">Continue shopping</button>
  </div>
</div>
/* KATA Block: Order Confirmation */
.k-oc{font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;padding:24px;background:var(--k-bg);max-width:560px;text-align:center}
.k-oc .ok{width:46px;height:46px;border-radius:50%;background:var(--k-success-bg);color:var(--k-success-ink);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.k-oc h3{font-size:18px;font-weight:650;letter-spacing:-.015em}
.k-oc .no{font-size:13px;color:var(--k-ink-2);margin-top:5px}
.k-oc .no b{color:var(--k-ink);font-variant-numeric:tabular-nums}
.k-oc-items{text-align:left;border-top:1px solid var(--k-line);margin-top:18px;padding-top:6px}
.k-oc-items .r{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--k-line)}
.k-oc-items .r span{color:var(--k-ink-2)}
.k-oc-items .t{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;padding-top:11px}
.k-oc-eta{margin-top:16px;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:11px;padding:12px 14px;font-size:13px;text-align:left}
.k-oc-eta b{font-weight:650}
.k-oc-actions{display:flex;gap:9px;justify-content:center;margin-top:18px;flex-wrap:wrap}

Installation

CLI

node kata-ui.mjs add order-confirmation

Writes the block’s CSS into your project. Everything it is built from comes with it. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet, with the CSS of everything listed under “Built from” above.
  3. Copy the HTML where it belongs.

Usage

Pairs with the Checkout template, one screen later. The confirmation number is set big enough to screenshot, the delivery estimate is a range with the honest end emphasized, and the primary action is tracking — not another upsell. Send the same content by email; a confirmation that only exists in a tab is a rumor.

Previous
Logo Cloud