customer-portal

Self-Service Customer Billing Portal

Build a complete customer-facing billing portal with Razorpay. Unlike Stripe, Razorpay has no built-in customer portal — you build each piece yourself.

Covers: billing status, payment history, cancel/reactivate, invoice download, and payment method update.

1. Billing Status API Route

Returns the current subscription state for display on the billing page.

// app/api/billing/status/route.ts
import { razorpay } from "@/lib/razorpay";

export async function GET(request: Request) {
  const user = await getAuthenticatedUser(request);
  if (!user) return new Response("Unauthorized", { status: 401 });

  try {
    const subscription = await getActiveSubscriptionByUserId(user.id);
    if (!subscription) {
      return Response.json({ active: false, subscription: null });
    }

    // Fetch fresh details from Razorpay (cache this — plan details rarely change)
    const rzpSub = await razorpay.subscriptions.fetch(
      subscription.razorpaySubscriptionId
    );

    // Fetch plan details for display name and amount
    const plan = await razorpay.plans.fetch(rzpSub.plan_id);

    // Fetch recent payments for this subscription
    const payments = await db
      .select()
      .from(paymentsTable)
      .where(eq(paymentsTable.subscriptionId, subscription.id))
      .orderBy(desc(paymentsTable.createdAt))
      .limit(5);

    // Fetch pending invoices if any
    let pendingInvoices: any[] = [];
    try {
      const invoices = await razorpay.invoices.all({
        subscription_id: subscription.razorpaySubscriptionId,
        status: "issued",
      });
      pendingInvoices = invoices.items || [];
    } catch {
      // Invoices endpoint may not return results for all subscriptions
    }

    return Response.json({
      active: ["active", "authenticated"].includes(rzpSub.status),
      subscription: {
        planName: plan.item.name,
        status: rzpSub.status,
        // current_period_end is Unix seconds — convert for display
        nextBillingDate: rzpSub.current_end
          ? new Date(rzpSub.current_end * 1000).toISOString()
          : null,
        amountPaise: plan.item.amount,
        currency: plan.item.currency,
        cancelledAt: rzpSub.ended_at
          ? new Date(rzpSub.ended_at * 1000).toISOString()
          : null,
      },
      recentPayments: payments,
      pendingInvoices: pendingInvoices.map((inv: any) => ({
        id: inv.id,
        amountPaise: inv.amount,
        status: inv.status,
        shortUrl: inv.short_url,
        issuedAt: inv.issued_at
          ? new Date(inv.issued_at * 1000).toISOString()
          : null,
      })),
    });
  } catch (error) {
    console.error("Failed to fetch billing status:", error);
    return Response.json({ error: "Something went wrong" }, { status: 500 });
  }
}