# 業務邏輯元件

業務邏輯元件是專為處理訂閱和發票管理相關的複雜、具狀態性操作而設計的特殊 React 元件。這些元件封裝了完整的用戶流程，例如支付逾期發票或恢復已取消的訂閱，讓您能以最少的設定輕鬆地將進階功能整合至您的應用程式中。

它們建立在核心函式庫功能的基礎上，並經常與支付服務 API 互動以執行操作並反映狀態變更。

<x-cards data-columns="2">
  <x-card data-title="OverdueInvoicePayment" data-icon="lucide:file-warning" data-href="/components/business/overdue-invoice-payment">
    一個用於處理特定客戶或訂閱的逾期發票支付的元件，會呈現一個帶有付款選項的對話方塊。
  </x-card>
  <x-card data-title="ResumeSubscription" data-icon="lucide:play-circle" data-href="/components/business/resume-subscription">
    允許用戶恢復已取消的訂閱。它會處理必要的 API 呼叫，並在需要時處理重新質押的邏輯。
  </x-card>
  <x-card data-title="Auto-Topup Components" data-icon="lucide:zap" data-href="/components/business/auto-topup">
    一組用於管理和設定自動點數儲值的元件，包含一個顯示卡片和一個設定彈出視窗。
  </x-card>
</x-cards>

### 後續步驟

整合這些業務邏輯元件後，您可能會想向用戶顯示歷史資料。請前往 [歷史元件](./components-history.md) 章節，以了解如何列出發票、付款和點數交易。