History Components
The History Components are a suite of tools designed to give customers a clear and detailed view of their financial interactions. They are essential for building transparent and user-friendly account management sections, such as a customer portal or a billing history page. These components fetch and display data related to invoices, payments, and credit balances, providing a complete historical record.
This section covers the components available for displaying historical data.
CustomerInvoiceList#
This component renders a list of a customer's invoices, including key details like the amount, status, date, and a link to view the full invoice. It supports both a simple list view and a more detailed table view, making it adaptable to different layouts.
View CustomerInvoiceList component details
CustomerPaymentList#
Use this component to display a complete history of payments made by a customer. It lists each payment with its amount, status, date, and a link to the corresponding transaction on the blockchain, if applicable.
View CustomerPaymentList component details
CreditGrantsList#
The CreditGrantsList component shows all credit grants a customer has received. It details the status, remaining balance, and validity period of each grant, which is useful for managing promotional credits or prepaid balances.
View CreditGrantsList component details
CreditTransactionsList#
To provide a granular view of how credits are used, the CreditTransactionsList component logs every transaction that affects a customer's credit balance. This includes credit deductions for service usage and any manual adjustments.
View CreditTransactionsList component details
By combining these components, you can build a comprehensive and professional billing history section for your application. This not only improves user experience but also reduces support inquiries by providing customers with self-service access to their data.
After implementing history views, you may want to explore advanced topics like customization and theming. Continue to the next section to learn more in our Guides.