---
title: "Ingebedde Stripe Apps | Tajo"
description: "Gebruik de embedded components van Connect om Stripe Apps in je eigen platform te integreren"
url: https://tajo.io/nl/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/nl/docs/stripe-apps/embedded-apps.md
lang: nl-NL
author: "Set Noa"
author_url: https://tajo.io/nl/set-noa/
robots: noindex
---

Vraag vroegtijdige toegang aan

Vul je voornaam en je zakelijke e-mailadres in. We sturen je een link om je aanvraag voor toegang tot Tajo te bevestigen.

# Ingebedde Stripe Apps

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

Met ingebedde Stripe Apps kunnen platforms die op Stripe Connect zijn gebouwd, functionaliteit van externe apps rechtstreeks in hun eigen dashboards tonen. Met de embedded components van Connect geef je je connected accounts toegang tot apps zoals QuickBooks, Xero en Mailchimp, zonder dat ze naar het Stripe Dashboard hoeven.

Caution

**Status: gepland, niet gebouwd.** Tajo heeft geen Stripe App, dus niets in dit onderdeel kan vandaag worden geïnstalleerd. De app-identifiers, URL’s en credentials op deze pagina zijn illustratieve voorbeelden, geen werkende endpoints.

## Overzicht

Ingebedde apps gebruiken twee belangrijke embedded components van Connect:

- **`app-install`**: rendert een installatieknop voor een Stripe App in de UI van je platform
- **`app-viewport`**: rendert een specifieke app-viewport in de UI van je platform

Zo kunnen platformbeheerders boekhoud-, marketing- en operationele tools rechtstreeks in hun product inbedden.

## Ondersteunde apps

De volgende apps ondersteunen inbedding via Connect-components:

| App | Categorie | Toepassing |
| --- | --- | --- |
| **QuickBooks** | Boekhouding | Betalingen en facturen synchroniseren naar QuickBooks |
| **Xero** | Boekhouding | Geautomatiseerd boekhouden en afletteren |
| **Mailchimp** | Marketing | Klantgegevens synchroniseren voor e-mailcampagnes |
| **Eigen apps** | Alle | Je eigen Stripe Apps, gebouwd voor je platform |

Tip

De Tajo Brevo-integratie kan in Connect-platforms worden ingebed, zodat connected accounts hun Stripe-gegevens via de eigen interface van het platform naar Brevo kunnen synchroniseren.

## Instellen met de Account Sessions API

Om apps in te bedden maak je Account Sessions aan waarin de juiste components zijn ingeschakeld:

### Serverzijde: een Account Session aanmaken

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

### Clientzijde: Connect.js initialiseren

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

## De app-install-component

De `app-install`-component rendert een installatieknop waarmee connected accounts een Stripe App kunnen installeren:

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

## De app-viewport-component

De `app-viewport`-component rendert een specifieke app-viewport binnen je platform:

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

## Metadataschema voor destination charges

Wanneer je ingebedde apps gebruikt met destination charges (gebruikelijk bij Connect-platforms), bevat de metadata van de charge gestructureerde gegevens die boekhoud- en marketingintegraties kunnen verwerken.

### Boekhoudintegraties

Voor apps zoals QuickBooks en Xero volgt de metadata van een destination charge dit 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"
  }
}
```

| Veld | Type | Omschrijving |
| --- | --- | --- |
| `customer_id` | string | Klantidentificatie van het platform |
| `customer_email` | string | E-mailadres van de klant om facturen en bonnen te matchen |
| `product_name` | string | Weergavenaam van het product voor regelitems |
| `product_id` | string | Product-ID van Stripe |
| `quantity` | string | Aantal items |
| `unit_amount` | string | Stukprijs in de kleinste valuta-eenheid (centen) |
| `currency` | string | ISO-valutacode van drie letters |
| `platform_fee` | string | Bedrag van de application fee in de kleinste valuta-eenheid |
| `platform_fee_currency` | string | Valuta van de platformkosten |
| `tax_amount` | string | Belastingbedrag in de kleinste valuta-eenheid |
| `tax_rate_id` | string | ID van het toegepaste Stripe-belastingtarief |
| `invoice_id` | string | ID van de gekoppelde factuur |
| `order_id` | string | Interne bestelidentificatie van het platform |

### Marketingintegraties

Voor apps zoals Mailchimp en de Tajo Brevo-integratie maakt de metadata klantsegmentatie en gerichte campagnes mogelijk:

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

Met deze metadata zijn Brevo-automatiseringen mogelijk zoals:

- **Welkomstreeksen** voor klanten die voor het eerst kopen (`is_first_purchase: "true"`)
- **Upsellcampagnes** op basis van `product_category` en `purchase_value`
- **Retentieflows** voor abonnementsklanten op basis van `subscription_interval`
- **Win-backcampagnes** gericht op vertrekkende klanten met een hoge `lifetime_value`

## Voorbeeld van een platformintegratie

Een volledige platformintegratie die de Tajo Brevo-app inbedt:

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

## Beveiligingsoverwegingen

Als je apps in je platform inbedt:

- **Account Sessions verlopen**: maak nieuwe sessies aan wanneer dat nodig is en cache client secrets niet
- **Scope beperken**: gebruik `allowed_apps` om te bepalen welke apps geïnstalleerd mogen worden
- **Gegevensisolatie**: de gegevens van elk connected account zijn geïsoleerd, het platform heeft geen toegang tot de gegevens van de app
- **CSP-headers**: zorg dat het Content Security Policy van je platform verbindingen met `https://connect-js.stripe.com` toestaat

Caution

Components voor ingebedde apps vereisen een Connect-integratie met toegang tot de Account Sessions API. Standaard Stripe-accounts kunnen geen embedded components gebruiken.