Beantrage frühzeitigen Zugang

Gib deinen Vornamen und eine E-Mail-Adresse oder Telefonnummer an. Wir melden uns mit den Details zum Tajo-Zugang bei dir.

Auf dieser Seite

Eingebettete Stripe Apps

Eingebettete Stripe Apps erlauben es Plattformen auf Basis von Stripe Connect, Funktionen von Drittanbieter-Apps direkt in ihren eigenen Dashboards anzubieten. Mit Connect Embedded Components gibst du deinen verbundenen Konten Zugriff auf Apps wie QuickBooks, Xero und Mailchimp, ohne dass sie dafür das Stripe Dashboard aufrufen müssen.

Überblick

Eingebettete Apps nutzen zwei zentrale Connect Embedded Components:

app-install: Rendert eine Schaltfläche zur Installation einer Stripe App in der Oberfläche deiner Plattform
app-viewport: Rendert einen bestimmten App-Viewport in der Oberfläche deiner Plattform

Damit können Plattformbetreiber Tools für Buchhaltung, Marketing und Betrieb direkt in ihr Produkt einbetten.

Unterstützte Apps

Die folgenden Apps unterstützen die Einbettung über Connect Components:

App	Kategorie	Anwendungsfall
QuickBooks	Buchhaltung	Zahlungen und Rechnungen mit QuickBooks synchronisieren
Xero	Buchhaltung	Automatisierte Buchhaltung und Abstimmung
Mailchimp	Marketing	Kundendaten für E-Mail-Kampagnen synchronisieren
Eigene Apps	Beliebig	Deine eigenen Stripe Apps für deine Plattform

Tip

Die Tajo-Integration für Brevo lässt sich in Connect-Plattformen einbetten. Verbundene Konten synchronisieren ihre Stripe-Daten dann über die Oberfläche der Plattform selbst nach Brevo.

Einrichtung mit der Account Sessions API

Um Apps einzubetten, erstellst du Account Sessions mit den passenden aktivierten Komponenten:

Serverseitig: Account Session erstellen

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

Clientseitig: Connect.js initialisieren

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

Komponente app-install

Die Komponente app-install rendert eine Schaltfläche, mit der verbundene Konten eine Stripe App installieren können:

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

Komponente app-viewport

Die Komponente app-viewport rendert einen bestimmten App-Viewport innerhalb deiner Plattform:

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

Metadaten-Schema für Destination Charges

Bei eingebetteten Apps mit Destination Charges, wie sie in Connect-Plattformen üblich sind, transportieren die Metadaten der Zahlung strukturierte Daten, die Buchhaltungs- und Marketing-Integrationen auswerten können.

Buchhaltungs-Integrationen

Für Apps wie QuickBooks und Xero folgen die Metadaten einer Destination Charge diesem Schema:

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

Feld	Typ	Beschreibung
`customer_id`	string	Kundenkennung der Plattform
`customer_email`	string	E-Mail-Adresse der Kundschaft zum Abgleich von Rechnung und Beleg
`product_name`	string	Anzeigename des Produkts für Positionen
`product_id`	string	Produkt-ID in Stripe
`quantity`	string	Menge der Position
`unit_amount`	string	Einzelpreis in der kleinsten Währungseinheit (Cent)
`currency`	string	Dreistelliger ISO-Währungscode
`platform_fee`	string	Höhe der Anwendungsgebühr in der kleinsten Währungseinheit
`platform_fee_currency`	string	Währung der Plattformgebühr
`tax_amount`	string	Steuerbetrag in der kleinsten Währungseinheit
`tax_rate_id`	string	ID des angewendeten Stripe-Steuersatzes
`invoice_id`	string	ID der zugehörigen Rechnung
`order_id`	string	Interne Bestellkennung der Plattform

Marketing-Integrationen

Für Apps wie Mailchimp und die Tajo-Integration für Brevo ermöglichen die Metadaten Segmentierung und gezielte Kampagnen:

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

Diese Metadaten ermöglichen Brevo-Automationen wie:

Willkommensserien für Erstkäufer:innen (is_first_purchase: "true")
Upsell-Kampagnen auf Basis von product_category und purchase_value
Bindungsstrecken für Abo-Kundschaft auf Basis von subscription_interval
Rückgewinnungs-Kampagnen für abgewanderte Kundschaft mit hohem lifetime_value

Beispiel für eine Plattform-Integration

Eine vollständige Plattform-Integration, die die Tajo-App für Brevo einbettet:

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

Sicherheitsaspekte

Wenn du Apps in deine Plattform einbettest:

Account Sessions laufen ab: Erstelle bei Bedarf neue Sessions und speichere Client Secrets nicht zwischen
Umfang steuern: Nutze allowed_apps, um einzugrenzen, welche Apps installiert werden dürfen
Datentrennung: Die Daten jedes verbundenen Kontos bleiben isoliert, die Plattform kann nicht auf App-Daten zugreifen
CSP-Header: Stelle sicher, dass die Content Security Policy deiner Plattform Verbindungen zu https://connect-js.stripe.com erlaubt

Caution

Eingebettete App-Komponenten setzen eine Connect-Integration mit Zugriff auf die Account Sessions API voraus. Standard-Stripe-Konten können keine eingebetteten Komponenten nutzen.

Eingebettete Stripe Apps

Überblick

Unterstützte Apps

Einrichtung mit der Account Sessions API

Serverseitig: Account Session erstellen

Clientseitig: Connect.js initialisieren

Komponente app-install

JavaScript

React

Komponente app-viewport

JavaScript

React

Metadaten-Schema für Destination Charges

Buchhaltungs-Integrationen

Marketing-Integrationen

Beispiel für eine Plattform-Integration

Sicherheitsaspekte

Beantrage frühzeitigen Zugang

Danke, du hast die Updates abonniert.