Blocks / Commerce

Billing Settings

Workspace billing management: current plan, credit balance, credit bundle purchase, and the Stripe billing portal, shaped server-side by role (member/admin/owner).

$pnpm exec shadcn add @intelligo/billing-settings

Run it inside an app made by intelligo create. Anywhere else, name the registry and install the base first.

Loading preview…
about this block

Workspace billing management: current plan, credit balance, credit bundle purchase, and the Stripe billing portal, shaped server-side by role (member/admin/owner). Requires the pricing item (provides lib/billing.ts and actions/billing.ts); install it first. Other ways to buy a credit bundle render under its button from the lib/credit-bundle-config.tsx seam, which can also hide the card button (the payment-poll item's LocalPaymentButton binds there).

yours to edit
  • lib/credit-bundle-config.tsx

messages/en/billing-settings.json

Everything else is used verbatim; a deployment varies through these files and translations.How seams work →

requires
built from

alert, button, card, skeleton, page-header, stat-card, animated-list

npm packages it adds

@intelligo-dev/auth · @intelligo-dev/billing · lucide-react · next-intl

what shadcn add writes · 7 files
Routes
  • app/[locale]/(app)/settings/billing/page.tsx
  • app/[locale]/(app)/settings/billing/loading.tsx
  • app/[locale]/(app)/settings/billing/error.tsx
Components
  • components/billing/portal-button.tsx
  • components/billing/credit-bundles.tsx
Actions, config and messages
  • messages/en/billing-settings.json
  • lib/credit-bundle-config.tsx

Ready to try it? Three commands and the app runs against a stub model.