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

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

• Ruby >=15.5.0-beta.1
• Python >=12.5.0b1
• PHP >=17.6.0-beta.1
• ノード>=18.5.0-beta.1
• .NET >=48.5.0-beta.1
• Java >=29.5.0-beta.1
• 進む >=82.5.0-beta.1

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

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

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

# 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 サイトまたはプラットフォームのダッシュボードの他のコンテンツとともにスタックされます。

// 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 コールバックを使用できます。

// 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 は本番環境でコンポーネントを使用できるようにします。