CustomerPaymentList

The CustomerPaymentList component renders a detailed history of a customer's payments. It automatically handles fetching, pagination via infinite scroll, and grouping of payments by date, providing a clear and organized view of a user's transaction history.

This component is ideal for user dashboards or account pages where customers need to review their past transactions.

Props#

Prop

Type

Required

Description

customer_id

string

Yes

The unique identifier for the customer (e.g., the user's DID) whose payment history you want to display.

Usage Example#

To use the CustomerPaymentList, you must wrap it in a PaymentProvider and provide the required customer_id.

Customer Payment History

import { PaymentProvider, CustomerPaymentList } from '@blocklet/payment-react';
import { useSessionContext } from './hooks/useSessionContext'; // Adjust path to your session context hook

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

  // Ensure the user is logged in to get their DID
  if (!session?.user?.did) {
    return <div>Please log in to view your payment history.</div>;
  }

  return (
    <PaymentProvider session={session} connect={connectApi}>
      <h2>My Payment History</h2>
      <CustomerPaymentList customer_id={session.user.did} />
    </PaymentProvider>
  );
}

Features#

  • Automatic Data Fetching: The component fetches payment intents from the API endpoint /api/payment-intents.
  • Infinite Scroll: It automatically loads more payments as the user requests them, ensuring efficient data handling for long payment histories.
  • Date Grouping: Payments are visually grouped by date, making the list easy to scan.
  • Detailed Information: For each payment, it displays the creation time, amount, status, description, and a link to the blockchain transaction if available.
  • Loading and Empty States: It includes a loading indicator during data fetching and displays a user-friendly message if the customer has no payment history.
CustomerInvoiceList
CreditGrantsList