# Capital プロモーションコンポーネント 連結アカウントの Capital 融資オファーに関するプロモーション用コンテンツを表示し、Capital 融資の申し込みを開始します。 Capital プロモーションコンポーネントを使用すると、対象となる連結アカウントは、プラットフォームのウェブサイトまたはアプリケーションで融資の申し込みを完了できます。連結アカウントは、オファー金額と規約を選択し、契約の詳細を表示し、申し込みを送信できます。このコンポーネントは、申し込みを処理する開始点として、Capitalプログラムに関する教育コンテンツとプロモーションコンテンツを表示します。 Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production. ### 代替コンポーネント - このコンポーネントの縮小版については、[Capital プロモーションタイルコンポーネント](https://docs.stripe.com/capital/promotional-tile.md)を参照してください。 - Capital プログラムに関する情報やプロモーション情報を除外するには、[Capital 申し込みコンポーネント](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-application.md)をご覧ください。 ## はじめに - 埋め込みコンポーネントは、アメリカとイギリスの連結アカウントにのみ表示できます。 - Before you go live, you must [enable automatic offers](https://docs.stripe.com/capital/embedded-component-integration.md#enable-automatic-offers) and [submit your integration to Stripe for review](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md#submit-for-review). - [コンポーネントをレンダリング](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md#render-the-component)すると、デフォルトで Stripe コンテンツにリンクされます。[プライバシーポリシー](https://stripe.com/privacy)とプラットフォーム向け[の Capital の仕組み](https://docs.stripe.com/capital/how-capital-for-platforms-works.md)のリンクは、同等のドキュメントに置き換えることができます。 ## Capital 埋め込みコンポーネントをインストールする Stripe SDK (ベータバージョン) をインストールして、非公開プレビュー版のコンポーネントのアカウントセッションを作成します。 - [Ruby](https://github.com/stripe/stripe-ruby/#public-preview-sdks) `>=15.5.0-beta.1` - [Python](https://github.com/stripe/stripe-python/#public-preview-sdks) `>=12.5.0b1` - [PHP](https://github.com/stripe/stripe-php/#public-preview-sdks) `>=17.6.0-beta.1` - [ノード](https://github.com/stripe/stripe-node/#public-preview-sdks)`>=18.5.0-beta.1` - [.NET](https://github.com/stripe/stripe-dotnet#public-preview-sdks) `>=48.5.0-beta.1` - [Java](https://github.com/stripe/stripe-java#public-preview-sdks) `>=29.5.0-beta.1` - [進む](https://github.com/stripe/stripe-go#public-preview-sdks) `>=82.5.0-beta.1` Stripe のクライアント側ライブラリ (ベータバージョン) を使用して、非公開プレビュー版のコンポーネントをレンダリングします。 #### npm ライブラリをインストールします。 ```bash npm install --save @stripe/connect-js@preview ``` アプリケーションで React を使用している場合は、以下のようにします。 ```bash npm install --save @stripe/react-connect-js@preview ``` #### GitHub [@stripe/connect-js](https://github.com/stripe/connect-js) ライブラリと [@stripe/react-connect-js](https://github.com/stripe/react-connect-js) ライブラリのソースコードを GitHub から直接ダウンロードします。 ## Connect.js を設定する アプリケーションでまだ Stripe の組み込みコンポーネントを使用していない場合は、アプリケーションコンポーネントを導入する前に [Connect.js を初期化](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#account-sessions)します。 ## アカウントセッションを作成する [アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md)リクエストで、`components`パラメーターに `capital_financing_promotion`を指定します。 ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; embedded_connect_beta=v2;" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[capital_financing_promotion][enabled]=true" ``` ## コンポーネントをレンダリングする Capital のプロモーションコンポーネントをフロントエンドに表示します。 #### JavaScript ```js // Include this element in your HTML const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion'); container.appendChild(capitalFinancingPromotion); ``` #### HTML + JS | メソッド | タイプ | 説明 | デフォルト | | ----------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | | `setOnApplicationSubmitted` | `() => void` | 連結アカウントで融資の申し込みが正常に送信されました。 | | | `setOnApplicationStepChange` | `({step: string}) => void` | 連結アカウントがアプリケーションを操作しました。 | | | `setLayout` | `full | banner` | コンポーネントのレイアウトを制御します。`banner` モードでは、コンポーネントの縦方向のサイズが大幅に縮小されるため、ページ内でコンポーネントを他のコンテンツと積み重ねる場合に便利です。 | `full` | | `setOnEligibleFinancingOfferLoaded` | `({productType: standard | refill | none}) => void` | 連結アカウントの融資オファーが読み込まれました。`productType` フィールドは、[Financing Offer (融資オファー)](https://docs.stripe.com/api/capital/connect_financing_object.md#financing_offer_object-product_type) オブジェクトの `product_type` フィールドに対応しています。 | | | `setPrivacyPolicyUrl` | `string` | プライバシーポリシーが記載されたページの絶対 URL。 | `https://stripe.com/privacy` | | `setHowCapitalWorksUrl` | `string` | Capital プログラムに関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-capital-for-platforms-works` | | `setEligibilityCriteriaUrl` | `string` | Capital プログラムの利用資格基準に関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-capital-for-platforms-works` | #### React | React プロパティ | タイプ | 説明 | デフォルト | 必須または任意 | | -------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------- | | `onApplicationSubmitted` | `() => void` | 連結アカウントで融資の申し込みが正常に送信されました。 | | 任意 | | `onApplicationStepChange` | `({step: string}) => void` | 連結アカウントがアプリケーション内を移動しました。[詳細](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md#display-states)をご覧ください。 | | 任意 | | `layout` | `full | banner` | コンポーネントのレイアウトを制御します。`banner` モードでは、コンポーネントの縦方向のサイズが大幅に縮小されるため、ページ内でコンポーネントを他のコンテンツと積み重ねる場合に便利です。 | `"full"` | 任意 | | `onEligibleFinancingOfferLoaded` | `({productType: "standard" | "refill" | "none"}) => void` | 連結アカウントの融資オファーが読み込まれました。`productType` フィールドは、[Financing Offer (融資オファー)](https://docs.stripe.com/api/capital/connect_financing_object.md#financing_offer_object-product_type) オブジェクトの `product_type` フィールドに対応しています。 | | 任意 | | `privacyPolicyUrl` | `string` | プライバシーポリシーが記載されたページの絶対 URL。 | `https://stripe.com/privacy` | 任意 | | `howCapitalWorksUrl` | `string` | Capital プログラムに関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-stripe-capital-works` | 任意 | | `eligibilityCriteriaUrl` | `string` | Capital プログラムの利用資格基準に関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-stripe-capital-works` | 任意 | ## コンポーネントのスタイル設定とカスタマイズ [埋め込みコンポーネントをカスタマイズ](https://docs.stripe.com/connect/customize-connect-embedded-components.md)して、コンポーネントのフォント、色、UI スタイルをプラットフォームのブランディングに合わせます。 ## 表示状態を設定する プラットフォームのホームページにプロモーションコンポーネントを追加するか、プラットフォームのウェブサイトまたはアプリで専用の**融資**ページを追加します。アプリケーションコンポーネントは、連結アカウントの融資ステータスに基づいてコンテンツを動的に表示します。 - **有効な融資はありません**: 連結アカウントに有効な融資がない場合、コンポーネントには利用資格と融資プログラムに関する一般的な情報が表示されます。 - **有効なオファーがある場合**: 連結アカウントがオファーの対象である場合、コンポーネントには**申し込みを開始**ボタンとともにオファーの詳細がすべて表示されます。 - **審査中のオファー**: 対象となる連結アカウントが融資オファーを受け入れて申請した後、この状態を使って申請状況トラッカーを表示します。オファーの進行状況を追跡するには、`onApplicationStepChange`イベントを監視してください。このイベントは、接続アカウントが次のステップに進むか、あるいは前のステップやページに戻ったときに発生します。次のステップの名前は、Capital アプリケーションプロセスで指定したハンドラーに渡されます。ステップは任意の順序で現れることがあり、繰り返される場合もあります。ステップ名はいつでも変更、追加、削除できます。 `onApplicationStepChange`オブジェクトは、平均ページ完了時間の追跡や離脱が多いページの分析など、分析目的でのみ使用してください。特定のページで申請を中断した接続アカウントにメールを送るなど、運用やサポートのワークフローをトリガーするために`onApplicationStepChange`を使用してはいけません。 - **送信済みのオファー**: 連結アカウントが融資の申し込みを送信すると、コンポーネントに空の画面が表示されます。代わりに `onApplicationSubmitted` イベントを監視して確認画面を表示します。 - **進行中の有効な融資**: コンポーネントは表示されません (null を返します)。 ### onApplicationStepChange タイプ `onApplicationStepChange` タイプは connect.js で定義されます。連結アカウントが Capital の申し込みプロセスでステップ間を移動するたびに、ステップ変更ハンドラーは、次のプロパティを持つ onApplicationStepChange オブジェクトを受け取ります。 | 氏名 | タイプ | サンプル値 | | ------ | ---------------------------- | --------------- | | `step` | `string` (有効なステップ名を指定してください) | `business_type` | アカウント登録ステップへの一意の参照。 | ### ステップ名 アカウント登録フローの各ページには、以下のステップ名のいずれかが設定されています。 | ステップ名 | 詳細 | | ----------------------------------------- | ------------------------------------------------------------------------- | | `stripe_user_authentication` | Stripe がホストするウィンドウを使用してユーザー認証を処理し、本人確認を行い、融資ワークフローを保護します。 | | `offer_selector` | 連結アカウントに融資の申し込みを紹介し、オファーと融資の概要を説明します。 | | `offer_summary` | 主な条件など、融資オファーの詳細なサマリーを表示します。 | | `business_details` | ビジネスの住所、業種、業務の詳細など、連結アカウントのビジネスに関する詳細情報を収集します。 | | `business_verification` | 連結アカウントの事業体の存在と正当性を確認するための書類と情報を収集します。 | | `business_summary` | ユーザー登録中に送信されたすべてのビジネス関連情報をレビューし、連結アカウントが詳細を確認または更新できるようにします。 | | `owners` | 融資に申し込むビジネスの受益者に関する情報を収集します。 | | `directors` | 該当する場合、ビジネスの取締役に関する詳細を収集します。 | | `executives` | ビジネスに関連する主要な役員に関する情報を収集します。 | | `representative_details` | 融資申し込みでビジネスを代表する個人に関する情報を収集します。 | | `representative_additional_document` | 連結アカウントが代表者の本人確認または権限を確認する補足書類をアップロードできるようにします。 | | `representative_document` | 政府発行の身分証明書または同等の書類を収集し、ビジネスの代表者の本人確認を行います。 | | `person_summary` | 提出されたすべての個人レベルの情報 (オーナー、代表者、役員) をレビューし、更新や修正を可能にします。 | | `offer_annual_revenue` | 連結アカウントの年間収益に関する情報を収集して、融資の利用資格と条件を評価します。 | | `offer_financial_data` | 融資オファーのリスク評価と承認に必要な追加の財務書類とデータをリクエストします。 | | `offer_missing_contact_info` | 連結アカウントに、融資の申し込みに関連する不足している連絡先情報の提供または更新を求めます。 | | `offer_payout_details` | 決済と入金の詳細を収集して、連結アカウントの銀行口座への融資資金の入金を容易にします。 | | `lending_network_offer_review_agreements` | レビューと承認のために、Stripe の Lending Network を通じて調達された融資オファーに固有の契約を連結アカウントに提供します。 | | `offer_review_agreements` | 選択した融資オファーに関連する法務契約と条件を提示して、連結アカウントによるレビューと承認を求めます。 | | `offer_complete` | 融資オファーが送信され、申し込みプロセスが完了したことを確認します。 | #### ステップの制限 - StepChange オブジェクトは分析専用です。 - ステップは任意の順序で表示でき、繰り返す場合があります。 - 有効なステップ名のリストは、予告なく変更される場合があります。 ## 読み込みエラーを処理する コンポーネントをレンダリングしたら、[読み込みエラーの処理](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-load-errors)方法を確認して、コンポーネントの読み込みに失敗した場合でも導入が適切に対応できるようにします。 ## コンポーネントを送信してレビューを受ける 本番環境で Capital コンポーネントを使用するには、Stripe と金融パートナーは、Stripe Capital を参照するすべての顧客向けコンテンツをレビューおよび承認する必要があります。 1. [サンドボックスでテストオファーを作成](https://docs.stripe.com/capital/testing.md#create-offer)し、オファーのステータスを `delivered` に設定します。このテストオファーを使用して、プラットフォームのウェブサイトまたはダッシュボードでアプリケーションコンポーネントをプレビューします。 1. サンドボックスオファーのプレビューと、組み込みコンポーネントがプラットフォームの UI にどのように表示されるか (スクリーンショットや録画されたビデオなど) をキャプチャーします。 1. [プレビューを Stripe に送信](https://form.asana.com/?k=8K51UWmWhttehNFD5qBLdg&d=974470123217835)します。承認後、Stripe は本番環境でコンポーネントを使用できるようにします。 ## Optional: その他の埋め込みコンポーネント プロモーションコンポーネントは、プラットフォーム向けの Capital で利用できるいくつかの[組み込みコンポーネント](https://docs.stripe.com/capital/embedded-component-integration.md#select-components)の 1 つです。たとえば、[Capital financing コンポーネント](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md)を埋め込むことで、連結アカウントが決済を管理し、取引履歴を表示できるようになります。 ## See also - [埋め込みコンポーネント導入をセットアップ](https://docs.stripe.com/capital/embedded-component-integration.md)