Fetch authenticated billing portal link!

Author: jahooma

common/src/types/subscription.ts

@@ -52,6 +52,7 @@ export interface ActiveSubscriptionResponse {
   subscription: SubscriptionInfo
   rateLimit: SubscriptionRateLimit
   limits: SubscriptionLimits
+  billingPortalUrl?: string
 }
 
 /**

web/src/app/api/user/subscription/route.ts

@@ -4,6 +4,8 @@ import {
   getSubscriptionLimits,
 } from '@codebuff/billing'
 import { SUBSCRIPTION_DISPLAY_NAME } from '@codebuff/common/constants/subscription-plans'
+import { env } from '@codebuff/internal/env'
+import { stripeServer } from '@codebuff/internal/util/stripe'
 import { NextResponse } from 'next/server'
 import { getServerSession } from 'next-auth'
 
@@ -29,9 +31,23 @@ export async function GET() {
     return NextResponse.json(response)
   }
 
-  const [rateLimit, limits] = await Promise.all([
+  const stripeCustomerId = session.user.stripe_customer_id
+
+  const [rateLimit, limits, billingPortalUrl] = await Promise.all([
     checkRateLimit({ userId, subscription, logger }),
     getSubscriptionLimits({ userId, logger, tier: subscription.tier }),
+    stripeCustomerId
+      ? stripeServer.billingPortal.sessions
+          .create({
+            customer: stripeCustomerId,
+            return_url: `${env.NEXT_PUBLIC_CODEBUFF_APP_URL}/profile`,
+          })
+          .then((portalSession) => portalSession.url)
+          .catch((error) => {
+            logger.warn({ userId, error }, 'Failed to create billing portal session')
+            return undefined
+          })
+      : Promise.resolve(undefined),
   ])
 
   const response: ActiveSubscriptionResponse = {
@@ -58,6 +74,7 @@ export async function GET() {
       weeklyPercentUsed: rateLimit.weeklyPercentUsed,
     },
     limits,
+    billingPortalUrl,
   }
   return NextResponse.json(response)
 }

web/src/app/profile/components/subscription-section.tsx

@@ -48,7 +48,8 @@ function ProgressBar({ percentAvailable, label }: { percentAvailable: number; la
 function SubscriptionActive({ data, email }: { data: ActiveSubscriptionResponse; email: string }) {
   const { subscription, rateLimit } = data
   const isCanceling = subscription.cancelAtPeriodEnd
-  const billingPortalUrl = `${env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL}?prefilled_email=${encodeURIComponent(email)}`
+  const fallbackPortalUrl = `${env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL}?prefilled_email=${encodeURIComponent(email)}`
+  const billingPortalUrl = data.billingPortalUrl ?? fallbackPortalUrl
 
   return (
     <Card className="max-w-xl">
@@ -155,8 +156,7 @@ function SubscriptionCta() {
               Upgrade to {SUBSCRIPTION_DISPLAY_NAME}
             </h3>
             <p className="text-sm text-muted-foreground">
-              From $100/mo · Work in focused 5-hour sessions with no
-              interruptions.
+              From $100/mo · Save credits with 5-hour work sessions included
             </p>
           </div>
         </div>