Poproś o wcześniejszy dostęp

Podaj imię oraz adres e-mail lub numer telefonu. Wyślemy Ci informacje o dostępie do Tajo.

Na tej stronie

Osadzone aplikacje Stripe

Osadzone aplikacje Stripe pozwalają platformom zbudowanym na Stripe Connect udostępniać funkcje aplikacji zewnętrznych bezpośrednio we własnych panelach. Dzięki osadzonym komponentom Connect możesz dać połączonym kontom dostęp do aplikacji takich jak QuickBooks, Xero czy Mailchimp, bez konieczności odwiedzania panelu Stripe.

Przegląd

Osadzone aplikacje korzystają z dwóch kluczowych komponentów Connect:

app-install: renderuje przycisk instalacji aplikacji Stripe w interfejsie Twojej platformy
app-viewport: renderuje konkretny widok aplikacji w interfejsie Twojej platformy

Dzięki temu operatorzy platform mogą osadzać narzędzia księgowe, marketingowe i operacyjne bezpośrednio w swoim produkcie.

Obsługiwane aplikacje

Następujące aplikacje można osadzać przez komponenty Connect:

Aplikacja	Kategoria	Zastosowanie
QuickBooks	Księgowość	Synchronizacja płatności i faktur do QuickBooks
Xero	Księgowość	Zautomatyzowana księgowość i uzgadnianie płatności
Mailchimp	Marketing	Synchronizacja danych klientów na potrzeby kampanii emailowych
Aplikacje własne	Dowolna	Twoje własne aplikacje Stripe zbudowane dla Twojej platformy

Tip

Integrację Tajo z Brevo można osadzić w platformach Connect, dzięki czemu połączone konta synchronizują swoje dane ze Stripe do Brevo przez interfejs samej platformy.

Konfiguracja z użyciem Account Sessions API

Aby osadzić aplikacje, musisz utworzyć sesje konta (Account Sessions) z włączonymi odpowiednimi komponentami:

Po stronie serwera: utwórz sesję konta

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

Po stronie klienta: zainicjuj 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;
  },
});

Komponent instalacji aplikacji

Komponent app-install renderuje przycisk instalacji, za pomocą którego połączone konta instalują aplikację Stripe:

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

Komponent widoku aplikacji

Komponent app-viewport renderuje konkretny widok aplikacji wewnątrz Twojej platformy:

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

Schemat metadanych opłat docelowych

Przy korzystaniu z osadzonych aplikacji razem z opłatami docelowymi (destination charges), częstymi na platformach Connect, metadane opłaty niosą ustrukturyzowane dane, które mogą wykorzystać integracje księgowe i marketingowe.

Integracje księgowe

W przypadku aplikacji takich jak QuickBooks i Xero metadane opłaty docelowej mają następujący schemat:

{
  "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"
  }
}

Pole	Typ	Opis
`customer_id`	string	Identyfikator klienta w systemie platformy
`customer_email`	string	Adres email klienta do dopasowania faktury lub paragonu
`product_name`	string	Wyświetlana nazwa produktu dla pozycji na dokumencie
`product_id`	string	Identyfikator produktu w Stripe
`quantity`	string	Liczba sztuk
`unit_amount`	string	Cena jednostkowa w najmniejszej jednostce waluty (grosze)
`currency`	string	Trzyliterowy kod waluty ISO
`platform_fee`	string	Kwota prowizji aplikacji w najmniejszej jednostce waluty
`platform_fee_currency`	string	Waluta prowizji platformy
`tax_amount`	string	Kwota podatku w najmniejszej jednostce waluty
`tax_rate_id`	string	Identyfikator zastosowanej stawki podatku w Stripe
`invoice_id`	string	Identyfikator powiązanej faktury
`order_id`	string	Wewnętrzny identyfikator zamówienia w platformie

Integracje marketingowe

W przypadku aplikacji takich jak Mailchimp oraz integracji Tajo z Brevo metadane umożliwiają segmentację klientów i precyzyjne kierowanie kampanii:

{
  "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"
  }
}

Te metadane pozwalają uruchamiać w Brevo automatyzacje takie jak:

Seria powitalna dla kupujących po raz pierwszy (is_first_purchase: "true")
Kampanie upsellowe oparte na product_category i purchase_value
Ścieżki retencyjne dla klientów subskrypcyjnych na podstawie subscription_interval
Kampanie odzyskujące kierowane do odchodzących klientów o wysokiej wartości lifetime_value

Przykład integracji z platformą

Kompletna integracja platformy osadzająca aplikację Tajo dla 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>
  );
};

Kwestie bezpieczeństwa

Osadzając aplikacje we własnej platformie, pamiętaj o kilku zasadach:

Sesje konta wygasają: twórz nowe sesje w miarę potrzeb i nie buforuj kluczy client secret
Kontrola zakresu: użyj allowed_apps, aby ograniczyć listę aplikacji możliwych do zainstalowania
Izolacja danych: dane każdego połączonego konta są odizolowane, a platforma nie ma dostępu do danych aplikacji
Nagłówki CSP: upewnij się, że polityka Content Security Policy Twojej platformy zezwala na połączenia z https://connect-js.stripe.com

Caution

Komponenty osadzonych aplikacji wymagają integracji Connect z dostępem do Account Sessions API. Standardowe konta Stripe nie mogą korzystać z osadzonych komponentów.

Osadzone aplikacje Stripe

Przegląd

Obsługiwane aplikacje

Konfiguracja z użyciem Account Sessions API

Po stronie serwera: utwórz sesję konta

Po stronie klienta: zainicjuj Connect.js

Komponent instalacji aplikacji

JavaScript

React

Komponent widoku aplikacji

JavaScript

React

Schemat metadanych opłat docelowych

Integracje księgowe

Integracje marketingowe

Przykład integracji z platformą

Kwestie bezpieczeństwa

Poproś o wcześniejszy dostęp

Dziękujemy, jesteś już na liście.