UIコンポーネント

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>
  );
}