An open-source cancel flow for React.
Survey, offers, feedback, and confirmation in one component. Customize the look or replace any piece. 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.
Eight step types + custom step / offer types. Headless hook. Themable via CSS variables, classNames, 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. Drop-off funnel showing which step loses customers.
<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 from your connected billing provider. 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. Cooldowns and eligibility rules. Per-offer opt-out: define a handler to keep that offer type in your code. 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 | |||
| Drop-off funnel — which step loses customers | |||
| Test mode for staging traffic | |||
| Level 03 · + session + billing provider | |||
| Boosted revenue (revenue saved) | |||
| No-Code Editor for flow edits without a deploy | |||
| A/B tests on offer order and copy | |||
| Segments by plan, tenure, MRR, metadata | |||
| Cooldowns and eligibility rules | |||
| Per-offer opt-out via handlers | |||
| + Intelligence tier (paid add-on) | |||
| Adaptive Offers (AI-optimized offer selection) | |||
| Feedback AI (sentiment and themes) | |||
| Automatic AI Translations | |||
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.