跳到主要内容

历史组件

@blocklet/payment-react 库提供了一套历史组件，旨在为您的用户提供清晰详细的过往活动视图。这些组件对于构建客户门户、账户仪表盘和管理界面至关重要，用户可以在这些界面中跟踪他们的账单、支付和信用使用情况。

这些组件直接从支付服务中获取并显示数据，提供了一种无缝呈现历史信息的方式，无需从头开始构建复杂的数据获取和渲染逻辑。

CustomerInvoiceList

渲染客户发票的列表或表格，包括状态、金额和创建日期的详细信息。

CustomerPaymentList

显示客户的完整支付历史，包括交易详情、支付方式和状态。

CreditGrantsList

显示客户的所有信用授予列表，详细说明状态、剩余金额和生效日期。

CreditTransactionsList

列出所有个人信用交易，提供信用使用和随时间调整的详细日志。

常见用例

一个典型的用例是在用户的账户页面中创建一个“账单历史”部分。您可以使用选项卡式界面在不同的历史视图之间切换，例如发票、支付和信用。

下面是一个关于如何构建这样一个页面的概念性示例。

MyBillingPage.tsx

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

// 假设您从会话或上下文中获取了客户的 ID
const customerId = 'cus_xxxxxxxxxxxxxx';

export default function MyBillingPage() {
  // 在实际应用中，您会使用 state 来管理活动选项卡
  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"
          />
        )}
        {activeTab === 'payments' && (
          <CustomerPaymentList
            customer_id={customerId}
          />
        )}
      </div>
    </div>
  );
}

这个例子展示了如何轻松嵌入历史组件，为您的用户提供全面的自助式账单信息。每个组件都处理自己的数据获取、分页和显示逻辑。

探索每个组件的详细文档，以了解其特定的属性和自定义选项。