CustomerPaymentList
The CustomerPaymentList component renders a detailed history of a customer's payments. It is designed for efficiency, featuring infinite scrolling to handle large numbers of transactions without compromising performance. Payments are automatically grouped by date for easy navigation and review.
Props#
Prop | Type | Description | Required |
|---|---|---|---|
|
| The ID of the customer whose payment history should be displayed. | Yes |
Usage Example#
To use the CustomerPaymentList, you need to provide a customer_id. The component handles all the logic for fetching, paginating, and displaying the payment data. It must be wrapped within a PaymentProvider to function correctly.
import { PaymentProvider, CustomerPaymentList } from '@blocklet/payment-react';
import { Box, Typography } from '@mui/material';
// Assume `session` and `connectApi` are available from your application's context.
// The `customerDid` would typically be fetched or passed into your component.
const customerDid = 'z8iZ...';
function CustomerProfilePage() {
return (
<PaymentProvider session={session} connect={connectApi}>
<Box sx={{ p: 3 }}>
<Typography variant="h5" gutterBottom>
Payment History
</Typography>
<CustomerPaymentList customer_id={customerDid} />
</Box>
</PaymentProvider>
);
}
export default CustomerProfilePage;Features#
- Automatic Pagination: The component automatically fetches and renders payments in pages. A "Load More" button appears when more transactions are available, allowing users to load history on demand.
- Date-Based Grouping: To improve readability, all payments are grouped under the date they were created, making it easy to find transactions from a specific day.
- Detailed Payment Information: Each row in the list provides key details about the transaction:
- Date & Time: The exact creation time of the payment.
- Amount: The total amount received, formatted with the correct currency symbol.
- Status: The current status of the payment (e.g.,
succeeded,processing) shown with a colored indicator using theStatuscomponent. - Description: The description associated with the payment intent.
- Transaction Link: A direct link to the relevant blockchain explorer for on-chain transactions, if applicable.
- Loading and Empty States: A loading indicator is displayed while the initial payment data is being fetched. If the customer has no payment history, a clear message is shown instead of an empty list.
Related Components#
For displaying a customer's invoice history, which is often related to their payment history, see the CustomerInvoiceList component.