コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Capital の埋め込みコンポーネントの設定非公開プレビュー

融資フローをウェブサイトに埋め込みます。

ページをコピー

Capital の埋め込みコンポーネントを使用して、融資をアプリケーションに直接統合します。これらの事前構築済みコンポーネントを使用して、次のことができます。

  • ユーザー申請プロセスを管理し、融資オファーを表示し、返済ロジックを処理する
  • ユーザーフレンドリーでコンプライアンスに準拠した方法でオファーの詳細を宣伝および提示する
  • スタイリングをカスタマイズして、アプリケーションのインターフェイスに適合するホワイトラベルの統合を提供します

詳細については、Connect 埋め込みコンポーネントの使用を開始するを参照してください。

Capital 融資の埋め込みコンポーネントを使用した UI の例

Capital 融資コンポーネントを特徴とするウェブサイトの例

Capital は、次の 3 つの主要な組み込みコンポーネントを提供しています。

コンポーネント説明
Capital 融資の促進新しいオファーを宣伝し、利用資格とオファー条件について顧客を教育します。プロモーションコンポーネントをレンダリングして融資プログラムをアップセルし、顧客がオファーに申し込むためのエントリポイントを提供します。
Capital 融資アクティブな資金調達オファー、返済の進捗状況、取引履歴を表示し、ユーザーの融資の支払いを促します。アプリケーションの Capital ダッシュボードまたはレポートページに、融資コンポーネントを埋め込みます。
Capital 融資申請顧客向けの完全な申請フローをホストして管理します。スタンドアロンアプリケーションコンポーネントは、よりカスタマイズされたフロントエンドを提供する場合にのみ使用してください。それ以外の場合は、融資促進コンポーネントを使用すると、顧客はダイアログで申請フローを完了することができます。

融資促進コンポーネントは、顧客の目の付きやすい位置に配置することをお勧めします。オファーのプロモーション方法に関する推奨事項については、プロモーションタイルの埋め込みをご覧ください。

設定

Capital コンポーネントは現在プライベートプレビュー段階であり、ベータ SDK を使用する必要があります。

Install a beta version of the Stripe SDKs to create account sessions for private preview components:

Use the beta version of the Stripe’s client-side libraries to render private preview components:

ライブラリをインストールします。

npm install --save @stripe/connect-js@preview

アプリケーションで React を使用している場合は、以下のようにします。

npm install --save @stripe/react-connect-js@preview

Capital テストガイドを参照して、テストファイナンスオファーを作成し、埋め込みコンポーネントの統合をテストします。

アカウントセッションを作成する

Account セッションを作成して、連結アカウントに埋め込みコンポーネントへのアクセス権を付与します。Capital の埋め込みコンポーネントを使用するには、リクエストの components パラメーターに capital_financing_promotion、capital_financing_application、capital_financing を必ず含めてください。

Capital コンポーネントはプライベートプレビュー段階であり、Account セッション作成リクエストにベータヘッダーを含める必要があります: embedded_connect_beta=v2;

Command Line
curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Version: 2025-03-31.basil; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}}
 \
  -d "components[capital_financing][enabled]"=true \
  -d "components[capital_financing_promotion][enabled]"=true \
  -d "components[capital_financing_application][enabled]"=true

Capital コンポーネントをレンダリングする

Account セッションを作成したら、返されたクライアントシークレットを使用して StripeConnectInstance を初期化します。Connect.js を初期化して構成する方法の詳細については、ConnectJS の読み込みと初期化を参照してください。

StripeConnectInstance を初期化したら、フロントエンドで Capital コンポーネントをレンダリングできます。各コンポーネントにはカスタムイベントとコールバック関数があり、ウェブサイトの特定のニーズに合わせて調整できます。また、コンポーネントには、完全にホワイトラベル化された統合のためのカスタム URL を顧客に提供するオプションも用意されています。

capital-financing.js
// Include these elements
const capitalFinancing = stripeConnectInstance.create('capital-financing');
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
const capitalFinancingApplication = stripeConnectInstance.create('capital-financing-application');
container.appendChild(capitalFinancing);
container.appendChild(capitalFinancingPromotion);
container.appendChild(capitalFinancingApplication);

コンポーネントのスタイル設定とカスタマイズ

埋め込みコンポーネントをカスタマイズして、会社のブランディングに合わせることができます。ブランドのデザインに合わせて UI を調整する方法の詳細については、Connect の埋め込みコンポーネントをカスタマイズを参照してください。

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc