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

Reusable react components for payment kit v2

# CustomerPaymentList

`CustomerPaymentList` 元件可呈現客戶付款的詳細歷史記錄。它會自動處理擷取、透過無限滾動實現分頁以及按日期將付款分組，從而提供清晰、有條理的使用者交易歷史記錄檢視。

此元件非常適合用於使用者儀表板或帳戶頁面，客戶可以在其中查看過去的交易。

## Props

| Prop | 類型 | 必填 | 說明 |
|---|---|---|---|
| `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'; // 調整到您的 session context hook 的路徑

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` 擷取付款意圖。
- **無限滾動**：當使用者請求時，它會自動載入更多付款，確保對長付款歷史記錄進行有效的資料處理。
- **日期分組**：付款會按日期進行視覺分組，使清單易於瀏覽。
- **詳細資訊**：對於每筆付款，它會顯示建立時間、金額、狀態、說明以及區塊鏈交易連結（如果有的話）。
- **載入中和空白狀態**：它在資料擷取期間包含一個載入指示器，並在客戶沒有付款歷史記錄時顯示一個使用者友善的訊息。