Widget API

export const DEFAULT_WIDGET_SCRIPT_URL = 'https://cdn.unchurn.dev/widget.js'

export function createUnchurn(options: CreateUnchurnOptions): UnchurnClient

export type UnchurnClient = {
  preload: () => Promise<void>
  open: (options?: WidgetOpenOptions) => Promise<void>
  close: () => Promise<void>
  abort: () => void
}

import { createUnchurn } from '@unchurn.dev/widget'
 
const unchurn = createUnchurn({ tokenEndpoint: '/api/unchurn/token' })
 
document.querySelector('#cancel-button')?.addEventListener('click', () => {
  void unchurn.open({
    onComplete(outcome) {
      if (outcome.type === 'canceled') window.location.reload()
    },
  })
})

export type WidgetAppearanceConfig = {
  theme?: 'auto' | 'light' | 'dark'
  variables?: WidgetAppearanceVariables
  light?: { variables?: WidgetAppearanceVariables }
  dark?: { variables?: WidgetAppearanceVariables }
}
 
export type WidgetAppearanceVariables = {
  colorCanvas?: string
  colorText?: string
  colorTextMuted?: string
  colorTextFaint?: string
  colorBorder?: string
  colorBorderStrong?: string
  colorWell?: string
  colorWellStrong?: string
  colorPrimary?: string
  colorPrimaryForeground?: string
  colorPrimaryHover?: string
  colorPrimaryActive?: string
  colorPrimaryMuted?: string
  colorSecondary?: string
  colorSecondaryForeground?: string
  colorRing?: string
  colorDanger?: string
  colorDangerForeground?: string
  colorSuccess?: string
  borderRadius?: string
  fontFamily?: string
}

import { UnchurnTrigger } from '@unchurn.dev/widget/react'
 
<UnchurnTrigger tokenEndpoint="/api/unchurn/token">
  Cancel subscription
</UnchurnTrigger>

import { UnchurnTrigger } from '@unchurn.dev/widget/react'
 
<UnchurnTrigger tokenEndpoint="/api/unchurn/token" asChild>
  <button className="danger">Cancel subscription</button>
</UnchurnTrigger>

export function useUnchurn(opts: UseUnchurnOptions): UseUnchurnReturn

export type UseUnchurnReturn = {
  show: (options?: WidgetOpenOptions) => Promise<void>
  close: () => void
  isReady: boolean
  /**
   * True between a `show()` call and its resolution — token fetch +
   * runtime load + widget mount. Disable your trigger while true.
   * Concurrent show() calls share a single transition.
   */
  isOpening: boolean
  error: Error | null
}

'use client'
 
import { useUnchurn } from '@unchurn.dev/widget/react'
 
export function CancelButton() {
  const { show, isReady, error } = useUnchurn({
    tokenEndpoint: '/api/unchurn/token',
  })
 
  if (error) return <p>Unable to load cancellation options.</p>
 
  return (
    <button disabled={!isReady} onClick={() => void show()}>
      Cancel subscription
    </button>
  )
}

export function createUnchurnHandler(
  opts: CreateUnchurnHandlerOptions,
): (req: Request) => Promise<Response>

export type UnchurnUserContext = {
  subscriptionId: string
  mode?: 'test' | 'live'
}

export type UnchurnTokenResponse = {
  authToken: string
  expiresAt: string
  merchantId: string
  subscriptionId: string
  mode: 'test' | 'live'
}

import { createUnchurnHandler } from '@unchurn.dev/widget/server'
import { getCurrentUser } from '@/lib/auth'
 
export const POST = createUnchurnHandler({
  secret: process.env.UNCHURN_SECRET!,
  merchantId: process.env.UNCHURN_MERCHANT_ID!,
  resolveUser: async (req) => {
    const user = await getCurrentUser(req)
    if (!user?.stripeSubscriptionId) return null
    return {
      subscriptionId: user.stripeSubscriptionId,
      mode: process.env.NODE_ENV === 'production' ? 'live' : 'test',
    }
  },
})

export function mintUnchurnToken(opts: MintUnchurnTokenOptions): UnchurnTokenResponse

// Express
import { mintUnchurnToken } from '@unchurn.dev/widget/server'
 
router.post('/api/unchurn/token', async (req, res) => {
  const user = req.session?.user
  if (!user?.stripeSubscriptionId) return res.status(401).end()
  const token = mintUnchurnToken({
    secret: process.env.UNCHURN_SECRET!,
    merchantId: process.env.UNCHURN_MERCHANT_ID!,
    subscriptionId: user.stripeSubscriptionId,
  })
  res.json(token)
})

export function encodePayload(params: {
  merchantId: string
  subscriptionId: string
  mode: 'test' | 'live'
  expMs: number
}): string
 
export function signPayload(secret: string, payloadB64: string): string
 
export function verifyAuthToken(
  token: string,
  secret: string,
): { merchantId: string; subscriptionId: string; mode: 'test' | 'live'; expMs: number } | null
 
export function splitTokenPrefix(
  token: string,
): { prefixMode: 'test' | 'live'; body: string } | null

window.unchurn = {
  // Accepts either { tokenEndpoint, ...flowOpts } (runtime fetches the token)
  // or the pre-minted-token shape { merchantId, subscriptionId, mode, authToken, ...flowOpts }.
  open: (options: UnchurnOpenOptions) => Promise<void>,
  close: () => void,
  events: {
    on: <K extends EventKey>(event: K, handler: (data: Payloads[K]) => void) => () => void,
    EVENTS: typeof WIDGET_EVENTS,
  },
}

export type FlowOutcome =
  | { type: 'canceled'; reasonId: ReasonId | null; feedbackText: string; followUpAnswerId?: string }
  | { type: 'kept'; reasonId: ReasonId | null; feedbackText: string; followUpAnswerId?: string }
  | { type: 'discount_accepted'; reasonId: ReasonId | null; feedbackText: string; followUpAnswerId?: string }
  | { type: 'pause_accepted'; durationMonths: number; reasonId: ReasonId | null; feedbackText: string; followUpAnswerId?: string }
  | { type: 'uncanceled' }
  | { type: 'resumed' }
  | { type: 'trial_extended'; daysExtended: number; reasonId: ReasonId | null; feedbackText: string; followUpAnswerId?: string }
  | { type: 'plan_switched'; targetPriceId: string; targetPlanName: string; reasonId: ReasonId | null; feedbackText: string; followUpAnswerId?: string }
  | { type: 'manual_cancellation_requested' }
  | { type: 'cancel_already_scheduled'; cancelAt: Date | null }
  | { type: 'dismissed' }