@blocklet/payment-react/docs/components-history-payment-list.md

Reusable react components for payment kit v2

# CustomerPaymentList

The `CustomerPaymentList` component renders a detailed history of a customer's payments. It automatically handles fetching, pagination via infinite scroll, and grouping of payments by date, providing a clear and organized view of a user's transaction history.

This component is ideal for user dashboards or account pages where customers need to review their past transactions.

## Props

| Prop | Type | Required | Description |
|---|---|---|---|
| `customer_id` | `string` | Yes | The unique identifier for the customer (e.g., the user's DID) whose payment history you want to display. |

## Usage Example

To use the `CustomerPaymentList`, you must wrap it in a `PaymentProvider` and provide the required `customer_id`.

```tsx Customer Payment History icon=logos:react
import { PaymentProvider, CustomerPaymentList } from '@blocklet/payment-react';
import { useSessionContext } from './hooks/useSessionContext'; // Adjust path to your session context hook

export default function CustomerDashboard() {
  const { session, connectApi } = useSessionContext();

  // Ensure the user is logged in to get their DID
  if (!session?.user?.did) {
    return <div>Please log in to view your payment history.</div>;
  }

  return (
    <PaymentProvider session={session} connect={connectApi}>
      <h2>My Payment History</h2>
      <CustomerPaymentList customer_id={session.user.did} />
    </PaymentProvider>
  );
}
```

## Features

- **Automatic Data Fetching**: The component fetches payment intents from the API endpoint `/api/payment-intents`.
- **Infinite Scroll**: It automatically loads more payments as the user requests them, ensuring efficient data handling for long payment histories.
- **Date Grouping**: Payments are visually grouped by date, making the list easy to scan.
- **Detailed Information**: For each payment, it displays the creation time, amount, status, description, and a link to the blockchain transaction if available.
- **Loading and Empty States**: It includes a loading indicator during data fetching and displays a user-friendly message if the customer has no payment history.