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

Reusable react components for payment kit v2

# UIコンポーネント

`@blocklet/payment-react` ライブラリは、支払いおよびチェックアウトインターフェースを構築する際に最大限の柔軟性を提供するために設計された、一連のきめ細かいUIコンポーネントを提供します。フロー全体をカプセル化する高レベルの[チェックアウトコンポーネント](./components-checkout.md)とは異なり、これらのコンポーネントはカスタムユーザーエクスペリエンスを作成するためのビルディングブロックです。

これらのコンポーネントは、既存のアプリケーションレイアウトに支払い機能を統合する必要がある場合や、標準のチェックアウトフローが特定の設計要件を満たさない場合に最適です。

<x-cards data-columns="3">
  <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:form-input" data-href="/components/ui/form-elements">
    住所、電話番号、国選択など、カスタムの支払いおよび連絡先情報フォームを構築するための特殊な入力コンポーネントのコレクションです。
  </x-card>
</x-cards>

## 支払いUIの構成

UIコンポーネントは、完全な支払いページを構築するために組み合わせて使用されることを意図しています。これらのコンポーネントのほとんどは、支払い方法や設定などのデータのために支払いコンテキストにアクセスする必要があるため、`PaymentProvider`内でレンダリングする必要があります。

以下は、`PricingTable`と`PaymentSummary`を組み合わせてカスタムチェックアウトページを作成する方法の概念的な例です。

```jsx カスタムチェックアウトページ icon=logos:react
import { PaymentProvider } from '@blocklet/payment-react';
import { PricingTable, PaymentSummary } from '@blocklet/payment-react/components';
// useSessionContext フックは PaymentProvider のドキュメントで定義されています
import { useSessionContext } from '/path/to/session/context'; 

function CustomCheckoutPage() {
  const { session, connectApi } = useSessionContext();
  
  // 実際のアプリケーションでは、このデータをバックエンドから取得します
  const pricingData = { /* ... 価格表データオブジェクト ... */ };
  const selectedItems = [ /* ... ユーザーの選択に基づく明細項目 ... */ ];
  const currency = { /* ... 通貨オブジェクト ... */ };

  const handleSelect = (priceId, currencyId) => {
    console.log('ユーザーが選択したプラン:', priceId, '通貨:', currencyId);
    // 選択したプランを 'selectedItems' ステートに追加し、UIを更新します
  };

  return (
    <PaymentProvider
      apiHost={connectApi}
      sessionId={session.user?.did}
      locale="en"
    >
      <div className="checkout-container" style={{ display: 'flex', gap: '2rem' }}>
        <div className="pricing-section" style={{ flex: 2 }}>
          <h2>プランを選択してください</h2>
          <PricingTable table={pricingData} onSelect={handleSelect} />
        </div>
        <div className="summary-section" style={{ flex: 1 }}>
          <h2>注文概要</h2>
          <PaymentSummary items={selectedItems} currency={currency} />
        </div>
      </div>
    </PaymentProvider>
  );
}
```

この例では、`PricingTable`と`PaymentSummary`がカスタムページで一緒に使用されています。`PaymentProvider`が全体の構造をラップし、支払い設定とメソッドをすべての子コンポーネントで利用できるようにします。

## 次のステップ

UIコンポーネントの役割を理解したところで、各コンポーネントの詳細を掘り下げて、カスタム支払いフローの構築を始めましょう。`PricingTable`から始めることをお勧めします。

[PricingTableコンポーネントについて学ぶ &rarr;](./components-ui-pricing-table.md)