---
title: "Eingebettete Stripe Apps | Tajo"
description: "Nutze Connect Embedded Components, um Stripe Apps in deine eigene Plattform zu integrieren"
url: https://tajo.io/de/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/de/docs/stripe-apps/embedded-apps.md
lang: de-DE
author: "Set Noa"
author_url: https://tajo.io/de/set-noa/
robots: noindex
---

Beantrage frühzeitigen Zugang

Gib deinen Vornamen und deine geschäftliche E-Mail-Adresse ein. Wir senden dir einen Link, mit dem du deine Anfrage für den Tajo-Zugang bestätigst.

# Eingebettete Stripe Apps

[Set Noa](https://tajo.io/de/set-noa/)

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.

Caution

**Status: geplant, nicht gebaut.** Tajo hat keine Stripe App, daher lässt sich nichts in diesem Abschnitt heute installieren. Die App-Kennungen, URLs und Zugangsdaten auf dieser Seite sind illustrative Platzhalter, keine echten Endpunkte.

## Ü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

```javascript
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

```javascript
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

```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

```tsx
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

```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

```tsx
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:

```json
{
  "metadata": {
    "customer_id": "cus_platform_customer_id",
    "customer_email": "customer@example.com",
    "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:

```json
{
  "metadata": {
    "customer_id": "cus_xxxxx",
    "customer_email": "customer@example.com",
    "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:

```tsx
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.