@blocklet/payment-react/docs/components-history-payment-list.ja.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`から支払いインテントを取得します。
- **無限スクロール**: ユーザーが要求すると自動的により多くの支払いを読み込み、長い支払い履歴に対しても効率的なデータ処理を保証します。
- **日付によるグループ化**: 支払いは日付ごとに視覚的にグループ化され、リストを簡単に確認できます。
- **詳細情報**: 各支払いについて、作成時間、金額、ステータス、説明、および利用可能な場合はブロックチェーン取引へのリンクを表示します。
- **読み込み中および空の状態**: データ取得中に読み込みインジケーターを含み、顧客に支払い履歴がない場合はユーザーフレンドリーなメッセージを表示します。