CustomerPaymentList

CustomerPaymentListコンポーネントは、顧客の支払い履歴の詳細をレンダリングします。データの取得、無限スクロールによるページネーション、日付ごとの支払いのグループ化を自動的に処理し、ユーザーの取引履歴を明確かつ整理されたビューで提供します。

このコンポーネントは、顧客が過去の取引を確認する必要があるユーザーダッシュボードやアカウントページに最適です。

Props

Prop	Type	Required	Description
`customer_id`	`string`	はい	支払い履歴を表示したい顧客の一意の識別子（例：ユーザーのDID）。

使用例

CustomerPaymentListを使用するには、PaymentProviderでラップし、必須のcustomer_idを提供する必要があります。

Customer Payment History

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