Subscription Cancellation Patterns

Cancel Summary

A static cancellation summary shows Team plan, Cancel renewal action, August 15, 2026 access, and Review only status.

Program

Cancellation summaries should show the plan, action, and access date before any subscription change.

cancel_plan_summary.html
Visuals: captured from real browser rendering
<section class="cancel-summary" aria-labelledby="cancel-summary-title"><h2 id="cancel-summary-title">Cancel plan summary</h2><dl>
  <div><dt>Plan</dt><dd>Team</dd></div>
  <div><dt>Action</dt><dd>Cancel renewal</dd></div><div><dt>Access until</dt><dd>August 15, 2026</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Review only</span></dd></div></dl>
  <p class="check">Learner check: the cancellation action is visible before any subscription changes.</p>
  <p class="note">Static cancel summary only; no subscription mutation, billing service, entitlement change, payment service, account lookup, storage, route, API, network, script, form submit, analytics, timers, or live cancellation runs.</p></section>
<style>
  .cancel-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .cancel-summary dl { display: grid; gap: 8px; margin: 0; }
  .cancel-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .cancel-summary dt { color: #475569; }
  .cancel-summary dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the cancel summary.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show plan row.

    The plan is exact pinned data.
    The plan is exact pinned data.

  3. Show action and access date.

    The action and access date are exact pinned data.
    The action and access date are exact pinned data.

  4. Render review-only status.

    The status badge says this is review only.
    The status badge says this is review only.

  5. Check cancel readback.

    The check says the cancellation action is visible before any subscription changes.
    The check says the cancellation action is visible before any subscription changes.

  6. Check cancel honesty.

    Plan, action, access date, status, and no live cancellation.
    Plan, action, access date, status, and no live cancellation.
step flow step(1) labels the source, step(2) shows the plan, step(3) shows action and access date, step(4) shows review-only status, step(5) checks the cancellation readback, and step(6) checks the honesty note.
cancel readback The section heading names the cancel plan summary surface.
cancel rows Plan, Action, Access until, and Status values are exact pinned data.
no live cancellation The lesson should not imply subscription mutations, billing services, entitlement changes, payment services, account lookups, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live cancellations.