Docs navigation

Build a basic cancel flow

The smallest cancel flow: a survey that records why the customer is leaving, a confirm step, and a handler that calls your billing API. Later guides add offers, analytics, and Churnkey-managed billing.

Before you begin

React 18 or 19.
A billing API you can call from fetch. Anything reachable over HTTP works: Stripe, Braintree, your own backend.

1. Install

npm install @churnkey/react

2. Define the steps

The steps array describes the flow. Start with a survey and a confirm step.

const steps = [
  {
    type: 'survey',
    title: 'Why are you leaving?',
    reasons: [
      { id: 'expensive',  label: 'Too expensive' },
      { id: 'not-using',  label: 'Not using it enough' },
      { id: 'missing',    label: 'Missing a feature I need' },
      { id: 'switching',  label: 'Switching to another product' },
    ],
  },
  { type: 'confirm' },
]

Reasons without an attached offer fall through to the next step. With only survey and confirm declared, picking any reason routes straight to the confirm step.

3. Render `<CancelFlow>`

import { useState } from 'react'
import { CancelFlow } from '@churnkey/react'
import '@churnkey/react/styles.css'
 
export function CancelButton() {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <button onClick={() => setOpen(true)}>Cancel subscription</button>
      {open && (
        <CancelFlow
          steps={steps}
          handleCancel={async () => {
            await fetch('/api/billing/cancel', { method: 'POST' })
          }}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  )
}

handleCancel runs when the customer confirms. The SDK awaits the promise, then transitions to success. If the promise rejects, the customer stays on the confirm step with error set and the action button re-enables so they can retry.

Next steps