CustomerPaymentList

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

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

Props

Prop	類型	必填	說明
`customer_id`	`string`	是	客戶的唯一識別碼（例如，使用者的 DID），您想要顯示其付款歷史記錄。

使用範例

若要使用 CustomerPaymentList，您必須將其包裝在 PaymentProvider 中，並提供必要的 customer_id。

Customer Payment History

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