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

Reusable react components for payment kit v2

# CustomerPaymentList

`CustomerPaymentList` 组件呈现客户付款的详细历史记录。它通过无限滚动自动处理获取、分页和按日期对付款进行分组，为用户的交易历史提供清晰有序的视图。

此组件非常适用于用户仪表板或客户需要查看其过去交易的账户页面。

## Props

| Prop | Type | Required | Description |
|---|---|---|---|
| `customer_id` | `string` | 是 | 客户的唯一标识符（例如，用户的 DID），用于显示其付款历史。 |

## 使用示例

要使用 `CustomerPaymentList`，您必须将其包装在 `PaymentProvider` 中，并提供所需的 `customer_id`。

```tsx Customer Payment History icon=logos:react
import { PaymentProvider, CustomerPaymentList } from '@blocklet/payment-react';
import { useSessionContext } from './hooks/useSessionContext'; // 调整到您的会话上下文钩子的路径

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

  // 确保用户已登录以获取其 DID
  if (!session?.user?.did) {
    return <div>请登录以查看您的付款历史。</div>;
  }

  return (
    <PaymentProvider session={session} connect={connectApi}>
      <h2>我的付款历史</h2>
      <CustomerPaymentList customer_id={session.user.did} />
    </PaymentProvider>
  );
}
```

## 功能特性

- **自动数据获取**：该组件从 API 端点 `/api/payment-intents` 获取付款意图。
- **无限滚动**：当用户请求时，它会自动加载更多付款，从而确保对长付款历史进行高效的数据处理。
- **日期分组**：付款按日期进行视觉分组，使列表易于浏览。
- **详细信息**：对于每笔付款，它会显示创建时间、金额、状态、描述以及可用的区块链交易链接。
- **加载和空状态**：它在数据获取期间包含一个加载指示器，并在客户没有付款历史时显示用户友好的消息。