Add change subscription API and frontend integration

Author: Bharani0012

src/backend/base/langflow/api/v1/billing.py

@@ -16,11 +16,10 @@
 from langflow.services.paddle.provisioning import get_paddle_prices
 from langflow.services.paddle.subscriptions import (
     cancel_subscription,
+    change_subscription,
     ensure_paddle_customer_for_user,
     fetch_active_subscription,
-    get_subscriptions_by_customer_id,
     has_active_subscription,
-    pick_active_subscription,
     retry_with_backoff,
 )
 
@@ -30,6 +29,11 @@
 class EnsurePaddleCustomerRequest(BaseModel):
     email: str | None = None
 
+class ChangeSubscriptionRequest(BaseModel):
+    price_id: str
+    quantity: int = 1
+    is_upgrade: bool
+
 @router.post("/ensure-paddle-customer")
 async def ensure_paddle_customer(
     current_user: CurrentActiveUser,
@@ -138,8 +142,13 @@ async def get_subscriptions_by_customer(
     if not customer_id:
         raise HTTPException(status_code=400, detail="Missing paddle_customer_id")
 
-    subscriptions = await get_subscriptions_by_customer_id(customer_id=customer_id)
-    active_sub_id = pick_active_subscription(subscriptions, org_id=org_id)
+    subscriptions = []
+    active_sub_id = None
+
+    try:
+        active_sub_id, subscriptions = await fetch_active_subscription(customer_id, org_id)
+    except ValueError:
+        pass
     if not active_sub_id:
         try:
             active_sub_id, subscriptions = await retry_with_backoff(
@@ -210,4 +219,56 @@ async def cancel_subscription_api(
         raise HTTPException(
             status_code=500,
             detail=f"Failed to cancel subscription: {str(e)}",
+        )
+
+@router.post("/change-subscription")
+async def change_subscription_api(
+    body: ChangeSubscriptionRequest,
+    current_user: CurrentActiveUser,
+) -> dict:
+    """Change subscription (Starter -> Pro)"""
+
+    logger.info(f"Change subscription API called by user {current_user.id}")
+
+    if not get_settings_service().auth_settings.CLERK_AUTH_ENABLED:
+        raise HTTPException(status_code=400, detail="Clerk auth not enabled")
+
+    # 1️⃣ Get subscription_id from Clerk metadata
+    subscription_id = await get_paddle_subscription_id_from_clerk_payload()
+
+    if not subscription_id:
+        raise HTTPException(status_code=400, detail="Missing paddle_subscription_id")
+
+    logger.info(
+        f"Upgrade request for subscription {subscription_id} "
+        f"to price {body.price_id}"
+    )
+
+    try:
+        result = await change_subscription(
+            subscription_id=subscription_id,
+            new_price_id=body.price_id,
+            quantity=body.quantity,
+            is_upgrade=body.is_upgrade,
+        )
+
+        logger.info(
+            f"Successfully changed subscription {subscription_id} "
+            f"to price {body.price_id}, status: {result.get('status')}"
+        )
+
+        return {
+            "success": True,
+            "message": "Subscription changed successfully",
+            **result,
+        }
+
+    except Exception as e:
+        logger.info(
+            f"Failed to upgrade subscription {subscription_id} "
+            f"for user {current_user.id}: {str(e)}"
+        )
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to upgrade subscription: {str(e)}",
         )

src/backend/base/langflow/services/paddle/subscriptions.py

@@ -11,8 +11,10 @@
 from paddle_billing import Client  #noqa: TCH002
 from paddle_billing.Entities.Shared import CustomData
 from paddle_billing.Resources.Customers.Operations import CreateCustomer, UpdateCustomer
-from paddle_billing.Resources.Subscriptions.Operations import ListSubscriptions, CancelSubscription
-from paddle_billing.Entities.Subscriptions import SubscriptionEffectiveFrom
+from paddle_billing.Resources.Subscriptions.Operations import ListSubscriptions, CancelSubscription, UpdateSubscription
+from paddle_billing.Entities.Subscriptions import SubscriptionEffectiveFrom, SubscriptionProrationBillingMode
+from paddle_billing.Resources.Subscriptions.Operations.Update import SubscriptionUpdateItem
+
 
 from langflow.services.auth.clerk_metadata_constants import (
     ORGANISATION_CREATED_BY_KEY,
@@ -510,4 +512,57 @@ async def cancel_subscription(
 
     except Exception as e:
         logger.exception(f"Error cancelling subscription {subscription_id}: {e}")
-        raise
+        raise
+
+async def change_subscription(
+    *,
+    subscription_id: str,
+    new_price_id: str,
+    quantity: int = 1,
+    is_upgrade: bool,
+    client: Client | None = None,
+):
+    paddle_client = client or get_paddle_client()
+
+    subscription = await asyncio.to_thread(
+        paddle_client.subscriptions.get,
+        subscription_id,
+    )
+
+    status = str(getattr(subscription, "status", "")).lower()
+
+    if is_upgrade:
+        if status == "trialing":
+            proration_mode = SubscriptionProrationBillingMode.DoNotBill
+        else:
+            proration_mode = SubscriptionProrationBillingMode.ProratedImmediately
+    else:
+        proration_mode = SubscriptionProrationBillingMode.DoNotBill
+
+    plan_key = "pro_pack_monthly" if is_upgrade else "starter_pack_monthly"
+
+    operation = UpdateSubscription(
+        items=[
+            SubscriptionUpdateItem(
+                price_id=new_price_id,
+                quantity=quantity,
+            )
+        ],
+        proration_billing_mode=proration_mode,
+        custom_data=CustomData({
+            "plan_key": plan_key,
+        }),
+    )
+
+    updated = await asyncio.to_thread(
+        paddle_client.subscriptions.update,
+        subscription_id,
+        operation,
+    )
+
+    return {
+        "subscription_id": subscription_id,
+        "status": getattr(updated, "status", None),
+        "price_id": new_price_id,
+        "proration_mode": str(proration_mode),
+    }

src/frontend/src/controllers/API/helpers/constants.ts

@@ -35,6 +35,7 @@ export const URLs = {
   GET_PADDLE_PRICES: `billing/paddle-prices`,
   GET_PADDLE_SUBSCRIPTION: `billing/get-subscriptions`,
   CANCEL_PADDLE_SUBSCRIPTION: `billing/cancel-subscription`,
+  CHANGE_SUBSCRIPTION: `billing/change-subscription`,
 } as const;
 
 // IMPORTANT: FOLDERS endpoint now points to 'projects' for backward compatibility

src/frontend/src/pages/SettingsPage/pages/PricingPlansPage/index.tsx

@@ -28,13 +28,25 @@ type BillingAccessResponse = {
   cancel_scheduled?: boolean;
 };
 
+type PaddlePricesResponse = Record<string, string>;
+
 const PLAN_NAME_BY_KEY = Object.fromEntries(
   (planConfigData.plans ?? []).map((plan) => [
     String(plan?.paddle?.plan_key ?? "").toLowerCase(),
     String(plan?.name ?? "").trim(),
   ]),
 ) as Record<string, string>;
 
+const PRO_PLAN_KEY = (
+  planConfigData.plans?.find((plan) => plan?.key === "pro")?.paddle?.plan_key ??
+  "pro_pack_monthly"
+).toLowerCase();
+
+const STARTER_PLAN_KEY = (
+  planConfigData.plans?.find((plan) => plan?.key === "starter")?.paddle?.plan_key ??
+  "starter_pack_monthly"
+).toLowerCase();
+
 function formatPlanKey(planKey: string): string {
   return planKey
     .replace(/[_-]+/g, " ")
@@ -80,6 +92,11 @@ export default function PricingPlansPage() {
 
   const [cancelError, setCancelError] = useState<string | null>(null);
   const [alreadyCancelled, setAlreadyCancelled] = useState(false);
+  const [upgradeLoading, setUpgradeLoading] = useState(false);
+  const [upgradeError, setUpgradeError] = useState<string | null>(null);
+  const [upgradeSuccess, setUpgradeSuccess] = useState<string | null>(null);
+
+  const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
 
   const formattedNextBillingDate = useMemo(() => {
     const nextDateRaw = billing?.next_billed_at ?? billing?.current_period_end;
@@ -108,6 +125,14 @@ export default function PricingPlansPage() {
     !isCancelScheduled &&
     !alreadyCancelled;
 
+  const currentPlanKey = (billing?.subscription_plan_key ?? "").toLowerCase();
+  const isProPlan = currentPlanKey === PRO_PLAN_KEY;
+
+  const canChangeSubscription =
+    Boolean(billing?.paddle_subscription_id) &&
+    !isCancelledState &&
+    !isCancelScheduled;
+
   useEffect(() => {
     if (!IS_CLERK_AUTH) {
       setLoading(false);
@@ -212,6 +237,58 @@ export default function PricingPlansPage() {
     }
   };
 
+  const handleChangeSubscription = async () => {
+    setUpgradeLoading(true);
+    setUpgradeError(null);
+    setUpgradeSuccess(null);
+
+    try {
+      const token = await getToken();
+      if (!token) throw new Error("Missing auth token");
+
+      const { data: priceData } = await api.get<PaddlePricesResponse>(
+        getURL("GET_PADDLE_PRICES"),
+        { headers: { Authorization: `Bearer ${token}` } },
+      );
+
+      const targetPlanKey = isProPlan ? STARTER_PLAN_KEY : PRO_PLAN_KEY;
+      const targetPriceId = priceData?.[targetPlanKey];
+
+      if (!targetPriceId) {
+        throw new Error("Unable to find target price ID");
+      }
+
+      await api.post(
+        getURL("CHANGE_SUBSCRIPTION"),
+        {
+          price_id: targetPriceId,
+          quantity: 1,
+          is_upgrade: !isProPlan,
+        },
+        { headers: { Authorization: `Bearer ${token}` } },
+      );
+
+      const res = await api.get(getURL("BILLING_ACCESS"), {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      setBilling(res.data ?? null);
+      setUpgradeSuccess(
+        isProPlan
+          ? "Subscription will be downgraded at next billing cycle."
+          : "Subscription upgraded successfully.",
+      );
+    } catch (error: any) {
+      const msg =
+        error?.response?.data?.detail ??
+        error?.message ??
+        "Failed to change subscription.";
+      setUpgradeError(String(msg));
+    } finally {
+      setUpgradeLoading(false);
+    }
+  };
+
   return (
     <div className="flex h-full w-full flex-col gap-6">
       <div className="flex flex-col">
@@ -245,6 +322,18 @@ export default function PricingPlansPage() {
             </div>
           )}
 
+          {upgradeError && (
+            <div className="rounded-xl border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {upgradeError}
+            </div>
+          )}
+
+          {upgradeSuccess && (
+            <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-3 text-sm text-emerald-700 dark:text-emerald-300">
+              {upgradeSuccess}
+            </div>
+          )}
+
           {alreadyCancelled && (
             <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
               You already cancelled your subscription. You still have access{" "}
@@ -261,6 +350,20 @@ export default function PricingPlansPage() {
             </Button>
           )}
 
+          {billing?.paddle_subscription_id && (
+            <Button
+              onClick={() => setUpgradeModalOpen(true)}
+              disabled={upgradeLoading}
+              className="ml-2"
+            >
+              {upgradeLoading
+                ? "Processing..."
+                : isProPlan
+                ? "Downgrade to Starter"
+                : "Upgrade to Pro"}
+            </Button>
+          )}
+
           <Dialog open={cancelModalOpen} onOpenChange={setCancelModalOpen}>
             <DialogContent>
               <DialogHeader>
@@ -282,8 +385,41 @@ export default function PricingPlansPage() {
               </DialogFooter>
             </DialogContent>
           </Dialog>
+
+          <Dialog open={upgradeModalOpen} onOpenChange={setUpgradeModalOpen}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>
+                  {isProPlan ? "Downgrade to Starter" : "Upgrade to Pro"}
+                </DialogTitle>
+                <DialogDescription>
+                  {isProPlan
+                    ? "Your plan will be downgraded at the next billing cycle."
+                    : "You will be charged a prorated amount today based on your remaining billing period."}
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <Button onClick={() => setUpgradeModalOpen(false)}>
+                  Cancel
+                </Button>
+                <Button
+                  onClick={async () => {
+                    setUpgradeModalOpen(false);
+                    await handleChangeSubscription();
+                  }}
+                  disabled={upgradeLoading}
+                >
+                  {upgradeLoading
+                    ? "Processing..."
+                    : isProPlan
+                    ? "Confirm Downgrade"
+                    : "Confirm Upgrade"}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </div>
       )}
     </div>
   );
-}
+}