Default success

DefaultSuccess is the terminal screen. The SDK chooses between the saved and cancelled title/description automatically based on the outcome; you provide the copy via savedTitle, cancelledTitle, etc. on the step config. Fork it when the success or cancellation screen needs more than a checkmark — a confetti animation, a next-action prompt, a calendar invite for re-subscription.

default component

Welcome back.

Your 20% discount is applied. You'll see it on your next invoice.

The full source

Copy this file into your project. It's the same file the showcase preview above renders from.

components/MySuccess.tsxtsx

import type { SuccessStepProps } from '../../core/types'
import { cn } from '../../core/utils'
import { RichText } from '../rich-text'
import { Checkmark } from './shared'

export function DefaultSuccess({ title, description, onClose, classNames }: SuccessStepProps) {
  return (
    <div className={cn('ck-step ck-step-success', classNames?.root)}>
      <div className={cn('ck-success-icon', classNames?.icon)}>
        <Checkmark color="currentColor" size={26} />
      </div>

      <h2 className={cn('ck-step-title', classNames?.title)}>{title}</h2>
      {description && <RichText html={description} className={cn('ck-step-description', classNames?.description)} />}

      <div className="ck-success-actions">
        <button type="button" className={cn('ck-button ck-button-primary', classNames?.closeButton)} onClick={onClose}>
          Done
        </button>
      </div>
    </div>
  )
}

Wire it into a flow

Drop the file into your codebase and reference it from the appropriate prop on <CancelFlow>.

CancelButton.tsxtsx

// The SDK uses DefaultSuccess automatically on the terminal step.
// Copy the source into your own component to fork it from this baseline.

import { CancelFlow } from '@churnkey/react'
import { MySuccess } from './components/MySuccess'

<CancelFlow
  steps={[
    { type: 'survey', reasons: [/* ... */] },
    {
      type: 'confirm',
      title: 'Cancel your subscription?',
      confirmLabel: 'Yes, cancel',
      goBackLabel: 'Keep my subscription',
    },
    {
      type: 'success',
      savedTitle: 'Welcome back.',
      cancelledTitle: 'Your subscription is cancelled.',
    },
  ]}
  components={{ Success: MySuccess }}
  handleCancel={async () => myBilling.cancel()}
/>