@blocklet/payment-react ライブラリは、さまざまな支払いシナリオに対応する、すぐに使える完全なエントリーポイントとして設計された、高レベルのチェックアウトコンポーネントのセットを提供します。これらのコンポーネントは、製品の選択から支払いの完了まで、ユーザーフロー全体をカプセル化しており、最小限の設定で複雑な支払い体験を統合できます。
価格表の表示、寄付の受付、または直接支払いリンクの処理が必要な場合でも、これらのコンポーネントはセッション作成、状態管理、UIレンダリングの基盤となるロジックを処理します。
コンポーネントフロー
一般的なフローでは、ユーザーが CheckoutTable や CheckoutDonate のようなエントリーポイントコンポーネントと対話します。これらのコンポーネントは CheckoutSession を作成し、最終的な支払い処理をコアの CheckoutForm コンポーネントに委任します。
チェックアウトコンポーネントフロー
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: "支払い結果"以下のコンポーネントを調べて、アプリケーションのニーズに最適なものを見つけてください。
CheckoutForm
支払いを処理するための基本的なコンポーネントです。`paymentLink` または `checkoutSession` ID を受け取り、完全な支払いUIをレンダリングします。
CheckoutTable
完全な価格表を表示します。ユーザーがプランを選択すると、自動的にチェックアウトセッションを開始し、支払いフォームをレンダリングします。
CheckoutDonate
寄付機能を追加するための柔軟なコンポーネントです。寄付の設定、サポーター履歴の表示、寄付の支払いフローを管理します。
これらの各コンポーネントは、高度にカスタマイズ可能であり、アプリケーションにシームレスに統合できるように設計されています。いずれかのカードをクリックして、詳細なドキュメントと使用例をご覧ください。