@blocklet/payment-react/docs/components-business.md

Reusable react components for payment kit v2

# Business Logic Components

Business Logic Components are specialized React components designed to handle complex, stateful operations related to subscription and invoice management. These components encapsulate entire user flows, such as paying overdue invoices or resuming a canceled subscription, making it easy to integrate advanced functionalities into your application with minimal setup.

They are built on top of the core library features and often interact with the Payment Service API to perform actions and reflect state changes.

<x-cards data-columns="2">
  <x-card data-title="OverdueInvoicePayment" data-icon="lucide:file-warning" data-href="/components/business/overdue-invoice-payment">
    A component to handle the payment of overdue invoices for a specific customer or subscription, presenting a dialog with payment options.
  </x-card>
  <x-card data-title="ResumeSubscription" data-icon="lucide:play-circle" data-href="/components/business/resume-subscription">
    Allows a user to resume a canceled subscription. It handles the necessary API calls and re-staking logic if required.
  </x-card>
  <x-card data-title="Auto-Topup Components" data-icon="lucide:zap" data-href="/components/business/auto-topup">
    A set of components for managing and configuring automatic credit top-ups, including a display card and a configuration modal.
  </x-card>
</x-cards>

### Next Steps

After integrating these business logic components, you might want to display historical data to your users. Proceed to the [History Components](./components-history.md) section to learn how to list invoices, payments, and credit transactions.