On this page

Встроенные Stripe Apps

Встроенные Stripe Apps позволяют платформам на Stripe Connect предоставлять функциональность сторонних приложений непосредственно в своих дашбордах. Используя встроенные компоненты Connect, вы можете дать подключённым аккаунтам доступ к приложениям без необходимости посещения Stripe Dashboard.

Обзор

Встроенные приложения используют два ключевых компонента Connect:

app-install: Рендерит кнопку установки Stripe App в вашем UI платформы
app-viewport: Рендерит конкретный вьюпорт приложения в вашем UI платформы

Tip

Интеграция Tajo Brevo может быть встроена в Connect-платформы, позволяя подключённым аккаунтам синхронизировать данные Stripe с Brevo через интерфейс самой платформы.

Настройка с Account Sessions API

Серверная часть: Создание 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

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);
  showAppViewport();
});

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

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

Схема метаданных для маркетинговых интеграций

Для приложений маркетинга, таких как интеграция Tajo Brevo, метаданные включают поля для сегментации покупателей и таргетинга кампаний:

{
  "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
Win-back кампании для клиентов с высоким lifetime_value

Соображения безопасности

При встраивании приложений в вашу платформу:

Account Sessions истекают: Создавайте новые сессии по мере необходимости; не кэшируйте client secrets
Контроль области: Используйте allowed_apps для ограничения устанавливаемых приложений
Изоляция данных: Данные каждого подключённого аккаунта изолированы
Заголовки CSP: Убедитесь, что политика безопасности контента вашей платформы разрешает подключения к https://connect-js.stripe.com

Caution

Встроенные компоненты приложений требуют интеграции Connect с доступом к Account Sessions API. Стандартные аккаунты Stripe не могут использовать встроенные компоненты.

Встроенные Stripe Apps

Обзор

Настройка с Account Sessions API

Серверная часть: Создание Account Session

Клиентская часть: Инициализация Connect.js

Компонент App Install

JavaScript

React

Компонент App Viewport

JavaScript

React

Схема метаданных для маркетинговых интеграций

Соображения безопасности

Subscribe to updates

Thanks — you're subscribed.