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

Reusable react components for payment kit v2

# コンポーネント

`@blocklet/payment-react` ライブラリは、支払い、サブスクリプション、寄付機能の開発を加速するために設計された、事前に構築されたReactコンポーネントの包括的なスイートを提供します。これらのコンポーネントは、完全なドロップインソリューションが必要な場合でも、カスタムエクスペリエンスを構築するためのきめ細かいUI要素が必要な場合でも、適切なツールを見つけやすいように分類されています。

すべてのコンポーネントは、状態管理とAPI通信を処理する `PaymentProvider` コンテキスト内でシームレスに動作するように設計されています。

## コンポーネントアーキテクチャ

次の図は、高レベルのコンポーネントが通常どのように相互作用するかを示しています。`CheckoutTable` や `CheckoutDonate` のようなユーザー向けのコンポーネントがエントリーポイントとして機能し、その後、コアの `CheckoutForm` を利用して最終的な支払い処理を行います。

<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
![Components](assets/diagram/components-diagram-0.jpg)
<!-- DIAGRAM_IMAGE_END -->

## コンポーネントカテゴリ

コンポーネントカテゴリを調べて、必要な構成要素を見つけてください。

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

これらは、すぐに使える完全な支払い体験を提供する高レベルのコンポーネントです。支払いフローの主要なエントリーポイントとして使用してください。

<x-cards>
  <x-card data-title="CheckoutForm" data-icon="lucide:credit-card" data-href="/components/checkout/checkout-form">
    支払いリンクとチェックアウトセッションを処理するための主要コンポーネント。
  </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>

### UIコンポーネント

カスタムの支払いフォームや表示を構築するためのきめ細かいコンポーネントのコレクション。これらのブロックを組み合わせて、アプリケーションの設計に完全に一致するユーザーインターフェースを作成します。

<x-cards>
  <x-card data-title="PricingTable" data-icon="lucide:layout-list" data-href="/components/ui/pricing-table">
    サブスクリプションプランと価格オプションを構造化されたテーブルに表示します。
  </x-card>
  <x-card data-title="PaymentSummary" data-icon="lucide:receipt" data-href="/components/ui/payment-summary">
    品目と合計を含む注文の詳細な概要を表示します。
  </x-card>
  <x-card data-title="Form Elements" data-icon="lucide:pencil-ruler" data-href="/components/ui/form-elements">
    カスタムの支払いフォームや連絡先フォームを構築するための一連の入力。
  </x-card>
</x-cards>

### ビジネスロジックコンポーネント

延滞請求書の管理、サブスクリプションの再開、自動クレジットトップアップの設定など、複雑なビジネスワークフローを処理するために設計された専用コンポーネント。

<x-cards>
  <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">
    ユーザーがキャンセルしたサブスクリプションを簡単に再開できるようにします。
  </x-card>
  <x-card data-title="Auto-Topup Components" data-icon="lucide:battery-charging" data-href="/components/business/auto-topup">
    自動クレジットトップアップ機能を管理および設定します。
  </x-card>
</x-cards>

### 履歴コンポーネント

過去の支払いおよびクレジットデータをユーザーに表示します。これらのコンポーネントを使用すると、請求書、支払い、およびクレジット取引のリストを簡単にレンダリングできます。

<x-cards>
  <x-card data-title="CustomerInvoiceList" data-icon="lucide:history" data-href="/components/history/invoice-list">
    詳細とステータスを含む顧客の請求書リストをレンダリングします。
  </x-card>
  <x-card data-title="CustomerPaymentList" data-icon="lucide:landmark" data-href="/components/history/payment-list">
    取引詳細を含む顧客の支払い履歴を表示します。
  </x-card>
  <x-card data-title="CreditGrantsList" data-icon="lucide:award" data-href="/components/history/credit-grants-list">
    ステータスと残額を含むクレジット付与のリストを表示します。
  </x-card>
</x-cards>