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.
<BillingPortalButton> is that button, ready-made. It fetches a one-time portal URL at click time and follows it, and renders only for someone who can act on it: the workspace owner, on an app with payments on, whose workspace already has a plan. The subscription page <BridgeBillingRoutes> serves at /subscription already shows it.
import { BillingPortalButton } from '@nebulr-group/bridge-react';
<BillingPortalButton /> {/* "Manage billing" */}
<BillingPortalButton label="Billing & invoices" className="my-button" />
To build your own, the SDK wraps the endpoint: 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.
import { getBridgeAuth } from '@nebulr-group/bridge-react';
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.
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 subscription page,billing.manageRoute,/subscriptionby default). Use this “Manage billing” button for the healthy, everyday case. See Warn about billing problems.