Credit Balance - Flexprice

Use Credit Balance to show a customer’s current wallet balance: credits, monetary value, and wallet status. Part of Credits Widgets.

Preview
Code

<CreditBalance
  wallet={{ id: 'wallet_1', name: 'Main Wallet', status: 'active', creditBalance: 4200, balance: 42, currency: 'USD' }}
/>

What CreditBalance supports

Credit balance and monetary value
Wallet status (active, frozen, closed)
Empty state when there is no wallet
Loading skeleton state

Where to use CreditBalance

Customer portal overview
Billing page
Account settings

Importing CreditBalance

import '@flexprice/ui/style.css';
import { CreditBalance, type CreditBalanceData } from '@flexprice/ui';

Rendering CreditBalance

const wallet: CreditBalanceData = {
  id: 'wallet_1',
  name: 'Main Wallet',
  status: 'active',
  creditBalance: 4200,
  balance: 42,
  currency: 'USD',
};

<CreditBalance wallet={wallet} />

Pass wallet={null} to render the empty state (no wallet set up yet). See Ways to provide data for SDK, API, backend, and static JSON options.

Mapping API data into CreditBalance

import { adaptCreditBalance } from '@flexprice/ui';

const wallet = adaptCreditBalance(walletFromList, realtimeWalletBalance);

realtimeWalletBalance is optional. When provided, its real-time balance fields take precedence over the wallet list snapshot.

Credits Widgets

Overview of both credits components.

Credit History

Transaction history table with pagination and multi-wallet selection.