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

@@ -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
 

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,
           });

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