Purpose
Manage invoices, payment methods, wallet top-ups, balance notifications, and ledger history from a single Console hub.
Console path: Billing in the main sidebar.
Prerequisites
- Signed in to the Console with an organization linked to your account
- Organization registered in the billing platform (see error states below if not linked)
Billing hub layout
The Billing page uses horizontal pill tabs. Default tab: My invoices.
| Tab | Icon | Label | What you do |
|---|---|---|---|
invoices | FileText | My invoices | Recent invoices preview, export, pay |
payment-methods | CreditCard | Payment methods | Saved cards for top-up and auto top-up |
top-up | Wallet | Top up account | Quick top-up; Continue to payment → Top up |
notifications | Bell | Notifications | Low balance email alerts |
ledger | Wallet | Wallet | Ledger preview; View all activity → Wallet & activity |
Dedicated routes (My invoices, Wallet, etc.) use back links instead of this tab strip.
Organization summary
Organization info card (top of hub):
| Element | Copy |
|---|---|
| Billing type | Prepaid, Postpaid, or Credit limit badge |
| Balance | Your account balance is €{amount} |
Billing profile cards
Two cards link to Organization for editable fields:
Billing email
| Element | Copy |
|---|---|
| Value | Billing email (falls back to contact email) |
| Help | Invoices and billing notifications are sent here. |
| Edit | Pencil → Edit billing email |
Billing address
| Element | Copy |
|---|---|
| Populated | Address lines; company name line uppercase bold when set |
| Empty title | No billing address on file |
| Empty help | Add your company address for invoices and account records. |
| Edit | Edit billing address or Add billing address |
Use Organization to set the billing email and address shown on these cards. Billing email, billing address, and read-only billing terms are managed on Organization. In Console, profile cards link to Edit billing email and Edit billing address.
Sidebar wallet widget
When wallet data is available, the main sidebar shows:
| Element | Copy |
|---|---|
| Label | Wallet balance |
| Amount | {balance} {currency} |
| Link | Top up balance → Top up (tooltip: Top up balance) |
Global low balance banner
Shown below the header on all app pages when balance is below the organization minimum:
| Element | Copy |
|---|---|
| Title | Low wallet balance |
| Description | Your organization balance is {current}, which is below the minimum required balance of {minimum}. Top up your wallet to avoid service interruptions. |
| Button | Top up wallet → Top up |
Unlinked organization error states
When your organization is not registered in the billing platform:
| Surface | Copy |
|---|---|
| Hub alert title | Organization not linked |
| Hub alert body | Your organization is not registered in the billing platform yet. Contact [email protected]. |
| Hub tabs | Billing profile cards hidden |
| Notifications tab | Notifications are unavailable until your organization is linked to billing. |
| Payment methods tab | Link your organization to billing before saving payment methods. |
| Top up tab | Link your organization to billing before topping up. |
| Other billing routes | Redirect to Billing with flash toast (see catalog below) |
Billing types
| Console value | Label |
|---|---|
prepaid | Prepaid |
postpaid | Postpaid |
credit_limit | Credit limit |
Shown on the billing hub organization summary, wallet overview badge, and the read-only Billing card on Organization.
Invoice status badges
| Display | Condition | Badge tone |
|---|---|---|
| Overdue | pending and due date before today | Red / destructive |
| Paid | Status paid | Green |
| Pending | Status pending, not overdue | Amber |
| Void / Cancelled | Matching status | Muted |
| Other | Title-cased from snake_case | Muted default |
Flash toast catalog
Success toasts from flash.status (Sonner, 5 seconds):
| Message | Trigger |
|---|---|
| Billing is not available for your session. | Unlinked org opens My invoices |
| Invoice not found. | Invalid invoice ID |
| This invoice cannot be paid by card. | Pay page blocked |
| Wallet activity is not available until your organization is linked. | Unlinked org opens wallet |
| Transaction not found. | Invalid transaction ID |
| Export is not available until your organization is linked. | Wallet export when unlinked |
| Invoice created. Use the bank details on the invoice to pay. | Bank transfer top-up success |
| Auto top-up saved. | Auto top-up form save |
| Low balance alert saved. | Notifications save |
Client-side toast catalog
| Message | Where |
|---|---|
| Exported {n} invoice(s) as Excel (.xls). | Hub or invoices list export |
| Exported {n} invoice(s) as CSV. | Hub or invoices list export |
| No invoices to export on this page. | Invoices export when empty |
Steps
-
Open Billing from the sidebar.
-
Review billing type and balance in the organization summary.
-
Confirm billing email and address on the profile cards — edit on Organization if needed.
-
Choose a tab: invoices, payment methods, top-up, notifications, or wallet preview.
-
Use Top up balance in the sidebar for quick access to the top-up flow.