コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Capital プロモタイルコンポーネント公開プレビュー

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

Capital プロモーションタイルコンポーネントは、連結アカウントに利用可能な融資オファーを表示します。このガイドでは、Capital プロモーションコンポーネントの小さいタイルバージョンをホワイトラベルのプロモーションとしてプラットフォームのウェブサイトまたはアプリに埋め込む方法について説明します。

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

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

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

はじめに

Capital 埋め込みコンポーネントをインストールする

Stripe SDK (ベータバージョン) をインストールして、非公開プレビュー版のコンポーネントのアカウントセッションを作成します。

Stripe のクライアント側ライブラリ (ベータバージョン) を使用して、非公開プレビュー版のコンポーネントをレンダリングします。

ライブラリをインストールします。

npm install --save @stripe/connect-js@preview

アプリケーションで React を使用している場合は、以下のようにします。

npm install --save @stripe/react-connect-js@preview

Connect.js を設定する

アプリケーションでまだ Stripe の組み込みコンポーネントを使用していない場合は、プロモーションタイルコンポーネントを導入する前に Connect.js を初期化します。

アカウントセッションを作成する

アカウントセッションの作成リクエストで、components パラメーターにcapital_financing_promotionを指定します。

Command Line
curl
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
# This example uses the beta SDK.

curl https://api.stripe.com/v1/account_sessions \
  -u sk_test_26PHem9AhJZvU623DfE1x4sd: \
  -d "account"="{{CONNECTED_ACCOUNT_ID}}" \
  -d "components"='{"capital_financing_promotion": {"enabled": true}}' \
  -H "Stripe-Version: 2025-04-30.basil; embedded_connect_beta=v2;"

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

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

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

promo-tile.js
JavaScript
React
No results
// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);

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

組み込みコンポーネントのデザインをカスタマイズできます。Capital financing promotion コンポーネントは、設計システムに合わせた一連のスタイリングオプションをサポートしています。これにより、プロモーションタイルがサードパーティー要素ではなく、プラットフォームのネイティブ部分のように感じられるようになります。

Connect.js の設定を使用して、色、タイポグラフィ、境界線の半径、その他の視覚要素をカスタマイズできます。また、埋め込みコンポーネントのデザインプレビューツールを使用して、実装前にさまざまなオプションを試すこともできます。

プロモーションタイルに他の組み込みコンポーネントと異なるスタイリングが必要な場合は、より詳細な制御のために、複数の Connect.js インスタンスを初期化できます。このアプローチにより、プラットフォーム全体でコンポーネントごとに異なるデザイン構成を維持できます。

このコンポーネントの追加の構成オプションの詳細については、Capital 融資プロモーションのドキュメントをご覧ください。

表示状態を設定する

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

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

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

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

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

promo-tile.js
JavaScript
React
No results
// 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;
  }
});

コンポーネントを送信してレビューを受ける

本番環境で Capital コンポーネントを使用するには、Stripe と金融パートナーは、Stripe Capital を参照するすべての顧客向けコンテンツをレビューおよび承認する必要があります。

  1. サンドボックスでテストオファーを作成し、オファーのステータスを提供済みに設定します。このテストオファーを使用して、プラットフォームのウェブサイトまたはダッシュボードでアプリケーションコンポーネントをプレビューします。
  2. サンドボックスオファーのプレビューと、組み込みコンポーネントがプラットフォームの UI にどのように表示されるか (スクリーンショットや録画されたビデオなど) をキャプチャーします。
  3. プレビューを Stripe に送信します。承認後、Stripe は本番環境でコンポーネントを使用できるようにします。

参照情報

このページはお役に立ちましたか。
はいいいえ