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

Reusable react components for payment kit v2

# Checkout Components

The `@blocklet/payment-react` library provides a set of high-level Checkout Components designed to serve as complete, ready-to-use entry points for various payment scenarios. These components encapsulate the entire user flow, from selecting a product to completing the payment, allowing you to integrate complex payment experiences with minimal setup.

Whether you need to display a pricing table, accept donations, or process a direct payment link, these components handle the underlying logic of session creation, state management, and UI rendering.

### Component Flow

The typical flow involves a user interacting with an entry-point component like `CheckoutTable` or `CheckoutDonate`. These components then create a `CheckoutSession` and delegate the final payment processing to the core `CheckoutForm` component.

```d2 Checkout Component Flow icon=mdi:transit-connection-variant
direction: down

User: {
  shape: c4-person
}

Checkout-Flow: {
  label: "Checkout Flow"

  Entry-Points: {
    label: "User-Facing Components"
    shape: rectangle

    CheckoutTable: {
      label: "CheckoutTable"
    }

    CheckoutDonate: {
      label: "CheckoutDonate"
    }
  }

  Core-Processor: {
    label: "Core Payment Processor"
    shape: rectangle

    CheckoutForm: {
      label: "CheckoutForm"
    }
  }
}

User -> Checkout-Flow.Entry-Points.CheckoutTable: "Selects a subscription"
User -> Checkout-Flow.Entry-Points.CheckoutDonate: "Makes a donation"
Checkout-Flow.Entry-Points.CheckoutTable -> Checkout-Flow.Core-Processor.CheckoutForm: "On plan selection"
Checkout-Flow.Entry-Points.CheckoutDonate -> Checkout-Flow.Core-Processor.CheckoutForm: "On donate action"
Checkout-Flow.Core-Processor.CheckoutForm -> User: "Payment Result"
```

Explore the components below to find the best fit for your application's needs.

<x-cards data-columns="3">
  <x-card data-title="CheckoutForm" data-icon="lucide:credit-card" data-href="/components/checkout/checkout-form">
    The fundamental component for processing payments. It takes a `paymentLink` or `checkoutSession` ID and renders the complete payment UI.
  </x-card>
  <x-card data-title="CheckoutTable" data-icon="lucide:table" data-href="/components/checkout/checkout-table">
    Displays a complete pricing table. When a user selects a plan, it automatically initiates a checkout session and renders the payment form.
  </x-card>
  <x-card data-title="CheckoutDonate" data-icon="lucide:heart-handshake" data-href="/components/checkout/checkout-donate">
    A flexible component for adding donation functionality. It handles donation setup, displays supporter history, and manages the donation payment flow.
  </x-card>
</x-cards>

Each of these components is designed to be highly customizable and can be integrated seamlessly into your application. Click on any card to view its detailed documentation and usage examples.