History Components

The @blocklet/payment-react library provides a suite of history components designed to give your users a clear and detailed view of their past activities. These components are essential for building customer portals, account dashboards, and administrative interfaces where users need to track their billing, payments, and credit usage.

These components fetch and display data directly from the payment service, offering a seamless way to present historical information without needing to build complex data-fetching and rendering logic from scratch.

Common Use Case#

A typical use case is to create a "Billing History" section in a user's account page. You can use a tabbed interface to switch between different history views, such as Invoices, Payments, and Credits.

Below is a conceptual example of how you might structure such a page.

import React from 'react';
import { CustomerInvoiceList, CustomerPaymentList } from '@blocklet/payment-react';

// Assume you have the customer's ID from your session or context
const customerId = 'cus_xxxxxxxxxxxxxx';

export default function MyBillingPage() {
  // In a real application, you would use state to manage the active tab
  const [activeTab, setActiveTab] = React.useState('invoices');

  return (
    <div>
      <h1>Billing History</h1>
      <nav>
        <button onClick={() => setActiveTab('invoices')}>Invoices</button>
        <button onClick={() => setActiveTab('payments')}>Payments</button>
      </nav>

      <div style={{ marginTop: '20px' }}>
        {activeTab === 'invoices' && (
          <CustomerInvoiceList 
            customer_id={customerId} 
            type="table" 
          />
        )}

This example demonstrates how you can easily embed the history components to provide comprehensive, self-service billing information to your users. Each component handles its own data fetching, pagination, and display logic.

Explore the detailed documentation for each component to understand its specific props and customization options.