FeaturesBilling

User Settings

Billing account, invoices, and subscriptions inside settings.

What It Does

Billing settings UI is injected into settings pages and rendered through BillingPage with TRPC-backed data.

When To Use

Users need to view subscriptions, invoices, and billing profile details.

Prerequisites

Billing filters enabled.
Settings page architecture enabled.

Operational Note

Validate credentials, secrets, and runtime environment values before promoting changes to production.

How To Use

Billing integration in filters injects a billing settings page via get_settings_ui_config filter.

Main UI component:

import { BillingPage } from '@kit/billing/ui';

The component requires:

config (BillingConfig)
clientTrpc for billingRouter

Filter API

The billing settings tab is entirely filter-driven and appears only when billing filters are mounted.

Filter	Parameters	Return	Registered By (package file)	Initialized In (app entrypoint)	Environment
`get_settings_ui_config`	`{ clientTrpc: TrpcClientWithQuery<Router<unknown>> }`	`ReturnType<typeof parseUISettingConfig>`	`kit/billing/core/src/www/filters/use-filters/use-settings-filters.tsx`	`apps/dashboard/hooks/use-filters.ts` (`useBillingFilters`)	`client`
`cross_env_get_translations`	`{ language: string; namespace: string }`	`Record<string, string> \| null`	`kit/billing/core/src/www/filters/cross-env-filters.ts`	`apps/dashboard/lib/init-cross-env-filters.ts`	`cross-env`
`cross_env_get_namespaces`	`{}`	`string[]`	`kit/billing/core/src/www/filters/cross-env-filters.ts`	`apps/dashboard/lib/init-cross-env-filters.ts`	`cross-env`

Init Checklist

Keep useBillingFilters({ billingConfig }) in apps/dashboard/hooks/use-filters.ts.
Keep initBillingFilters() in apps/dashboard/lib/init-cross-env-filters.ts.

MCP Context


capability: billing_settings_ui
entrypoints:
  - kit/billing/core/src/www/filters/use-filters/use-settings-filters.tsx
  - kit/billing/core/src/www/filters/cross-env-filters.ts
  - apps/dashboard/hooks/use-filters.ts
  - apps/dashboard/lib/init-cross-env-filters.ts
  - kit/billing/core/src/react/billing-page.tsx
inputs:
  - billing_config
  - client_trpc
outputs:
  - subscriptions_customer_invoices_ui
constraints:
  - user must be authenticated
side_effects:
  - subscription changes and billing profile updates

Agent Recipe

Ensure billing filters are mounted.
Open settings path where billing page is injected.
Validate subscription/customer/invoice sections load.

Troubleshooting

If billing tab is missing, confirm filter execution order.
If data is pending forever, inspect billing router network calls.

Integration

End-to-end billing integration checklist for web apps.

Pricing

Pricing UI components and server helpers from @kit/billing.

How is this guide?

Last updated on 3/27/2026