Заявете ранен достъп

Посочете името си и имейл адрес или телефонен номер. Ще Ви изпратим информация за достъп до Tajo.

На тази страница

Вградени Stripe Apps

Вградените Stripe Apps позволяват на платформите, изградени върху Stripe Connect, да показват функционалността на приложения от трети страни директно в собствените си табла. С вградените компоненти на Connect можете да дадете на свързаните акаунти достъп до приложения като QuickBooks, Xero и Mailchimp, без те да е нужно да посещават таблото на Stripe.

Преглед

Вградените приложения използват два ключови вградени компонента на Connect:

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

Това позволява на операторите на платформи да вграждат счетоводни, маркетингови и оперативни инструменти директно в продукта си.

Поддържани приложения

Следните приложения поддържат вграждане чрез компонентите на Connect:

Приложение	Категория	Случай на употреба
QuickBooks	Счетоводство	Синхронизиране на плащания и фактури към QuickBooks
Xero	Счетоводство	Автоматизирано счетоводство и равнение
Mailchimp	Маркетинг	Синхронизиране на клиентски данни за имейл кампании
Собствени приложения	Всякаква	Собствените Ви 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 показва конкретен 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

Когато използвате вградени приложения с destination charges (често срещани в платформите на Connect), метаданните на плащането носят структурирани данни, които счетоводните и маркетинговите интеграции могат да използват.

Счетоводни интеграции

За приложения като QuickBooks и Xero метаданните на 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	Идентификатор на клиента в платформата
`customer_email`	string	Имейл на клиента за съпоставяне с фактура или разписка
`product_name`	string	Име на продукта за показване в редовете на документа
`product_id`	string	Идентификатор на продукта в Stripe
`quantity`	string	Количество на артикула
`unit_amount`	string	Единична цена в най-малката парична единица (стотинки)
`currency`	string	Трибуквен код на валутата по ISO
`platform_fee`	string	Размер на таксата на приложението в най-малката парична единица
`platform_fee_currency`	string	Валута на таксата на платформата
`tax_amount`	string	Размер на данъка в най-малката парична единица
`tax_rate_id`	string	Идентификатор на приложената данъчна ставка в Stripe
`invoice_id`	string	Идентификатор на свързаната фактура
`order_id`	string	Вътрешен идентификатор на поръчката в платформата

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

За приложения като 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 изтичат: създавайте нови сесии при нужда, не кеширайте клиентските тайни ключове
Контрол на обхвата: използвайте 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

Схема на метаданните при destination charge

Счетоводни интеграции

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

Пример за интеграция в платформа

Съображения за сигурност

Заявете ранен достъп

Благодарим Ви, записването е успешно.