Cancel Subscription Dialog

The Cancel Subscription Dialog 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.

src/components/cancel-subscription-dialog-demo.tsx

"use client";

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

export function CancelSubscriptionDialogDemo() {
    return(

      <div className="flex flex-1 flex-col justify-center text-center p-4 mx-auto min-h-[300px]">
      <CancelSubscriptionDialog
        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]}
        triggerButtonText="Cancel Subscription"
        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);
        }}
        onDialogClose={() => {
          console.log('Dialog closed');
        }}
        className="max-w-4xl"
      />
    </div>
    )
}

Installation

npx shadcn@latest add @billingsdk/cancel-subscription-dialog

pnpm dlx shadcn@latest add @billingsdk/cancel-subscription-dialog

npx shadcn@latest add @billingsdk/cancel-subscription-dialog

npx @billingsdk/cli add cancel-subscription-dialog

pnpm dlx @billingsdk/cli add cancel-subscription-dialog

npx @billingsdk/cli add cancel-subscription-dialog

Usage

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

<CancelSubscriptionDialog
  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 dialog title
`description`	`string`	✅	Dialog 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
`triggerButtonText`	`string`	❌	Text for the trigger button (default: "Cancel Subscription")
`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
`onDialogClose`	`() => void`	❌	Callback when dialog is closed
`className`	`string`	❌	Additional CSS classes

Theming

The cancel subscription dialog 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