跳到主要內容

歷史記錄元件

@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() {
  // 在實際應用中，您會使用狀態來管理當前的分頁
  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>
  );
}

這個範例展示了如何輕鬆嵌入歷史記錄元件，為您的使用者提供全面的自助式帳務資訊。每個元件都會處理自己的資料獲取、分頁和顯示邏輯。

探索每個元件的詳細文件，以了解其特定的 props 和自訂選項。