@blocklet/payment-react ライブラリは、支払い、サブスクリプション、寄付機能の開発を加速するために設計された、事前に構築されたReactコンポーネントの包括的なスイートを提供します。これらのコンポーネントは、完全なドロップインソリューションが必要な場合でも、カスタムエクスペリエンスを構築するためのきめ細かいUI要素が必要な場合でも、適切なツールを見つけやすいように分類されています。
すべてのコンポーネントは、状態管理とAPI通信を処理する PaymentProvider コンテキスト内でシームレスに動作するように設計されています。
コンポーネントアーキテクチャ
次の図は、高レベルのコンポーネントが通常どのように相互作用するかを示しています。CheckoutTable や CheckoutDonate のようなユーザー向けのコンポーネントがエントリーポイントとして機能し、その後、コアの CheckoutForm を利用して最終的な支払い処理を行います。
コンポーネントカテゴリ
コンポーネントカテゴリを調べて、必要な構成要素を見つけてください。
チェックアウトコンポーネント
これらは、すぐに使える完全な支払い体験を提供する高レベルのコンポーネントです。支払いフローの主要なエントリーポイントとして使用してください。
CheckoutForm
支払いリンクとチェックアウトセッションを処理するための主要コンポーネント。
CheckoutTable
完全な価格表をレンダリングし、チェックアウトフローを処理します。
CheckoutDonate
この柔軟なコンポーネントで寄付機能を実装します。
UIコンポーネント
カスタムの支払いフォームや表示を構築するためのきめ細かいコンポーネントのコレクション。これらのブロックを組み合わせて、アプリケーションの設計に完全に一致するユーザーインターフェースを作成します。
PricingTable
サブスクリプションプランと価格オプションを構造化されたテーブルに表示します。
PaymentSummary
品目と合計を含む注文の詳細な概要を表示します。
Form Elements
カスタムの支払いフォームや連絡先フォームを構築するための一連の入力。
ビジネスロジックコンポーネント
延滞請求書の管理、サブスクリプションの再開、自動クレジットトップアップの設定など、複雑なビジネスワークフローを処理するために設計された専用コンポーネント。
OverdueInvoicePayment
顧客またはサブスクリプションの延滞請求書の支払いを処理します。
ResumeSubscription
ユーザーがキャンセルしたサブスクリプションを簡単に再開できるようにします。
Auto-Topup Components
自動クレジットトップアップ機能を管理および設定します。
履歴コンポーネント
過去の支払いおよびクレジットデータをユーザーに表示します。これらのコンポーネントを使用すると、請求書、支払い、およびクレジット取引のリストを簡単にレンダリングできます。