# Capital 融資コンポーネント 連結アカウントで有効な Capital 融資を表示して管理できるようにします。 Capital financingの埋め込みコンポーネントを使用すると、連結アカウントはオファーを受け入れた後で、融資ステータスを表示して管理できます。連結アカウントは以下を実行できます。 - 決済進行状況を表示します。 - 取引履歴を監視します。 - 該当する場合は決済、[融資タイプ](https://docs.stripe.com/capital/how-capital-for-platforms-works.md#types-of-financing-offers) 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/embedded-component-integration.md#enable-automatic-offers)、[導入を Stripe に提出して審査を受ける](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md#submit-for-review)必要があります。 - [コンポーネントをレンダリング](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.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` を指定して、融資コンポーネントを有効にします。 ```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][enabled]=true" ``` ## コンポーネントをレンダリングする Capital の融資コンポーネントをフロントエンドに表示します。 #### JavaScript ```js // Include this element in your HTML const capitalFinancing = stripeConnectInstance.create('capital-financing'); container.appendChild(capitalFinancing); ``` #### HTML + JS | メソッド | タイプ | 説明 | デフォルト | | -------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | | `setDefaultFinancingOffer` | `string` | コンポーネントの初回読み込みで表示する [融資オファー](https://docs.stripe.com/api/capital/financing_offers.md) ID。未指定の場合は、アクティブまたは最新の融資情報が表示されます。 | | | `setShowFinancingSelector` | `boolean` | true の場合、融資ドロップダウンセレクターを表示して、表示される融資を連結アカウントで変更できるようにします。 | `true` | | `setOnFinancingsLoaded` | `({total: number}) => void` | コンポーネントで連結アカウントの融資履歴が読み込まれました。 | | | `setSupportUrl` | `string` | サポートサイトの絶対 URL。 | `https://support.stripe.com/` | | `setHowCapitalWorksUrl` | `string` | Capital プログラムに関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-stripe-capital-works` | #### React | React プロパティ | タイプ | 説明 | デフォルト | 必須または任意 | | ----------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------- | | `defaultFinancingOffer` | `string` | コンポーネントの初回読み込みで表示する [融資オファー](https://docs.stripe.com/api/capital/financing_offers.md) ID。未指定の場合は、アクティブまたは最新の融資情報が表示されます。 | `null` | 任意 | | `showFinancingSelector` | `boolean` | true の場合、融資ドロップダウンセレクターを表示して、表示される融資を連結アカウントで変更できるようにします。 | `true` | 任意 | | `onFinancingsLoaded` | `({total: number}) => void` | コンポーネントで連結アカウントの融資履歴が読み込まれました。 | | 任意 | | `supportUrl` | `string` | サポートサイトの絶対 URL。 | `https://support.stripe.com/` | 任意 | | `howCapitalWorksUrl` | `string` | Capital プログラムに関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-stripe-capital-works` | 任意 | ## コンポーネントのスタイル設定とカスタマイズ [埋め込みコンポーネントをカスタマイズ](https://docs.stripe.com/connect/customize-connect-embedded-components.md)して、コンポーネントのフォント、色、UI スタイルをプラットフォームのブランディングに合わせます。 ## 表示状態を設定する 融資コンポーネントは、連結アカウントが決済・入金レポートを確認する既存のページ、または専用の **融資** ページに配置します。 融資コンポーネントは、連結アカウントの融資ステータスに基づいて動的にコンテンツを表示します。 - **融資履歴なし**: 連結アカウントにオファーがあっても、まだ承認または適用されていない場合、融資コンポーネントには何も表示されません。`onFinancingsLoaded` イベントをリッスンして、この状態の融資コンポーネントにカスタムメッセージを表示するか、融資データが使用可能になるまで融資コンポーネントを非表示にします。 - **審査中のオファー**: 対象の連結アカウントが融資オファーを受諾・申し込み後、オファー承認待ちの間に申し込み状況トラッカーを表示するため、このステータスでコンポーネントをレンダリングします。 ## 読み込みエラーを処理する コンポーネントをレンダリングしたら、[読み込みエラーの処理](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 で利用できる埋め込みコンポーネントの 1 つです。埋め込みコンポーネントの詳細については、[Capital 埋め込みコンポーネントの設定](https://docs.stripe.com/capital/embedded-component-integration.md) ガイドをご覧ください。 ## See also - [Capital 組み込みコンポーネントを設定する](https://docs.stripe.com/capital/embedded-component-integration.md)