# Capital プロモタイルコンポーネント

オファーを目立たせて表示することで、Capital プログラムの受入率を増やします。

Capital プロモーションタイルコンポーネントは、連結アカウントに利用可能な融資オファーを表示します。このガイドでは、[Capital プロモーションコンポーネント](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md)の小さいタイルバージョンをホワイトラベルのプロモーションとしてプラットフォームのウェブサイトまたはアプリに埋め込む方法について説明します。

プロモーションタイルは、以下に役立ちます。

- **可視性の向上**: 連結アカウントがビジネス上の意思決定を行う場所に融資オプションを表示し、認知度と申し込み率を向上させます。
- **ギャップを埋める**: メールのみのマーケティングの制限に対処し、正確な金額の事前適格融資オファーを目に見える形で提供します。
- **負担を軽減**: ウェブサイトまたはダッシュボードから申し込みに直接アクセスできるようにします。
- **導入の促進**: 明確な規約で適時にオファーを提示し、行動を動機付けます。
- **ブランディングの維持**: プラットフォームのデザインに合わせてプロモーションタイルをカスタマイズします。
![Furever のプロモーションタイル、Stripe の埋め込みコンポーネントのデモ](https://b.stripecdn.com/docs-statics-srv/assets/embedded-furever-capital-for-platforms-promo-tile.179b301e8ddea70e5501dad40db7e8b4.png)

Furever のプロモーションタイル、Stripe の埋め込みコンポーネントのデモ

## はじめに

- 埋め込みコンポーネントは、アメリカとイギリスの連結アカウントにのみ表示できます。
- Capital を有効化する前に、[自動オファーを有効にし](https://docs.stripe.com/capital/embedded-component-integration.md#enable-automatic-offers)、[導入を Stripe に提出して審査を受ける](https://docs.stripe.com/capital/promotional-tile.md#submit-for-review)必要があります。
- [コンポーネントをレンダリング](https://docs.stripe.com/capital/promotional-tile.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 "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-04-22.preview; embedded_connect_beta=v2;" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[capital_financing_promotion][enabled]=true"
```

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

Capital のプロモーションタイルコンポーネントをフロントエンドに表示します。

`setLayout` メソッドは、`full` 埋め込みコンポーネントと小さい方のバナーのどちらを表示するかを制御します。これにより、コンポーネントの垂直サイズが大幅に縮小され、Web サイトまたはプラットフォームのダッシュボードの他のコンテンツとともにスタックされます。

#### JavaScript

```js
// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);
```

## コンポーネントの外観をカスタマイズする

[埋め込みコンポーネントをカスタマイズ](https://docs.stripe.com/connect/customize-connect-embedded-components.md)して、コンポーネントのフォント、色、UI スタイルをプラットフォームのブランディングに合わせます。

## 表示状態を設定する

メインのホームページや、そのページのサイドバーにプロモーションタイルを追加すると、マーケティング効果が最も高くなります。連結アカウントが頻繁に移動する場所にタイルを配置し、可視性とエンゲージメントを最大化します。さらに、連結アカウントがプラットフォームとどのようにやり取りするかを評価し、ユースケースに最適な場所 (可視性の高いページや意思決定ページなど) を見つけます。

複数のユーザーが連結アカウントにアクセスできる場合は、ログインしているアカウントの所有者または管理者 (融資オファーをレビューして申請できる) にのみプロモーションタイルを表示することを検討してください。

このコンポーネントは、連結アカウントの融資ステータスに基づいて表示が調整されます。

- **有効なオファーあり**: **申し込みを開始** ボタンでオファーの詳細をすべて表示します。
- **進行中の有効な融資**: コンポーネントは表示されません (null を返します)。
- **有効な融資はありません**: 融資プログラムに関する一般的な利用資格情報を表示します。

さらに、対象となる融資オファーがない場合は、プロモーションタイルコンポーネントを完全に非表示にできます。これを行うには、利用可能な `onEligibleFinancingOfferLoaded` コールバックを使用できます。

#### JavaScript

```js
// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);
capitalFinancingPromotion.setOnEligibleFinancingOfferLoaded(({productType}) => {
  switch (productType) {
    case 'none':
      capitalFinancingPromotion.parentElement.style.display = 'none';
      break;
    case 'standard':
    case 'refill':
      capitalFinancingPromotion.parentElement.style.display = 'block';
      break;
  }
});
```

## 読み込みエラーを処理する

コンポーネントをレンダリングしたら、[読み込みエラーの処理](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

- [Capital 組み込みコンポーネントを設定する](https://docs.stripe.com/capital/embedded-component-integration.md)