CreditTransactionsList
The CreditTransactionsList component renders a detailed and paginated table of credit transactions. It serves as a comprehensive log, allowing users to track how their credits have been utilized or adjusted over time. This component is essential for providing transparency in credit-based billing systems.
Context Requirement#
This component needs access to user session information to identify the current customer and their role. Therefore, it must be rendered within a PaymentProvider.
Properties#
The CreditTransactionsList component accepts the following properties:
Prop | Type | Description | Default |
|---|---|---|---|
|
| The ID of the customer whose transactions are to be displayed. If omitted, it defaults to the DID of the currently logged-in user from the |
|
|
| Filters the transactions to show only those related to a specific subscription ID. |
|
|
| Filters the transactions to show only those related to a specific credit grant ID. |
|
|
| The number of transactions to display per page. |
|
|
| A callback function that is triggered when the transaction data is fetched or updated. It receives the new data and the previous data as arguments. |
|
|
| If |
|
|
| If |
|
|
| An optional string to filter transactions by their source. |
|
|
| Controls the navigation behavior of links within the table. Use |
|
Usage Scenarios#
1. Basic Customer View#
To display the credit transaction history for the currently logged-in user, you can render the component without any specific IDs. It will automatically fetch the user's data from the PaymentProvider context.
import React from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import { CreditTransactionsList } from '@blocklet/payment-react/components/history';
export default function UserCreditHistory() {
return (
<PaymentProvider>
<h2>My Credit Transactions</h2>
<CreditTransactionsList pageSize={5} />
</PaymentProvider>
);
}2. Admin View with Filters#
For an administrative dashboard, you can display transactions for a specific customer by providing their customer_id. You can also enable admin-specific columns and the date filter to provide more powerful data exploration tools.
import React from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import { CreditTransactionsList } from '@blocklet/payment-react/components/history';
export default function AdminCustomerCreditHistory({ customerId }) {
return (
<PaymentProvider>
<h2>Credit Transactions for Customer {customerId}</h2>
<CreditTransactionsList
customer_id={customerId}
showAdminColumns={true}
showTimeFilter={true}
mode="dashboard"
/>
</PaymentProvider>
);
}3. Transactions for a Specific Credit Grant#
When you need to show a detailed usage report for a single credit grant, pass the credit_grant_id. This will filter the list to show only the transactions associated with that grant.
import React from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import { CreditTransactionsList } from '@blocklet/payment-react/components/history';
export default function CreditGrantUsageDetails({ grantId }) {
return (
<PaymentProvider>
<h3>Transaction History for this Grant</h3>
<CreditTransactionsList credit_grant_id={grantId} />
</PaymentProvider>
);
}Table Columns#
The component renders a table with the following columns:
- Amount: The value of the credit transaction and its unit.
- Credit Grant: A link to the parent credit grant. This column is automatically hidden if the list is already filtered by a
credit_grant_id. - Description: Provides context for the transaction, such as the associated subscription or usage event.
- Meter Event (Admin Only): A link to the specific billing meter event that triggered the transaction. This is only visible when
showAdminColumnsistrueand the user is an admin. - Date: The timestamp indicating when the transaction was created.
After displaying credit usage, you might want to show an overview of all credit grants. To do this, you can use the CreditGrantsList component.