Widget API

// packages/widget/src/embed-api.tsx
export function showCancelFlow(config: ShowCancelFlowConfig): void

// packages/widget/src/flow-routing.ts
export type FlowOutcome =
  | { type: 'canceled'; reasonId: ReasonId | null; feedbackText: string }
  | { type: 'kept'; reasonId: ReasonId | null; feedbackText: string }
  | { type: 'discount_accepted'; reasonId: ReasonId; feedbackText: string }
  | { type: 'pause_accepted'; durationMonths: number; reasonId: ReasonId; feedbackText: string }
  | { type: 'support_requested'; reasonId: ReasonId; feedbackText: string }
  | { type: 'uncanceled' }
  | { type: 'resumed' }
  | { type: 'trial_extended'; daysExtended: number; reasonId: ReasonId | null; feedbackText: string }
  | { type: 'plan_switched'; targetPriceId: string; reasonId: ReasonId | null; feedbackText: string }
  | { type: 'manual_cancellation_requested' }
  | { type: 'cancel_already_scheduled'; cancelAt: Date | null }
  | { type: 'dismissed' }

// app/settings/billing/cancel-button.ts
import { showCancelFlow } from '@unchurn.dev/widget';
 
showCancelFlow({
  merchantId: process.env.NEXT_PUBLIC_UNCHURN_MERCHANT_ID!,
  subscriptionId: currentUser.stripeSubscriptionId,
  mode: 'test',
  onComplete: (outcome) => {
    if (outcome.type === 'canceled') {
      router.push('/canceled');
    }
  },
});

// packages/widget/src/embed-api.tsx
export function closeCancelFlow(): void

// app/settings/billing/cancel-button.ts
import { closeCancelFlow } from '@unchurn.dev/widget';
 
closeCancelFlow();

// packages/widget/src/embed.ts
window.unchurn = {
  showCancelFlow: (config: ShowCancelFlowConfig) => void,
  closeCancelFlow: () => void,
  events: {
    on: <K extends EventKey>(event: K, handler: (data: Payloads[K]) => void) => () => void,
    EVENTS: typeof WIDGET_EVENTS,
  },
}

<!-- your-page.html -->
<script src="https://cdn.unchurn.dev/widget.js" async></script>
<script>
  window.unchurn.showCancelFlow({
    merchantId: 'mch_your_id',
    subscriptionId: 'sub_xxx',
    mode: 'test',
  });
</script>

// packages/widget/src/react.tsx
export function useUnchurn(opts: UseUnchurnOptions): UseUnchurnReturn

// app/settings/billing/cancel-button.tsx
'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 cancel flow</p>;
 
  return (
    <button disabled={!isReady} onClick={() => show()}>
      Cancel subscription
    </button>
  );
}

// packages/widget/src/nextjs.ts
export function createUnchurnHandler(
  opts: CreateUnchurnHandlerOptions,
): (req: NextRequestLike) => Promise<Response>

// app/api/unchurn/token/route.ts
import { createUnchurnHandler } from '@unchurn.dev/widget/nextjs';
import { auth } from '@clerk/nextjs/server';
import { db } from '@/lib/db';
 
export const POST = createUnchurnHandler({
  secret: process.env.UNCHURN_SECRET!,
  merchantId: process.env.UNCHURN_MERCHANT_ID!,
  resolveUser: async (req) => {
    const { userId } = await auth();
    if (!userId) return null;
    const user = await db.user.findUnique({
      where: { clerkId: userId },
      select: { stripeSubscriptionId: true, stripeMode: true },
    });
    if (!user?.stripeSubscriptionId) return null;
    return {
      subscriptionId: user.stripeSubscriptionId,
      mode: user.stripeMode ?? 'live',
    };
  },
});

// packages/widget/src/nextjs.ts
export function signPayload(secret: string, payloadB64: string): string

// packages/widget/src/nextjs.ts
export function encodePayload(params: {
  merchantId: string;
  subscriptionId: string;
  mode: 'test' | 'live';
  expMs: number;
}): string

// packages/widget/src/nextjs.ts
export function verifyAuthToken(
  token: string,
  secret: string,
): { merchantId: string; subscriptionId: string; mode: 'test' | 'live'; expMs: number } | null

// scripts/debug-token.ts
import { verifyAuthToken } from '@unchurn.dev/widget/nextjs';
 
const claims = verifyAuthToken(token, process.env.UNCHURN_SECRET!);
if (!claims) {
  console.log('Token invalid or expired');
} else {
  console.log(claims.merchantId, claims.subscriptionId, claims.mode, new Date(claims.expMs));
}

// packages/widget/src/nextjs.ts
export function splitTokenPrefix(
  token: string,
): { prefixMode: 'test' | 'live'; body: string } | null