Credit History - Flexprice

Use Credit History to show a customer’s wallet transactions: credits added, credits spent, and the reason for each. Part of Credits Widgets.

Preview
Code

const [page, setPage] = useState(1);

<CreditHistory
  transactions={transactions}
  page={page}
  pageSize={10}
  totalItems={total}
  onPageChange={setPage}
/>

What CreditHistory supports

Credit and debit transactions, with reason labels
Pending-transaction styling
Multiple wallets, with a selector shown when there is more than one
Pagination
Loading skeleton state
Empty state when there are no transactions

Where to use CreditHistory

Customer portal billing tab
Account settings
Wallet detail pages

Importing CreditHistory

import '@flexprice/ui/style.css';
import { CreditHistory, type CreditTransaction } from '@flexprice/ui';

Rendering CreditHistory

Pagination is fully controlled: the component has no dependency on a router or URL, so you own the current page in your own state and pass it back in.

const [page, setPage] = useState(1);

const transactions: CreditTransaction[] = [
  { id: 'txn_1', type: 'credit', amount: 100, creditAmount: 100, reason: 'FREE_CREDIT_GRANT', createdAt: '2026-01-01T00:00:00Z' },
  { id: 'txn_2', type: 'debit', amount: 20, creditAmount: 20, reason: 'INVOICE_PAYMENT', createdAt: '2026-01-05T00:00:00Z' },
];

<CreditHistory
  transactions={transactions}
  page={page}
  pageSize={10}
  totalItems={total}
  onPageChange={setPage}
/>

For accounts with more than one wallet, also pass wallets, selectedWalletId, and onSelectWallet:

<CreditHistory
  transactions={transactions}
  wallets={[{ id: 'wallet_1', label: 'Main Wallet' }, { id: 'wallet_2', label: 'Backup Wallet' }]}
  selectedWalletId={selectedWalletId}
  onSelectWallet={setSelectedWalletId}
  page={page}
  pageSize={10}
  totalItems={total}
  onPageChange={setPage}
/>

See Ways to provide data for SDK, API, backend, and static JSON options.

Mapping API data into CreditHistory

import { adaptCreditTransactions, adaptWalletOptions } from '@flexprice/ui';

const transactions = adaptCreditTransactions(walletTransactions.items);
const wallets = adaptWalletOptions(walletList);

Credits Widgets

Overview of both credits components.

Credit Balance

Wallet balance card showing current credits and monetary value.

​What CreditHistory supports

​Where to use CreditHistory

​Importing CreditHistory

​Rendering CreditHistory

​Mapping API data into CreditHistory

​Related credit widgets