Decline Notice - Everyday Interface Patterns

A static payment decline notice shows Card ending 4242, Payment declined, Try another method, and Not charged status.

Program

Payment decline notices should name the problem and next step while making it clear that no charge happened.

payment_decline_notice.html

Visuals: captured from real browser rendering

<section class="decline-notice" aria-labelledby="decline-notice-title"><h2 id="decline-notice-title">Payment decline notice</h2><dl>
  <div><dt>Payment method</dt><dd>Card ending 4242</dd></div>
  <div><dt>Problem</dt><dd>Payment declined</dd></div><div><dt>Next step</dt><dd>Try another method</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Not charged</span></dd></div></dl>
  <p class="check">Learner check: the decline and next step are visible without charging the card.</p>
  <p class="note">Static decline notice only; no payment processor, card charge, bank lookup, retry service, receipt, storage, route, API, network, script, form submit, analytics, timers, or live payment runs.</p></section>
<style>
  .decline-notice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .decline-notice dl { display: grid; gap: 8px; margin: 0; }
  .decline-notice dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .decline-notice dt { color: #475569; }
  .decline-notice dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the decline notice.
The section is labelled by its visible heading.
Show payment method.
The payment method is exact pinned data.
Show problem and next step.
The problem and next step are exact pinned data.
Render not-charged status.
The status badge says the card was not charged.
Check decline readback.
The check says the decline and next step are visible without charging the card.
Check decline honesty.
Method, problem, next step, status, and no live payment.

step flow step(1) labels the source, step(2) shows the payment method, step(3) shows problem and next step, step(4) shows not-charged status, step(5) checks the decline readback, and step(6) checks the honesty note.

decline readback The section heading names the payment decline notice surface.

decline rows Payment method, Problem, Next step, and Status values are exact pinned data.

no live payment The lesson should not imply payment processors, card charges, bank lookups, retry services, receipts, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live payment.