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

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

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

プロモーションタイルを使用すると、以下のメリットが得られます。

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

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

## はじめに

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