# Cancel Subscription Card
URL: /docs/components/cancel-subscription/cancel-subscription-card

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.

***

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">
    ```tsx title="src/components/cancel-subscription-card-demo.tsx"
    "use client";

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

    export function CancelSubscriptionCardDemo() {
      return (
        <div className="flex w-full flex-col">
          <CancelSubscriptionCard
            title="We're sorry to see you go..."
            description={`Before you cancel, we hope you'll consider upgrading to a ${plans[1].title} plan again.`}
            plan={plans[1]}
            leftPanelImageUrl="https://framerusercontent.com/images/GWE8vop9hubsuh3uWWn0vyuxEg.webp"
            warningTitle="You will lose access to your account"
            warningText="If you cancel your subscription, you will lose access to your account and all your data will be deleted."
            keepButtonText={`Keep My ${plans[1].title} Plan`}
            continueButtonText="Continue with Cancellation"
            finalTitle="Final Step - Confirm Cancellation"
            finalSubtitle="This action will immediately cancel your subscription"
            finalWarningText="You'll lose access to all Pro features and your data will be permanently deleted after 30 days."
            goBackButtonText="Wait, Go Back"
            confirmButtonText="Yes, Cancel My Subscription"
            onCancel={async (planId) => {
              console.log("Cancelling subscription for plan:", planId);
              return new Promise((resolve) => {
                setTimeout(() => {
                  resolve(void 0);
                }, 1000);
              });
            }}
            onKeepSubscription={async (planId) => {
              console.log("Keeping subscription for plan:", planId);
            }}
            className="max-w-4xl"
          />
        </div>
      );
    }

    ```
  </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

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

```tsx
<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](/docs/theming) page.

## Example

```tsx title="src/components/cancel-subscription-card-demo.tsx"
"use client";

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

export function CancelSubscriptionCardDemo() {
  return (
    <div className="flex w-full flex-col">
      <CancelSubscriptionCard
        title="We're sorry to see you go..."
        description={`Before you cancel, we hope you'll consider upgrading to a ${plans[1].title} plan again.`}
        plan={plans[1]}
        leftPanelImageUrl="https://framerusercontent.com/images/GWE8vop9hubsuh3uWWn0vyuxEg.webp"
        warningTitle="You will lose access to your account"
        warningText="If you cancel your subscription, you will lose access to your account and all your data will be deleted."
        keepButtonText={`Keep My ${plans[1].title} Plan`}
        continueButtonText="Continue with Cancellation"
        finalTitle="Final Step - Confirm Cancellation"
        finalSubtitle="This action will immediately cancel your subscription"
        finalWarningText="You'll lose access to all Pro features and your data will be permanently deleted after 30 days."
        goBackButtonText="Wait, Go Back"
        confirmButtonText="Yes, Cancel My Subscription"
        onCancel={async (planId) => {
          console.log("Cancelling subscription for plan:", planId);
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(void 0);
            }, 1000);
          });
        }}
        onKeepSubscription={async (planId) => {
          console.log("Keeping subscription for plan:", planId);
        }}
        className="max-w-4xl"
      />
    </div>
  );
}

```