An open-source cancel flow for React.
Survey, offers, feedback, and confirmation in one component. Optionally connects to Churnkey for analytics, A/B testing, and AI retention features.
import { CancelFlow } from '@churnkey/react'
import '@churnkey/react/styles.css'
<CancelFlow
steps={[
{
type: 'survey',
reasons: [
{
id: 'expensive',
label: 'Too expensive',
offer: { type: 'discount', couponId: 'SAVE20', percentOff: 20 },
},
{ id: 'not-using', label: "Not using it" },
],
},
{ type: 'feedback' },
{ type: 'confirm' },
]}
handleDiscount={async (o) => myBilling.applyCoupon(o.couponId)}
handleCancel={async () => myBilling.cancel()}
/>Three integration levels, one component.
The SDK has three integration levels: open source, analytics, and connected. Open source and analytics are free; connected requires a paid Churnkey plan (Starter or higher). Each level adds props on top of the one before.
Open source
FreeA production-ready open source cancel flow, built from years of industry expertise. Completely customizable, no Churnkey account required.
Five step types and six offer types out of the box, plus custom step and offer types. Headless hook for full UI control. Themable via CSS variables, classNames, and component overrides. MIT licensed.
<CancelFlow
steps={steps}
handleDiscount={async (o) => myBilling.applyCoupon(o.couponId)}
handleCancel={async () => myBilling.cancel()}
/>Analytics
Free with a Churnkey accountSign up for a free Churnkey account, then pass your appId and customer through props. Sessions stream to the retention dashboard.
Save rate by reason and offer. Cancel-reason trends. Test mode for staging traffic.
<CancelFlow
appId="app_xxx"
customer={{ id: 'cus_123', email: 'jane@acme.com' }}
steps={steps}
handleDiscount={async (o) => myBilling.applyCoupon(o.couponId)}
handleCancel={async () => myBilling.cancel()}
/>Connected
Paid plan — Starter and upConnect your billing provider in your Churnkey dashboard and pass a server-signed session token to the SDK. The dashboard now drives the flow, and Churnkey applies billing actions through your provider.
Boosted revenue — track what happens to customers after each offer accept. No-Code Editor for editing reasons, offers, and copy without a deploy. A/B tests on offer order and copy. Segments by plan, tenure, MRR, and metadata. Offer cooldowns. Adaptive Offers, Feedback AI, and Automatic AI Translations on the Intelligence tier.
<CancelFlow
appId="app_xxx"
session={token}
onAccept={(offer) => analytics.track('offer_accepted', offer)}
onCancel={() => router.push('/goodbye')}
/>What each level includes.
Open source no props Free | Analytics + appId, customer Free | Connected + session + provider Starter and up | |
|---|---|---|---|
| Level 01 | |||
| The cancel flow component | |||
| Custom step + offer types | |||
| Headless hook for full UI control | |||
| Themable (CSS vars, classNames, overrides) | |||
| Level 02 · + appId, customer | |||
| Save rate dashboard | |||
| Cancel-reason breakdown with trends | |||
| Test mode for staging traffic | |||
| Level 03 · + session + billing provider | |||
| Boosted revenue — track outcomes after each offer accept | |||
| No-Code Editor for flow edits without a deploy | |||
| A/B tests on offer order and copy | |||
| Segments by plan, tenure, MRR, metadata | |||
| Offer cooldowns | |||
| + Intelligence tier (paid add-on) | |||
| Adaptive Offers (AI-optimized offer selection) | |||
| Feedback AI (sentiment and themes) | |||
| Automatic AI Translations | |||
Why did we open source
our flagship product?
A competent engineer with an LLM can stand up a “good enough” cancel flow in days. If you're going to build one anyway, we'd rather you have one that's already saved over 2 million customers and get your weekend back.
The part that can't be vibe-coded is what we're here to sell. We'd rather earn that than gate the front door.
Read the full story →Read by topic.
Quickstart
Render a working cancel flow. No backend, no account.
Read →ConceptsConcepts
Steps, offers, handlers, listeners, and integration levels. The mental model in one page.
Read →ShowcaseEvery step and recipe
Every default component the SDK ships, plus a library of drop-in recipes.
Read →BuildA flow with offers
Discount, pause, plan change, trial extension. Wired end-to-end.
Read →CustomizeTheming
Color scheme, CSS variables, classNames, and component overrides.
Read →BuildHeadless
The useCancelFlow hook for full UI control. Render anything.
Read →The SDK works without an account. Add Churnkey when you need it.
No account required for the open source SDK. Sign up for a free Churnkey account to record every session and see save rates. Upgrade to a paid plan (Starter or higher) to let Churnkey apply billing actions and edit the flow in the No-Code Editor.