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

Reusable react components for payment kit v2

# Checkout Components

This section covers the high-level components that serve as entry points for various checkout flows. These components are designed to provide a complete, out-of-the-box experience for common payment scenarios like standard payments from a link, selecting a plan from a pricing table, or making a donation. They encapsulate the necessary logic to initiate and process payments, often leveraging the core `CheckoutForm` component internally.

### Component Relationship

The typical flow involves a user interacting with an entry-point component like `CheckoutTable` or `CheckoutDonate`. These components handle the initial user interaction (e.g., selecting a subscription plan) and then create a `CheckoutSession`. Once the session is ready, they delegate the final payment processing to the `CheckoutForm`, which renders the actual payment interface.

The following diagram illustrates this component relationship:

DIAGRAM_PLACEHOLDER

This modular design allows for both flexibility and ease of use. You can quickly implement a complete payment workflow with a single component or compose them for more complex scenarios.

For more detailed information on each component, including props and usage examples, please refer to their respective documentation pages.

<x-cards data-columns="3">
  <x-card data-title="CheckoutForm" data-icon="lucide:credit-card" data-href="/components/checkout/checkout-form">
    The primary component for handling payment links and checkout sessions. It supports various display modes, including inline, standalone, and popup.
  </x-card>
  <x-card data-title="CheckoutTable" data-icon="lucide:table" data-href="/components/checkout/checkout-table">
    Renders a complete pricing table and manages the checkout flow when a user selects a plan, automatically creating a session and displaying the payment form.
  </x-card>
  <x-card data-title="CheckoutDonate" data-icon="lucide:heart-handshake" data-href="/components/checkout/checkout-donate">
    Implements donation functionality with flexible options for display modes, supporter history, and customization, guiding the user through the donation process.
  </x-card>
</x-cards>