feat(billing): Stripe Checkout + Customer Portal + signed webhook
Some checks failed
Deploy to Production / deploy (push) Failing after 46s
Some checks failed
Deploy to Production / deploy (push) Failing after 46s
- @bmm/api: stripe@22 SDK, plan-aware price-id lookup, Redis-backed event
idempotency (7d TTL covers Stripe's retry window), startup warning when
STRIPE_PRICE_* env vars contain product ids (prod_) by mistake
- routes/billing.ts:
POST /v1/billing/checkout-session → Stripe-hosted Checkout, SEPA+card,
auto-VAT via Stripe Tax, tax_id
collection for B2B, address required
POST /v1/billing/portal → Customer Portal session
GET /v1/billing/status → drives the settings/billing UI
POST /v1/billing/webhook → signed, idempotent, handles
checkout.session.completed,
subscription.{created,updated,deleted},
invoice.{paid,payment_failed}
- index.ts: rawBody-aware JSON parser so Stripe signature verify gets the
exact payload bytes
- web: /settings/billing page (status, upgrade flow, manage-billing portal,
auto-checkout when arriving with ?tier=… from the pricing CTAs), pricing
page CTAs point to /settings/billing?tier=…
- Payment-failure path: suspend org only after 3rd failed attempt (Stripe
Smart Retries handles the soft-retries). Suspended orgs keep their running
servers but cannot create new ones (enforcement is in /v1/servers POST as
a follow-up).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
305
apps/web/app/(dashboard)/settings/billing/page.tsx
Normal file
305
apps/web/app/(dashboard)/settings/billing/page.tsx
Normal file
@@ -0,0 +1,305 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Suspense, useCallback, useEffect, useState } from 'react';
|
||||
|
||||
type Plan = 'hobby' | 'pro' | 'team' | 'enterprise';
|
||||
type Tier = 'pro_monthly' | 'pro_yearly' | 'team_monthly' | 'team_yearly';
|
||||
|
||||
interface BillingStatus {
|
||||
plan: Plan;
|
||||
hasCustomer: boolean;
|
||||
hasSubscription: boolean;
|
||||
suspended: boolean;
|
||||
suspendedReason: string | null;
|
||||
}
|
||||
|
||||
const PLAN_LABEL: Record<Plan, string> = {
|
||||
hobby: 'Hobby (free)',
|
||||
pro: 'Pro',
|
||||
team: 'Team',
|
||||
enterprise: 'Enterprise',
|
||||
};
|
||||
|
||||
function BillingInner() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const justSubscribed = searchParams.get('success') === 'true';
|
||||
const cancelledCheckout = searchParams.get('cancelled') === 'true';
|
||||
const autoUpgradeTier = searchParams.get('tier') as Tier | null;
|
||||
|
||||
const [status, setStatus] = useState<BillingStatus | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
|
||||
const loadStatus = useCallback(() => {
|
||||
apiFetch<BillingStatus>('/v1/billing/status')
|
||||
.then(setStatus)
|
||||
.catch((e) => {
|
||||
const err = e as { status?: number };
|
||||
if (err.status === 401) router.push('/login?returnTo=/settings/billing');
|
||||
else setError((e as Error).message);
|
||||
});
|
||||
}, [router]);
|
||||
|
||||
useEffect(() => {
|
||||
loadStatus();
|
||||
}, [loadStatus]);
|
||||
|
||||
// Came back from Stripe Checkout? Poll briefly — the webhook usually arrives
|
||||
// within a couple seconds and flips the plan.
|
||||
useEffect(() => {
|
||||
if (!justSubscribed) return;
|
||||
let tries = 0;
|
||||
const id = setInterval(() => {
|
||||
tries += 1;
|
||||
loadStatus();
|
||||
if (tries >= 6) clearInterval(id);
|
||||
}, 1500);
|
||||
return () => clearInterval(id);
|
||||
}, [justSubscribed, loadStatus]);
|
||||
|
||||
const startCheckout = useCallback(
|
||||
async (tier: Tier) => {
|
||||
setBusy(tier);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await apiFetch<{ url: string }>('/v1/billing/checkout-session', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ tier }),
|
||||
});
|
||||
window.location.href = res.url;
|
||||
} catch (e) {
|
||||
setBusy(null);
|
||||
const detail = (e as { detail?: { detail?: string; error?: string } }).detail;
|
||||
setError(detail?.detail ?? detail?.error ?? (e as Error).message);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Auto-fire checkout when the user lands here from the pricing page CTA.
|
||||
useEffect(() => {
|
||||
if (!autoUpgradeTier || !status) return;
|
||||
if (status.hasSubscription) return; // already paying — don't redirect
|
||||
void startCheckout(autoUpgradeTier);
|
||||
}, [autoUpgradeTier, status, startCheckout]);
|
||||
|
||||
async function openPortal() {
|
||||
setBusy('portal');
|
||||
setError(null);
|
||||
try {
|
||||
const res = await apiFetch<{ url: string }>('/v1/billing/portal', {
|
||||
method: 'POST',
|
||||
body: '{}',
|
||||
});
|
||||
window.location.href = res.url;
|
||||
} catch (e) {
|
||||
setBusy(null);
|
||||
const detail = (e as { detail?: { detail?: string; error?: string } }).detail;
|
||||
setError(detail?.detail ?? detail?.error ?? (e as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
if (!status && !error) {
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl px-6 py-12 text-center">
|
||||
<Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
|
||||
<p className="mt-3 text-[13px] text-[--color-fg-muted]">Loading billing…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl px-6 py-10">
|
||||
<div>
|
||||
<h1 className="text-[22px] font-semibold tracking-tight">Billing</h1>
|
||||
<p className="mt-1 text-[13px] text-[--color-fg-muted]">
|
||||
Manage your subscription, payment method, and invoices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{cancelledCheckout && (
|
||||
<div className="mt-4 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-3.5 py-2.5 text-[12.5px]">
|
||||
Checkout cancelled. No charge made.
|
||||
</div>
|
||||
)}
|
||||
{justSubscribed && (
|
||||
<div className="mt-4 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3.5 py-2.5 text-[12.5px]">
|
||||
Subscription active. Plan will update within a few seconds — refreshing…
|
||||
</div>
|
||||
)}
|
||||
{status?.suspended && (
|
||||
<div className="mt-4 rounded-md border border-amber-500/40 bg-amber-500/10 px-3.5 py-2.5 text-[12.5px]">
|
||||
<strong>Subscription paused</strong> — {status.suspendedReason ?? 'payment issue'}.
|
||||
Update your payment method below to restore access. Existing servers keep running.
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="mt-4 rounded-md border border-[--color-danger]/40 bg-[--color-danger]/10 px-3.5 py-2.5 text-[12.5px] text-[--color-fg]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status && (
|
||||
<div className="panel mt-6 p-5">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<div>
|
||||
<div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
|
||||
Current plan
|
||||
</div>
|
||||
<div className="mt-1 text-[20px] font-semibold tracking-tight">
|
||||
{PLAN_LABEL[status.plan]}
|
||||
</div>
|
||||
</div>
|
||||
{status.hasSubscription && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
onClick={openPortal}
|
||||
disabled={busy === 'portal'}
|
||||
>
|
||||
{busy === 'portal' ? 'Opening…' : 'Manage billing'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{!status.hasSubscription && (
|
||||
<p className="mt-3 text-[12.5px] text-[--color-fg-muted]">
|
||||
You're on the free tier. Upgrade below to unlock more servers, faster Claude
|
||||
analysis and higher daily limits.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status && !status.hasSubscription && (
|
||||
<>
|
||||
<h2 className="mt-10 text-[15px] font-semibold tracking-tight">Choose a plan</h2>
|
||||
<div className="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<TierCard
|
||||
name="Pro"
|
||||
monthly={49}
|
||||
yearly={490}
|
||||
features={['5 MCP servers', '1M tool calls / mo', 'Custom domain', 'Claude Haiku 4.5']}
|
||||
busy={busy}
|
||||
onSubscribe={startCheckout}
|
||||
monthlyTier="pro_monthly"
|
||||
yearlyTier="pro_yearly"
|
||||
highlight
|
||||
/>
|
||||
<TierCard
|
||||
name="Team"
|
||||
monthly={199}
|
||||
yearly={1990}
|
||||
features={[
|
||||
'25 MCP servers',
|
||||
'10M tool calls / mo',
|
||||
'RBAC + audit log',
|
||||
'Claude Sonnet 4.6',
|
||||
]}
|
||||
busy={busy}
|
||||
onSubscribe={startCheckout}
|
||||
monthlyTier="team_monthly"
|
||||
yearlyTier="team_yearly"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-4 text-[12px] text-[--color-fg-subtle]">
|
||||
Annual saves 2 months. VAT calculated automatically based on your billing address. Cancel
|
||||
any time from the billing portal — service continues until end of period.
|
||||
</p>
|
||||
<p className="mt-2 text-[12px] text-[--color-fg-subtle]">
|
||||
Need Enterprise (BYOC, SSO, EU-data-residency)?{' '}
|
||||
<a
|
||||
className="text-[--color-accent] hover:underline"
|
||||
href="mailto:sales@buildmymcpserver.com"
|
||||
>
|
||||
Contact sales
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mt-10 text-[12px] text-[--color-fg-subtle]">
|
||||
<Link href="/pricing" className="hover:text-[--color-fg]">
|
||||
← Compare all plans
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TierCard({
|
||||
name,
|
||||
monthly,
|
||||
yearly,
|
||||
features,
|
||||
busy,
|
||||
onSubscribe,
|
||||
monthlyTier,
|
||||
yearlyTier,
|
||||
highlight,
|
||||
}: {
|
||||
name: string;
|
||||
monthly: number;
|
||||
yearly: number;
|
||||
features: string[];
|
||||
busy: string | null;
|
||||
onSubscribe: (tier: Tier) => void;
|
||||
monthlyTier: Tier;
|
||||
yearlyTier: Tier;
|
||||
highlight?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`panel flex h-full flex-col p-4 ${highlight ? 'border-[--color-accent]/40' : ''}`}
|
||||
>
|
||||
<div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{name}</div>
|
||||
<div className="mt-1 flex items-baseline gap-1">
|
||||
<span className="text-[24px] font-semibold tracking-tight">€{monthly}</span>
|
||||
<span className="text-[12px] text-[--color-fg-subtle]">/ month</span>
|
||||
</div>
|
||||
<ul className="mt-3 space-y-1 text-[12.5px] text-[--color-fg-muted]">
|
||||
{features.map((f) => (
|
||||
<li key={f}>— {f}</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-4 flex flex-col gap-2">
|
||||
<Button
|
||||
variant={highlight ? 'primary' : 'secondary'}
|
||||
size="md"
|
||||
onClick={() => onSubscribe(monthlyTier)}
|
||||
disabled={Boolean(busy)}
|
||||
>
|
||||
{busy === monthlyTier ? 'Redirecting…' : `Subscribe — €${monthly}/mo`}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="md"
|
||||
onClick={() => onSubscribe(yearlyTier)}
|
||||
disabled={Boolean(busy)}
|
||||
>
|
||||
{busy === yearlyTier ? 'Redirecting…' : `Or €${yearly}/year — 2 months free`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BillingPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="mx-auto max-w-3xl px-6 py-12 text-center">
|
||||
<Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<BillingInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -42,7 +42,7 @@ const TIERS = [
|
||||
'Email support, 1 business-day SLA',
|
||||
],
|
||||
cta: 'Start Pro',
|
||||
href: '/login',
|
||||
href: '/settings/billing?tier=pro_monthly',
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
@@ -61,7 +61,7 @@ const TIERS = [
|
||||
'Shared Slack channel support',
|
||||
],
|
||||
cta: 'Start Team',
|
||||
href: '/login',
|
||||
href: '/settings/billing?tier=team_monthly',
|
||||
},
|
||||
{
|
||||
name: 'Enterprise',
|
||||
|
||||
Reference in New Issue
Block a user