Features

Billing

Subscriptions, checkout, invoices, and wallet flows with @kit/billing.

What It Does

Billing is configured with parseBillingConfig, exposed through UI/filter integration, and processed server-side via billing webhook handlers.

When To Use

You need paid plans, subscriptions, or wallet top-ups.

Prerequisites

Billing provider account (Stripe or Lemon Squeezy).
Billing config file in app.

Operational Note

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

How To Use

Configure billing

apps/dashboard/config/billing.config.ts

export { billingConfig } from './billing.config.stripe';

apps/dashboard/config/billing.config.stripe.ts

import { parseBillingConfig } from '@kit/billing';
 
export const billingConfig = parseBillingConfig({
  provider: 'stripe',
  currency: 'USD',
  attachedTable: 'user',
  checkoutUI: 'hosted',
  products: [
    { id: 'prod_xxx', features: ['Feature A'] },
  ],
});

Client integration

useBillingFilters({ billingConfig }) is called in app filters.
Billing settings page is injected into settings UI through billing filter package.

Filter API

Billing uses filters for UI injection, package translations, and organization billing entity registration.

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`
`server_get_billing_entities`	`{}`	`Record<string, new (db: AppClient) => AbstractBillingEntity>`	`kit/organization/src/www/filters/server-filters.ts`	`apps/dashboard/lib/init-server-filters.ts` (`initOrgServerFilters`)	`server`

Init Checklist

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

MCP Context


capability: billing_core
entrypoints:
  - apps/dashboard/config/billing.config*.ts
  - kit/billing/core/src/www/filters/use-filters.ts
  - kit/billing/core/src/www/filters/use-filters/use-settings-filters.tsx
  - kit/billing/core/src/www/filters/cross-env-filters.ts
  - kit/organization/src/www/filters/server-filters.ts
  - apps/dashboard/hooks/use-filters.ts
  - apps/dashboard/lib/init-cross-env-filters.ts
  - apps/dashboard/lib/init-server-filters.ts
  - kit/billing/types/src/create-billing-schema.ts
inputs:
  - provider
  - product_ids
outputs:
  - billing_ui_and_server_behavior
constraints:
  - product IDs must exist in selected provider dashboard
side_effects:
  - creates checkout sessions and subscription lifecycle events

Agent Recipe

Define billing config with real provider product IDs.
Initialize billing filters in app hooks.
Add webhook route and verify event processing.

Troubleshooting

Empty plans usually indicate invalid product IDs or provider credentials.
Settings billing section missing means billing filters are not initialized.

Onboarding

Customize the web onboarding flow with typed schema, step configuration, and filters.

Integration

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

How is this guide?

Last updated on 3/27/2026