Vraag vroegtijdige toegang aan

Vul je voornaam en een e-mailadres of telefoonnummer in. We nemen daarna contact met je op en leggen uit hoe je toegang krijgt tot Tajo.

Op deze pagina

Ingebedde Stripe Apps

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.

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:

AppCategorieToepassing
QuickBooksBoekhoudingBetalingen en facturen synchroniseren naar QuickBooks
XeroBoekhoudingGeautomatiseerd boekhouden en afletteren
MailchimpMarketingKlantgegevens synchroniseren voor e-mailcampagnes
Eigen appsAlleJe 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 

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 

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 

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

De app-viewport-component

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

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

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:

{
  "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"
  }
}
VeldTypeOmschrijving
customer_idstringKlantidentificatie van het platform
customer_emailstringE-mailadres van de klant om facturen en bonnen te matchen
product_namestringWeergavenaam van het product voor regelitems
product_idstringProduct-ID van Stripe
quantitystringAantal items
unit_amountstringStukprijs in de kleinste valuta-eenheid (centen)
currencystringISO-valutacode van drie letters
platform_feestringBedrag van de application fee in de kleinste valuta-eenheid
platform_fee_currencystringValuta van de platformkosten
tax_amountstringBelastingbedrag in de kleinste valuta-eenheid
tax_rate_idstringID van het toegepaste Stripe-belastingtarief
invoice_idstringID van de gekoppelde factuur
order_idstringInterne bestelidentificatie van het platform

Marketingintegraties

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

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

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:

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.

Vraag vroegtijdige toegang aan

Vul je voornaam en een e-mailadres of telefoonnummer in. We nemen daarna contact met je op en leggen uit hoe je toegang krijgt tot Tajo.

automatische herkenning
AI-assistent

Hallo! Stel me vragen over de documentatie.