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

Reusable react components for payment kit v2

# チェックアウトコンポーネント

`@blocklet/payment-react` ライブラリは、さまざまな支払いシナリオに対応する、すぐに使える完全なエントリーポイントとして設計された、高レベルのチェックアウトコンポーネントのセットを提供します。これらのコンポーネントは、製品の選択から支払いの完了まで、ユーザーフロー全体をカプセル化しており、最小限の設定で複雑な支払い体験を統合できます。

価格表の表示、寄付の受付、または直接支払いリンクの処理が必要な場合でも、これらのコンポーネントはセッション作成、状態管理、UIレンダリングの基盤となるロジックを処理します。

### コンポーネントフロー

一般的なフローでは、ユーザーが `CheckoutTable` や `CheckoutDonate` のようなエントリーポイントコンポーネントと対話します。これらのコンポーネントは `CheckoutSession` を作成し、最終的な支払い処理をコアの `CheckoutForm` コンポーネントに委任します。

```d2 チェックアウトコンポーネントフロー icon=mdi:transit-connection-variant
direction: down

User: {
  shape: c4-person
}

Checkout-Flow: {
  label: "チェックアウトフロー"

  Entry-Points: {
    label: "ユーザー向けコンポーネント"
    shape: rectangle

    CheckoutTable: {
      label: "CheckoutTable"
    }

    CheckoutDonate: {
      label: "CheckoutDonate"
    }
  }

  Core-Processor: {
    label: "コア決済プロセッサー"
    shape: rectangle

    CheckoutForm: {
      label: "CheckoutForm"
    }
  }
}

User -> Checkout-Flow.Entry-Points.CheckoutTable: "サブスクリプションを選択"
User -> Checkout-Flow.Entry-Points.CheckoutDonate: "寄付を行う"
Checkout-Flow.Entry-Points.CheckoutTable -> Checkout-Flow.Core-Processor.CheckoutForm: "プラン選択時"
Checkout-Flow.Entry-Points.CheckoutDonate -> Checkout-Flow.Core-Processor.CheckoutForm: "寄付アクション時"
Checkout-Flow.Core-Processor.CheckoutForm -> User: "支払い結果"
```

以下のコンポーネントを調べて、アプリケーションのニーズに最適なものを見つけてください。

<x-cards data-columns="3">
  <x-card data-title="CheckoutForm" data-icon="lucide:credit-card" data-href="/components/checkout/checkout-form">
    支払いを処理するための基本的なコンポーネントです。`paymentLink` または `checkoutSession` ID を受け取り、完全な支払いUIをレンダリングします。
  </x-card>
  <x-card data-title="CheckoutTable" data-icon="lucide:table" data-href="/components/checkout/checkout-table">
    完全な価格表を表示します。ユーザーがプランを選択すると、自動的にチェックアウトセッションを開始し、支払いフォームをレンダリングします。
  </x-card>
  <x-card data-title="CheckoutDonate" data-icon="lucide:heart-handshake" data-href="/components/checkout/checkout-donate">
    寄付機能を追加するための柔軟なコンポーネントです。寄付の設定、サポーター履歴の表示、寄付の支払いフローを管理します。
  </x-card>
</x-cards>

これらの各コンポーネントは、高度にカスタマイズ可能であり、アプリケーションにシームレスに統合できるように設計されています。いずれかのカードをクリックして、詳細なドキュメントと使用例をご覧ください。