Подайте заявку на ранний доступ

Укажите имя, а также email или номер телефона. Мы отправим Вам информацию о доступе к Tajo.

На этой странице

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

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

Обзор

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

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

Это позволяет операторам платформы встраивать инструменты бухгалтерии, маркетинга и операционной работы прямо в свой продукт.

Поддерживаемые приложения

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

Приложение	Категория	Сценарий
QuickBooks	Бухгалтерия	Синхронизация платежей и счетов с QuickBooks
Xero	Бухгалтерия	Автоматизированный учёт и сверка
Mailchimp	Маркетинг	Синхронизация данных клиентов для email-кампаний
Собственные приложения	Любая	Ваши собственные Stripe Apps, созданные для Вашей платформы

Tip

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

Настройка через Account Sessions API

Чтобы встраивать приложения, нужно создавать Account Sessions с включёнными нужными компонентами:

На сервере: создание 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 отображает конкретный вьюпорт приложения внутри Вашей платформы:

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-платежей

При использовании встроенных приложений с destination-платежами (это обычная схема для Connect-платформ) метаданные платежа несут структурированные данные, которые могут читать бухгалтерские и маркетинговые интеграции.

Бухгалтерские интеграции

Для приложений вроде QuickBooks и Xero метаданные destination-платежа следуют такой схеме:

{
  "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`	строка	Идентификатор клиента на стороне платформы
`customer_email`	строка	Email клиента для сопоставления счетов и чеков
`product_name`	строка	Отображаемое название товара для позиций документа
`product_id`	строка	Идентификатор товара в Stripe
`quantity`	строка	Количество единиц
`unit_amount`	строка	Цена за единицу в минимальных единицах валюты (центах)
`currency`	строка	Трёхбуквенный код валюты по ISO
`platform_fee`	строка	Сумма комиссии приложения в минимальных единицах валюты
`platform_fee_currency`	строка	Валюта комиссии платформы
`tax_amount`	строка	Сумма налога в минимальных единицах валюты
`tax_rate_id`	строка	Идентификатор применённой налоговой ставки Stripe
`invoice_id`	строка	Идентификатор связанного счёта
`order_id`	строка	Внутренний идентификатор заказа на стороне платформы

Маркетинговые интеграции

Для приложений вроде Mailchimp и интеграции 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
Кампании возврата для ушедших клиентов с высоким lifetime_value

Пример интеграции на стороне платформы

Полный пример интеграции платформы со встроенным приложением Tajo для Brevo:

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

Вопросы безопасности

При встраивании приложений в свою платформу учитывайте следующее:

Срок жизни Account Sessions: создавайте новые сессии по мере необходимости, не кэшируйте client secrets
Контроль области доступа: используйте allowed_apps, чтобы ограничить список устанавливаемых приложений
Изоляция данных: данные каждого подключённого аккаунта изолированы, платформа не имеет доступа к данным приложения
Заголовки CSP: убедитесь, что Content Security Policy Вашей платформы разрешает подключения к 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

Схема метаданных destination-платежей

Бухгалтерские интеграции

Маркетинговые интеграции

Пример интеграции на стороне платформы

Вопросы безопасности

Подайте заявку на ранний доступ

Спасибо, подписка оформлена.