Update stripe redirect links to handle subdomains

Author: MananTank

apps/dashboard/src/@/actions/billing.ts

@@ -1,15 +1,15 @@
 "use server";
 
 import "server-only";
-import { API_SERVER_URL, getAbsoluteUrlFromPath } from "@/constants/env";
+import { API_SERVER_URL } from "@/constants/env";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 import type { ProductSKU } from "../lib/billing";
 
 export type RedirectCheckoutOptions = {
   teamSlug: string;
   sku: ProductSKU;
-  redirectPath?: string;
+  redirectUrl: string;
   metadata?: Record<string, string>;
 };
 export async function redirectToCheckout(
@@ -34,10 +34,7 @@ export async function redirectToCheckout(
       method: "POST",
       body: JSON.stringify({
         sku: options.sku,
-        redirectTo: getAbsoluteUrlFromPath(
-          options.redirectPath ||
-            `/team/${options.teamSlug}/~/settings/billing`,
-        ).toString(),
+        redirectTo: options.redirectUrl,
         metadata: options.metadata || {},
       }),
       headers: {
@@ -64,7 +61,7 @@ export async function redirectToCheckout(
 
 export type BillingPortalOptions = {
   teamSlug: string | undefined;
-  redirectPath?: string;
+  redirectUrl: string;
 };
 export async function redirectToBillingPortal(
   options: BillingPortalOptions,
@@ -86,10 +83,7 @@ export async function redirectToBillingPortal(
     {
       method: "POST",
       body: JSON.stringify({
-        redirectTo: getAbsoluteUrlFromPath(
-          options.redirectPath ||
-            `/team/${options.teamSlug}/~/settings/billing`,
-        ).toString(),
+        redirectTo: options.redirectUrl,
       }),
       headers: {
         "Content-Type": "application/json",

apps/dashboard/src/@/components/billing.tsx

@@ -8,7 +8,11 @@ import {
 } from "../actions/billing";
 import { Button, type ButtonProps } from "./ui/button";
 
-type CheckoutButtonProps = RedirectCheckoutOptions & ButtonProps;
+type CheckoutButtonProps = Omit<RedirectCheckoutOptions, "redirectUrl"> &
+  ButtonProps & {
+    redirectPath: string;
+  };
+
 export function CheckoutButton({
   onClick,
   teamSlug,
@@ -27,7 +31,7 @@ export function CheckoutButton({
           teamSlug,
           sku,
           metadata,
-          redirectPath,
+          redirectUrl: getRedirectUrl(redirectPath),
         });
       }}
     >
@@ -36,7 +40,10 @@ export function CheckoutButton({
   );
 }
 
-type BillingPortalButtonProps = BillingPortalOptions & ButtonProps;
+type BillingPortalButtonProps = Omit<BillingPortalOptions, "redirectUrl"> &
+  ButtonProps & {
+    redirectPath: string;
+  };
 export function BillingPortalButton({
   onClick,
   teamSlug,
@@ -51,11 +58,17 @@ export function BillingPortalButton({
         onClick?.(e);
         await redirectToBillingPortal({
           teamSlug,
-          redirectPath,
+          redirectUrl: getRedirectUrl(redirectPath),
         });
       }}
     >
       {children}
     </Button>
   );
 }
+
+function getRedirectUrl(path: string) {
+  const url = new URL(window.location.origin);
+  url.pathname = path;
+  return url.toString();
+}

apps/dashboard/src/@/constants/env.ts

@@ -39,10 +39,3 @@ export const BASE_URL = isProd
   : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
       ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
       : "http://localhost:3000") || "https://thirdweb-dev.com";
-
-export function getAbsoluteUrlFromPath(path: string) {
-  const url = new URL(BASE_URL);
-
-  url.pathname = path;
-  return url;
-}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx

@@ -49,7 +49,11 @@ export function PlanInfoCard(props: {
 
         <div className="flex flex-row gap-2">
           {/* manage team billing */}
-          <BillingPortalButton teamSlug={team.slug} variant="outline">
+          <BillingPortalButton
+            teamSlug={team.slug}
+            variant="outline"
+            redirectPath={`/team/${team.slug}/~/settings/billing`}
+          >
             Manage Billing
           </BillingPortalButton>