# 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 の融資コンポーネントにご興味がおありですか？

Enter your email to request access.

```bash
curl https://docs.stripe.com/preview/register \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Referer: https://docs.stripe.com/connect/supported-embedded-components/capital-financing" \
  -d '{"email": "EMAIL", "preview": "capital_review_preview"}'
```

## はじめに

- 組み込みコンポーネントは、アメリカ (US)、イギリス (GB)、フランス (FR)、ドイツ (DE)、オーストラリア (AU)、カナダ (CA) の連結アカウントに表示できます。
- 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 "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-09-30.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` | デフォルトで表示する [FinancingOffer](https://docs.stripe.com/api/capital/financing_offers.md) の ID。省略されている場合や、一致する資金調達がない場合、コンポーネントには有効な資金調達または最新の資金調達が表示されます。 |  |
| `setShowFinancingSelector` | `boolean` | 資金調達ステータスの表示を制御します。
- true の場合、コンポーネントには**現在**タブと**過去**タブが表示され、**アクティビティ**タブにはすべての資金調達にわたる取引が含まれます。
- false の場合、コンポーネントで**現在**タブと**過去**タブが非表示になり、**アクティビティ**タブには選択した資金調達の取引のみが表示されます。
- 却下または取り消された資金調達の場合、この設定に関係なく、コンポーネントには**過去**タブのみが表示されます。
- **現在**タブも**過去**タブもないレイアウトでは、この設定に関係なく、選択した資金調達の取引のみが**アクティビティ**タブに表示されます。 | `true` |
| `setOnFinancingsLoaded` | `({total: number}) => void` | コンポーネントで連結アカウントの融資履歴が読み込まれました。 |  |
| `setSupportUrl` | `string` | 連結アカウントに表示されるサポートリンクの URL です。デフォルトでは Stripe Capital のサポートメールアドレスになります。 | `mailto:capital-support@stripe.com` |
| `setHowCapitalWorksUrl` | `string` | Capital プログラムに関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-stripe-capital-works` |

#### React

| React プロパティ | タイプ | 説明 | デフォルト | 必須または任意 |
| --- | --- | --- | --- | --- |
| `defaultFinancingOffer` | `string` | デフォルトで表示する [FinancingOffer](https://docs.stripe.com/api/capital/financing_offers.md) の ID。省略されている場合や、一致する資金調達がない場合、コンポーネントには有効な資金調達または最新の資金調達が表示されます。 | `null` | 任意 |
| `showFinancingSelector` | `boolean` | 資金調達ステータスの表示を制御します。
- true の場合、コンポーネントには**現在**タブと**過去**タブが表示され、**アクティビティ**タブにはすべての資金調達にわたる取引が含まれます。
- false の場合、コンポーネントで**現在**タブと**過去**タブが非表示になり、**アクティビティ**タブには選択した資金調達の取引のみが表示されます。
- 却下または取り消された資金調達の場合、この設定に関係なく、コンポーネントには**過去**タブのみが表示されます。
- **現在**タブも**過去**タブもないレイアウトでは、この設定に関係なく、選択した資金調達の取引のみが**アクティビティ**タブに表示されます。 | `true` | 任意 |
| `onFinancingsLoaded` | `({total: number}) => void` | コンポーネントで連結アカウントの融資履歴が読み込まれました。 |  | 任意 |
| `supportUrl` | `string` | 連結アカウントに表示されるサポートリンクの URL です。デフォルトでは Stripe Capital のサポートメールアドレスになります。 | `mailto:capital-support@stripe.com` | 任意 |
| `howCapitalWorksUrl` | `string` | Capital プログラムに関する情報が掲載されたページの絶対 URL。 | `https://docs.stripe.com/capital/how-stripe-capital-works` | 任意 |

単一の資金調達ビューを表示するには、(HTML + JS を使用する場合は) `setDefaultFinancingOffer(...)` と `setShowFinancingSelector(false)` を呼び出すか、(React を使用する場合) `defaultFinancingOffer` と `showFinancingSelector={false}` を設定します。

- ほとんどの資金調達ステータスにおいて、この設定では**アクティビティ**タブのみが表示され、取引リストの表示範囲は選択された資金調達に限定されます。
- デュアルマーチャントファイナンスを利用する連結アカウントで、`defaultFinancingOffer` が省略されているか利用できない場合、コンポーネントにはデュアルマーチャントファイナンスが表示されます。
- 却下または取り消された資金調達の場合、コンポーネントには**過去**タブのみが表示されます。

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

[埋め込みコンポーネントをカスタマイズ](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` に設定します。このテストオファーを使用して、プラットフォームのウェブサイトまたはダッシュボードでアプリケーションコンポーネントをプレビューします。
2. サンドボックスオファーのプレビューと、組み込みコンポーネントがプラットフォームの UI にどのように表示されるか (スクリーンショットや録画されたビデオなど) をキャプチャーします。
3. [プレビューを 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)