FeaturesBilling
PreviousNext

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 is this guide?

Last updated on 10/17/2025