先行利用を申し込む

お名前とメールアドレスまたは電話番号をご入力ください。Tajo のアクセス方法をご案内します。

このページの内容

埋め込み型 Stripe Apps

埋め込み型 Stripe Apps を使うと、Stripe Connect 上に構築したプラットフォームが、サードパーティ App の機能を自社のダッシュボード内に直接表示できます。Connect の埋め込みコンポーネントを使えば、接続アカウントは Stripe Dashboard を開かなくても QuickBooks、Xero、Mailchimp などの App を利用できます。

概要

埋め込み型 App は、2 つの Connect 埋め込みコンポーネントを使います。

app-install: プラットフォームの UI 内に Stripe App のインストールボタンを表示します
app-viewport: プラットフォームの UI 内に特定の App の viewport を表示します

これにより、プラットフォーム運営者は会計、マーケティング、業務系のツールを自社プロダクトに直接埋め込めます。

対応している App

次の App が Connect コンポーネントによる埋め込みに対応しています。

App	カテゴリー	ユースケース
QuickBooks	会計	支払いと請求書を QuickBooks に同期します
Xero	会計	記帳と照合を自動化します
Mailchimp	マーケティング	メールキャンペーン向けに顧客データを同期します
Custom Apps	任意	自社プラットフォーム向けに構築した独自の Stripe Apps

Tip

Tajo Brevo 連携は Connect プラットフォームに埋め込めます。接続アカウントは、プラットフォーム自身の画面から Stripe のデータを Brevo へ同期できます。

Account Sessions API を使ったセットアップ

App を埋め込むには、必要なコンポーネントを有効にした Account Session を作成します。

サーバー側: Account Session を作成する

const stripe = require('stripe')('sk_live_...');

// Create an Account Session for the connected account
const accountSession = await stripe.accountSessions.create({
  account: 'acct_connected_account_id',
  components: {
    // Enable app install component
    app_install: {
      enabled: true,
      features: {
        allowed_apps: [
          'com.tajo.brevo-integration',
          'com.quickbooks.stripe-app'
        ],
      },
    },
    // Enable app viewport component
    app_viewport: {
      enabled: true,
      features: {
        allowed_apps: [
          'com.tajo.brevo-integration'
        ],
      },
    },
  },
});

// Return the client secret to your frontend
res.json({ clientSecret: accountSession.client_secret });

クライアント側: Connect.js を初期化する

import { loadConnectAndInitialize } from '@stripe/connect-js';

// Initialize Connect.js with the account session
const stripeConnect = loadConnectAndInitialize({
  publishableKey: 'pk_live_...',
  fetchClientSecret: async () => {
    const response = await fetch('/api/account-session', {
      method: 'POST',
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  },
});

App Install コンポーネント

app-install コンポーネントは、接続アカウントが Stripe App をインストールするためのボタンを表示します。

JavaScript

// Create the app install element
const appInstall = stripeConnect.create('app-install');

// Set the app to install
appInstall.setApp('com.tajo.brevo-integration');

// Mount to a DOM element
const container = document.getElementById('app-install-container');
appInstall.mount(container);

// Listen for install events
appInstall.on('app_installed', (event) => {
  console.log('App installed:', event.app_id);
  // Show the app viewport after installation
  showAppViewport();
});

appInstall.on('app_uninstalled', (event) => {
  console.log('App uninstalled:', event.app_id);
});

React

import {
  ConnectAppInstall,
  ConnectComponentsProvider,
} from '@stripe/react-connect-js';

const AppInstallButton = () => {
  return (
    <ConnectComponentsProvider connectInstance={stripeConnect}>
      <ConnectAppInstall
        app="com.tajo.brevo-integration"
        onAppInstalled={(event) => {
          console.log('App installed:', event.app_id);
        }}
        onAppUninstalled={(event) => {
          console.log('App uninstalled:', event.app_id);
        }}
      />
    </ConnectComponentsProvider>
  );
};

App Viewport コンポーネント

app-viewport コンポーネントは、プラットフォーム内に特定の App の viewport を表示します。

JavaScript

// Create the app viewport element
const appViewport = stripeConnect.create('app-viewport');

// Configure the viewport
appViewport.setApp('com.tajo.brevo-integration');
appViewport.setViewport('stripe.dashboard.customer.detail');

// Pass object context (e.g., customer ID)
appViewport.setObjectContext({
  id: 'cus_xxxxx',
  object: 'customer',
});

// Mount to a DOM element
const container = document.getElementById('app-viewport-container');
appViewport.mount(container);

React

import {
  ConnectAppViewport,
  ConnectComponentsProvider,
} from '@stripe/react-connect-js';

const BrevoCustomerView = ({ customerId }: { customerId: string }) => {
  return (
    <ConnectComponentsProvider connectInstance={stripeConnect}>
      <ConnectAppViewport
        app="com.tajo.brevo-integration"
        viewport="stripe.dashboard.customer.detail"
        objectContext={{
          id: customerId,
          object: 'customer',
        }}
      />
    </ConnectComponentsProvider>
  );
};

Destination Charge のメタデータスキーマ

Connect プラットフォームでよく使われる destination charge と埋め込み型 App を組み合わせると、charge のメタデータが構造化データを保持し、会計やマーケティングの連携がそれを利用できます。

会計系の連携

QuickBooks や Xero のような App では、destination charge のメタデータは次のスキーマに従います。

{
  "metadata": {
    "customer_id": "cus_platform_customer_id",
    "customer_email": "[email protected]",
    "product_name": "Premium Subscription",
    "product_id": "prod_xxxxx",
    "quantity": "1",
    "unit_amount": "4999",
    "currency": "usd",
    "platform_fee": "500",
    "platform_fee_currency": "usd",
    "tax_amount": "450",
    "tax_rate_id": "txr_xxxxx",
    "invoice_id": "inv_xxxxx",
    "order_id": "order_12345"
  }
}

フィールド	型	説明
`customer_id`	string	プラットフォーム側の顧客 ID
`customer_email`	string	請求書やレシートの突き合わせに使う顧客のメールアドレス
`product_name`	string	明細に表示する商品名
`product_id`	string	Stripe の商品 ID
`quantity`	string	数量
`unit_amount`	string	通貨の最小単位 (セント) での単価
`currency`	string	3 文字の ISO 通貨コード
`platform_fee`	string	通貨の最小単位でのアプリケーション手数料
`platform_fee_currency`	string	プラットフォーム手数料の通貨
`tax_amount`	string	通貨の最小単位での税額
`tax_rate_id`	string	適用された Stripe の税率 ID
`invoice_id`	string	紐づく請求書の ID
`order_id`	string	プラットフォーム内部の注文 ID

マーケティング系の連携

Mailchimp や Tajo Brevo 連携のような App では、このメタデータが顧客のセグメンテーションとキャンペーンのターゲティングを可能にします。

{
  "metadata": {
    "customer_id": "cus_xxxxx",
    "customer_email": "[email protected]",
    "customer_name": "Jane Smith",
    "product_category": "subscription",
    "product_name": "Pro Plan",
    "purchase_value": "4999",
    "currency": "usd",
    "is_first_purchase": "true",
    "referral_source": "partner_campaign",
    "subscription_interval": "monthly",
    "lifetime_value": "29994"
  }
}

このメタデータを使うと、次のような Brevo の自動化が実現できます。

初回購入者向けのウェルカムシリーズ (is_first_purchase: "true")
product_category と purchase_value に基づくアップセルキャンペーン
subscription_interval に基づく、サブスクリプション顧客向けの継続フロー
解約した lifetime_value の高い顧客を狙うウィンバックキャンペーン

プラットフォーム連携の実装例

Tajo Brevo App を埋め込んだ、プラットフォーム連携の完全な例です。

import { useState, useEffect } from 'react';
import {
  ConnectAppInstall,
  ConnectAppViewport,
  ConnectComponentsProvider,
} from '@stripe/react-connect-js';
import { loadConnectAndInitialize } from '@stripe/connect-js';

const TajoBrevoPlatformIntegration = ({ connectedAccountId, customerId }) => {
  const [stripeConnect, setStripeConnect] = useState(null);
  const [isInstalled, setIsInstalled] = useState(false);

  useEffect(() => {
    const instance = loadConnectAndInitialize({
      publishableKey: 'pk_live_...',
      fetchClientSecret: async () => {
        const res = await fetch('/api/account-session', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ accountId: connectedAccountId }),
        });
        const { clientSecret } = await res.json();
        return clientSecret;
      },
    });
    setStripeConnect(instance);
  }, [connectedAccountId]);

  if (!stripeConnect) return <div>Loading...</div>;

  return (
    <ConnectComponentsProvider connectInstance={stripeConnect}>
      {!isInstalled ? (
        <div>
          <h3>Connect Brevo via Tajo</h3>
          <p>Install the Tajo integration to sync customer data with Brevo.</p>
          <ConnectAppInstall
            app="com.tajo.brevo-integration"
            onAppInstalled={() => setIsInstalled(true)}
          />
        </div>
      ) : (
        <div>
          <h3>Brevo Customer Profile</h3>
          <ConnectAppViewport
            app="com.tajo.brevo-integration"
            viewport="stripe.dashboard.customer.detail"
            objectContext={{
              id: customerId,
              object: 'customer',
            }}
          />
        </div>
      )}
    </ConnectComponentsProvider>
  );
};

セキュリティ上の注意点

自社プラットフォームに App を埋め込むときは、次の点に注意します。

Account Session には有効期限があります: 必要に応じて新しいセッションを作成し、client secret はキャッシュしないでください
スコープの制御: allowed_apps を使って、インストールできる App を限定します
データの分離: 接続アカウントごとにデータは分離され、プラットフォームは App のデータにアクセスできません
CSP ヘッダー: プラットフォームの Content Security Policy が https://connect-js.stripe.com への接続を許可していることを確認します

Caution

埋め込み型 App のコンポーネントを使うには、Account Sessions API を利用できる Connect 連携が必要です。通常の Stripe アカウントでは埋め込みコンポーネントを使えません。

埋め込み型 Stripe Apps

概要

対応している App

Account Sessions API を使ったセットアップ

サーバー側: Account Session を作成する

クライアント側: Connect.js を初期化する

App Install コンポーネント

JavaScript

React

App Viewport コンポーネント

JavaScript

React

Destination Charge のメタデータスキーマ

会計系の連携

マーケティング系の連携

プラットフォーム連携の実装例

セキュリティ上の注意点

先行利用を申し込む

ありがとうございます。リクエストを受け付けました。