Cancel-path demo
Cancelling is a button, not a maze
3 steps, one of them optional, and a list of the five retention tricks this flow cannot contain because they are not in the code. Walk it below: the cancel button sits on the billing page, the reason is skippable, and undo is called Resume rather than hidden behind a support request.
Local demo state — there is no subscription to cancel
No payment processor is wired into this build. Nothing here can charge a card, store a receipt or email an invoice — every paid surface below is a working demo of the flow, and the prices are this site's own plan copy.
Walk the cancel flow
Billing settings
Plan: Pro, $19/month. Renews on the 1st. That is the whole page — the cancel control is not hidden below a scroll or behind “manage subscription”.
One button on the billing page. No form, no phone call, no chat queue.
Three radio options and a text box. Skippable, and a skip is recorded as a skip rather than a zero.
Access runs to the end of the paid period, and the page prints that date in words, not as a countdown.
This whole flow is local state. The real thing needs a payment processor to stop a renewal — until that exists, the page can only demonstrate that the shape of the flow is honest.
| After the cancel click | What actually happens |
|---|---|
| Library access | Never changes. The 289 components are MIT and do not live behind the subscription. |
| Saved theme kits | Stay in your browser and stay exportable to CSS. Nothing is locked on the way out. |
| Paid surfaces | Stop renewing at the end of the period. API keys (if they existed) would be revoked on that date, not immediately. |
| Your data | Exports are available on the billing page for the length of the period. Nothing is deleted on cancel. |
| Winning you back | One email at the end of the period, and no dark pattern between you and the door. |
Dark patterns this flow refuses
- ×A hidden cancel link — the button is on the same page as the plan change.
- ×A retention call, chat prompt or "are you sure" chain of three screens.
- ×An offer that appears only after the cancel click, priced differently from the public plan.
- ×A countdown timer on the offer, or a pre-ticked "keep my plan" box.
- ×Making you type a reason. Three optional radios, and one of them is "no longer needed".
Checklists like this are usually marketing. This one is a build constraint: the flow demo above cannot contain any of these steps, because there are none of them in the code.