shadcn.io is not affiliated with official shadcn/ui
Cancel Retention Billing Block for Svelte
A cancel flow in three steps: a reason picker, an offer that matches it (half off for three months, or a pause), and a last page with the exact end date, each step taking focus and every outcome ending on a confirmation.
Installation
Overview
Handle cancellations honestly and keep the customers you can, with this cancel flow for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds Steps: Reason, Offer and Confirm. The first asks why they're leaving as choice cards in a Radio Group, with an optional Textarea. The second makes an offer that answers the reason: half off for three months, with the saving and the day the full price returns, or a one-month pause. The third states the day access ends, the final charge and how long their data is kept, with Back, "Keep my membership" and the cancel button. Every way out ends on a confirmation: discount applied, paused, staying, or cancelled with an "Undo cancellation" button. Each step's heading takes focus when you move. For subscription apps, fitness and learning products and media services.
FAQ
How do I fill it from my billing provider?
ACCOUNT at the top of the file holds the plan name, its monthly price in cents and paidThrough, the last day of what's paid for, as an ISO date. DISCOUNT holds the offer's percent and months. REASONS lists the choices, each with the offer it leads to, discount or pause. The reduced price, the saving and the day the full price returns are worked out from these, in whole cents. OUTCOMES holds the text of each ending. Wire the buttons that finish the flow to your discount, pause and cancel calls in finish.
How is the offer chosen?
By the reason. Price, a missing feature and switching to another app lead to the discount; not using it enough and taking a break lead to the pause. Change the offer of any reason in REASONS, or add a third offer type by adding a branch to the offer step. The offer never blocks the way out: "No thanks, continue" goes straight to the last step, and Back returns to change the reason.
How does focus work between steps?
Nothing takes focus on load. After the person moves, with Continue, Back, a step in the list or one of the finishing buttons, focus goes to the new heading and a polite live region says "Step 2 of 3: Offer" or the outcome's title. The heading is focusable by script only, so it isn't an extra tab stop. The step list is a single tab stop with arrow keys, and steps ahead of the furthest one reached are disabled.
Can a cancellation be undone?
Yes, from the confirmation: "Undo cancellation" replaces the outcome with "You're staying", moves focus to its heading, and tells you the next payment and its date. Wire it to your call that removes the scheduled cancellation. The flow itself never deletes anything: the last step says access runs to the paid-through date and that data is kept for 90 days.
Where do the links go?
"Keep my plan" on the first step and "Back to billing" on the confirmations are links to your billing settings. Only one button is the primary at a time: Continue on the first step, the Shine Button offer on the second, and the cancel button on the third.
What does a screen reader hear?
The section starts with an h2 and each step is an h3. The reasons are a radio group named by the step's heading, and arrow keys move between them without advancing, since only Continue does. The textarea has its own label and is optional. The dates sit in time elements inside description lists, so each is read with its label.