Refund Method Preview - Everyday Interface Patterns

A static refund method preview shows OR-1842, Visa 4242 refund method, $48.00 amount, and Preview only status.

Program

Refund method previews should show where money would return before any payment or refund service runs.

refund_method_preview.html

Visuals: captured from real browser rendering

<section class="refund-preview" aria-labelledby="refund-preview-title"><h2 id="refund-preview-title">Refund method preview</h2><dl>
  <div><dt>Order</dt><dd>OR-1842</dd></div>
  <div><dt>Refund method</dt><dd>Visa 4242</dd></div><div><dt>Amount</dt><dd>$48.00</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Preview only</span></dd></div></dl>
  <p class="check">Learner check: the refund preview is visible before any payment operation.</p>
  <p class="note">Static refund method preview only; no payment processor, refund API, billing service, order mutation, storage, route, API, network, script, event listener, form submit, analytics, timer, or live refund runs.</p></section>
<style>
  .refund-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .refund-preview dl { display: grid; gap: 8px; margin: 0; }
  .refund-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .refund-preview dt { color: #475569; }
  .refund-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the refund preview.
The section is labelled by its visible heading.
Show order row.
The order id is exact pinned data.
Show refund method and amount rows.
The refund method and amount are exact pinned data.
Render preview-only status.
The status badge says this is preview only.
Check refund readback.
The check says the refund preview is visible before any payment operation.
Check refund honesty.
Order, refund method, amount, status, and no live refund.

step flow step(1) labels the source, step(2) shows the order id, step(3) shows refund method and amount rows, step(4) shows preview-only status, step(5) checks the refund readback, and step(6) checks the honesty note.

refund readback The section heading names the refund method preview surface.

refund rows Order, Refund method, Amount, and Status values are exact pinned data.

no live refund The lesson should not imply payment processors, refund APIs, billing services, order mutations, storage, routes, APIs, networks, scripts, event listeners, form submits, analytics, timers, or live refunds.