Let users manage their billing
Section titled “Let users manage their billing”Give users a “Manage billing” entry point to the Stripe billing portal, where they can update their payment method, view invoices, or cancel. Bridge exposes the portal as a REST endpoint: GET /account/subscription/portal returns a one-time portalUrl to redirect to.
The SDK wraps it: getBridgeAuth().getBillingPortalUrl() returns the one-time URL. It builds the request from the configured API base URL and attaches the signed-in user’s token and app ID for you, so the same code works on stage and local dev. Call it at click time — the portal session is short-lived, so don’t cache the result.
'use client';
import { getBridgeAuth } from '@nebulr-group/bridge-nextjs/client';
export function ManageBillingButton() {
async function openPortal() {
window.location.href = await getBridgeAuth().getBillingPortalUrl();
}
return <button onClick={openPortal}>Manage billing</button>;
}
Prefer this over a hand-rolled fetch: hardcoding https://api.thebridge.dev sends a stage or local app to the production API, where its app ID doesn’t exist. NEXT_PUBLIC_BRIDGE_API_BASE_URL is what points the SDK elsewhere.
Only the workspace owner may open the portal. getBridgeAuth().canManageBilling() returns whether the signed-in user qualifies — use it to hide or disable the button rather than letting the call fail.
See Subscriptions & Entitlements → Open the billing portal for the endpoint reference.
Recovering from a billing problem? You don’t need this button for that. When a workspace (called a tenant in the API) is past due, in dunning, or billing-locked,
<BridgeBillingNotice />already renders a recovery CTA (it sends the user to your billing page,/billingby default). Use this “Manage billing” button for the healthy, everyday case. See Warn about billing problems.