Manage Subscription | Billing SDK

The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.

Current Subscription

Manage your billing and subscription settings

Pro Plan

$20/monthactive

For companies adding collaboration in production.

Billing Information

Next billing date

January 15, 2025

Payment method

Credit Card

Current Plan Features

Presence

Comments

Notifications

Text Editor

Sync Datastore

src/components/subscription-management-demo.tsx

"use client";

import { SubscriptionManagement } from "@/components/billingsdk/subscription-management";
import { type CurrentPlan, plans } from "@/lib/billingsdk-config";

export function SubscriptionManagementDemo() {
  const currentPlan: CurrentPlan = {
    plan: plans[1],
    type: "monthly",
    price: "$121",
    nextBillingDate: "January 15, 2025",
    paymentMethod: "Credit Card",
    status: "active",
  };
  return (
    <div className="flex flex-1 flex-col justify-center text-center">
      <SubscriptionManagement
        className="mx-auto max-w-2xl"
        currentPlan={currentPlan}
        updatePlan={{
          currentPlan: currentPlan.plan,
          plans: plans,
          onPlanChange: (planId) => {
            console.log("update plan", planId);
          },
          triggerText: "Update Plan",
        }}
        cancelSubscription={{
          title: "Cancel Subscription",
          description: "Are you sure you want to cancel your subscription?",
          leftPanelImageUrl:
            "https://img.freepik.com/free-vector/abstract-paper-cut-shape-wave-background_474888-4649.jpg?semt=ais_hybrid&w=740&q=80",
          plan: currentPlan.plan,
          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.",
          onCancel: async (planId) => {
            console.log("cancel subscription", planId);
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve(void 0);
              }, 1000);
            });
          },
          onKeepSubscription: async (planId) => {
            console.log("keep subscription", planId);
          },
        }}
      />
    </div>
  );
}

See also: Invoice History
See also: Payment Success Dialog

Installation

npx shadcn@latest add @billingsdk/subscription-management

pnpm dlx shadcn@latest add @billingsdk/subscription-management

yarn dlx shadcn@latest add @billingsdk/subscription-management

bunx shadcn@latest add @billingsdk/subscription-management

npx @billingsdk/cli add subscription-management

pnpm dlx @billingsdk/cli add subscription-management

yarn dlx @billingsdk/cli add subscription-management

bunx @billingsdk/cli add subscription-management

Usage

import { SubscriptionManagement } from "@/components/billingsdk/subscription-management";
import { type CurrentPlan, plans } from "@/lib/billingsdk-config";

const currentPlan: CurrentPlan = {
  plan: plans[1],
  type: 'monthly',
  price: '$121',
  nextBillingDate: 'January 15, 2025',
  paymentMethod: 'Credit Card',
  status: 'active'
};

<SubscriptionManagement
  className="max-w-2xl mx-auto"
  currentPlan={currentPlan}
  updatePlan={{
    currentPlan: currentPlan.plan,
    plans: plans,
    onPlanChange: (planId) => { console.log('update plan', planId) },
    triggerText: 'Update Plan'
  }}
  cancelSubscription={{
    title: 'Cancel Subscription',
    description: 'Are you sure you want to cancel your subscription?',
    plan: currentPlan.plan,
    onCancel: async (planId) => {
      // Handle cancellation
      await cancelSubscription(planId);
    },
  }}
/>

Props

Prop	Type	Required	Description
`className`	`string`	❌	Additional CSS classes for styling
`currentPlan`	`CurrentPlan`	✅	Object containing current subscription details
`cancelSubscription`	`CancelSubscriptionDialogProps`	✅	Props for the cancel subscription dialog
`updatePlan`	`UpdatePlanDialogProps`	✅	Props for the update plan dialog

CurrentPlan Interface

Refer to the CurrentPlan Interface for more details.

interface CurrentPlan {
  plan: Plan;
  type: 'monthly' | 'yearly' | 'custom';
  price: string;
  nextBillingDate: string;
  paymentMethod: string;
  status: 'active' | 'inactive' | 'cancelled' | 'past_due';
}

Theming

The subscription management 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