From 2a7e92a99cc2889b0565b48156a2d893a16a9c7e Mon Sep 17 00:00:00 2001
From: Julian Sigmund <58262143+pixelmund@users.noreply.github.com>
Date: Mon, 1 Sep 2025 19:53:55 +0200
Subject: [PATCH] fix: add optional subscriptionId prop for checkout link 
 (#17)

* feat: add optional subscriptionId prop for checkout link and upgrade functionality

* fix: move subscriptionId prop to the correct position in createCheckoutSession parameters
---
 README.md           | 1 +
 src/client/index.ts | 5 +++++
 src/react/index.tsx | 5 ++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 02efa07..6730525 100644
--- a/README.md
+++ b/README.md
@@ -410,6 +410,7 @@ Props:
 - `children`: React children (button content)
 - `embed`: (Optional) Whether to embed the checkout link. Defaults to `true`.
 - `className`: (Optional) CSS class name
+- `subscriptionId`: (Optional) ID of a subscription to upgrade. It must be on a free pricing.
 
 #### CustomerPortalLink
 
diff --git a/src/client/index.ts b/src/client/index.ts
index 8fb7ef6..a1701a5 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -104,12 +104,14 @@ export class Polar<
       email,
       origin,
       successUrl,
+      subscriptionId
     }: {
       productIds: string[];
       userId: string;
       email: string;
       origin: string;
       successUrl: string;
+      subscriptionId?: string;
     }
   ): Promise<Checkout> {
     const dbCustomer = await ctx.runQuery(
@@ -141,6 +143,7 @@ export class Polar<
     const checkout = await checkoutsCreate(this.polar, {
       allowDiscountCodes: true,
       customerId,
+      subscriptionId,
       embedOrigin: origin,
       successUrl,
       ...(productIds.length === 1
@@ -306,6 +309,7 @@ export class Polar<
           productIds: v.array(v.string()),
           origin: v.string(),
           successUrl: v.string(),
+          subscriptionId: v.optional(v.string())
         },
         returns: v.object({
           url: v.string(),
@@ -316,6 +320,7 @@ export class Polar<
             productIds: args.productIds,
             userId,
             email,
+            subscriptionId: args.subscriptionId,
             origin: args.origin,
             successUrl: args.successUrl,
           });
diff --git a/src/react/index.tsx b/src/react/index.tsx
index 06c5322..259395b 100644
--- a/src/react/index.tsx
+++ b/src/react/index.tsx
@@ -39,11 +39,13 @@ export const CheckoutLink = ({
   productIds,
   children,
   className,
+  subscriptionId,
   theme = "dark",
   embed = true,
 }: PropsWithChildren<{
   polarApi: Pick<PolarComponentApi, "generateCheckoutLink">;
   productIds: string[];
+  subscriptionId?: string;
   className?: string;
   theme?: "dark" | "light";
   embed?: boolean;
@@ -57,10 +59,11 @@ export const CheckoutLink = ({
     }
     void generateCheckoutLink({
       productIds,
+      subscriptionId,
       origin: window.location.origin,
       successUrl: window.location.href,
     }).then(({ url }) => setCheckoutLink(url));
-  }, [productIds]);
+  }, [productIds, subscriptionId]);
 
   return (
     <a