User Settings
Display the billing dashboard UI for users to manage their subscriptions and billing information.
The BillingPage
component provides a complete billing dashboard for users to manage their subscriptions, view invoices, and update billing information.
Billing Dashboard
import { BillingPage } from '@kit/billing/ui/billing-page';
import { billingConfig } from '~/config/billing.config';
export default async function BillingSettings() {
return <BillingPage config={billingConfig} />;
}
Features:
- Subscription management
- Customer information form
- Invoice history
- Test mode notice
- Responsive design
Dashboard Sections
1. Subscriptions
The subscriptions section allows users to:
- View active subscriptions
- See subscription details and status
- Manage subscription plans
- Upgrade/downgrade subscriptions
2. Customer Information
The customer form enables users to:
- Update billing details
- Modify company information
- Change billing email
- Update address information
3. Invoices
The invoice table provides:
- List of all invoices
- Download options
- Payment status
- Invoice details
Components
The billing dashboard is composed of several components that you can also use independently:
import {
BillingCustomerForm,
BillingInvoiceTable,
BillingSubscriptionSelector,
SubscriptionPlanDetails,
} from '@kit/billing/ui';
Example: Subscription Selector
<BillingSubscriptionSelector config={billingConfig} products={products} />
Example: Invoice Table
<BillingInvoiceTable
invoices={invoices}
numberAfterComma={billingConfig.numberAfterComma ?? 2}
/>
Example: Customer Form
<BillingCustomerForm customer={customer} config={billingConfig} />
Test Mode
When in test mode, the dashboard displays a notice to users indicating that they're working with test data. This helps prevent confusion between test and live environments.
How to implement the billing feature in an existing application.
Display pricing plans that are synced with your billing provider configuration.
How is this guide?
Last updated on 10/17/2025