---
title: "埋め込み型 Stripe Apps | Tajo"
description: "Connect の埋め込みコンポーネントを使って、自社プラットフォームに Stripe Apps を組み込みます"
url: https://tajo.io/jp/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/jp/docs/stripe-apps/embedded-apps.md
lang: ja-JP
author: "Set Noa"
author_url: https://tajo.io/jp/set-noa/
robots: noindex
---

先行利用を申し込む

お名前と会社のメールアドレスを入力してください。Tajoへのアクセス申請を確認するためのリンクをメールでお送りします。

# 埋め込み型 Stripe Apps

[Set Noa](https://tajo.io/jp/set-noa/)

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

Caution

**ステータス: 予定、未構築です。** Tajo には Stripe App がないため、このセクションの内容は現時点で何もインストールできません。このページに登場するアプリ識別子、URL、認証情報はすべて説明用のプレースホルダーであり、実際に動作するエンドポイントではありません。

## 概要

埋め込み型 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 を作成する

```javascript
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 を初期化する

```javascript
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

```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

```tsx
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

```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

```tsx
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 のメタデータは次のスキーマに従います。

```json
{
  "metadata": {
    "customer_id": "cus_platform_customer_id",
    "customer_email": "customer@example.com",
    "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 では、このメタデータが顧客のセグメンテーションとキャンペーンのターゲティングを可能にします。

```json
{
  "metadata": {
    "customer_id": "cus_xxxxx",
    "customer_email": "customer@example.com",
    "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 を埋め込んだ、プラットフォーム連携の完全な例です。

```tsx
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 アカウントでは埋め込みコンポーネントを使えません。