║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Cancel Subscription Card description: The Cancel Subscription Card component provides a comprehensive and user-friendly interface for handling subscription cancellations. It features a two-step confirmation process, loading states, error handling, and full customization options.

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none"> <Tab value="Preview" className="border-none bg-transparent p-0 mt-3"> <PreviewComponents registryName="cancel-subscription-card"> <CancelSubscriptionCardDemo /> </PreviewComponents> </Tab>

<Tab value="Code" className="mt-3"> <include cwd lang="tsx" meta='title="src/components/cancel-subscription-card-demo.tsx"'>src/components/cancel-subscription-card-demo.tsx</include> </Tab> </Tabs>

Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none"> <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs"> <Tab value="npx"> bash npx shadcn@latest add @billingsdk/cancel-subscription-card </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest add @billingsdk/cancel-subscription-card </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest add @billingsdk/cancel-subscription-card </Tab> <Tab value="bun"> bash bunx shadcn@latest add @billingsdk/cancel-subscription-card </Tab> </Tabs> </Tab> <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs"> <Tab value="npx"> bash npx @billingsdk/cli add cancel-subscription-card </Tab> <Tab value="pnpm"> bash pnpm dlx @billingsdk/cli add cancel-subscription-card </Tab> <Tab value="yarn"> bash yarn dlx @billingsdk/cli add cancel-subscription-card </Tab> <Tab value="bun"> bash bunx @billingsdk/cli add cancel-subscription-card </Tab> </Tabs> </Tab> </Tabs>

Usage

import { CancelSubscriptionCard } from "@/components/billingsdk/cancel-subscription-card";
import { plans } from "@/lib/billingsdk-config";

<CancelSubscriptionCard
  title="We're sorry to see you go..."
  description="Before you cancel, let us know what we could do better."
  plan={plans[1]}
  onCancel={async (planId) => {
    // Handle cancellation
    await cancelSubscription(planId);
  }}
/>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | title | string | ✅ | Main card title | | description | string | ✅ | Card description text | | plan | Plan | ✅ | Plan object containing subscription details. The plans array in the lib/billingsdk-config.ts file. | | onCancel | (planId: string) => Promise<void> \| void | ✅ | Callback when subscription is cancelled | | leftPanelImageUrl | string | ❌ | Background image URL for left panel | | warningTitle | string | ❌ | Title for warning section | | warningText | string | ❌ | Warning message text | | keepButtonText | string | ❌ | Text for keep subscription button | | continueButtonText | string | ❌ | Text for continue cancellation button | | finalTitle | string | ❌ | Title for final confirmation step | | finalSubtitle | string | ❌ | Subtitle for final confirmation step | | finalWarningText | string | ❌ | Final warning message | | goBackButtonText | string | ❌ | Text for go back button | | confirmButtonText | string | ❌ | Text for final confirm button | | onKeepSubscription | (planId: string) => Promise<void> \| void | ❌ | Callback when user keeps subscription | | className | string | ❌ | Additional CSS classes |

Theming

The cancel subscription card component is styled using the shadcn/ui library. You can customize the colors and fonts by overriding the CSS variables. You can also get the theme from the Theming page.

Example

<include cwd lang="tsx" meta='title="src/components/cancel-subscription-card-demo.tsx"'>src/components/cancel-subscription-card-demo.tsx</include>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║