Demandez un accès anticipé

Indiquez votre prénom ainsi qu’une adresse e-mail ou un numéro de téléphone. Nous vous recontacterons pour vous communiquer les modalités d’accès à Tajo.

Sur cette page

Stripe Apps embarquées

Les Stripe Apps embarquées permettent aux plateformes construites sur Stripe Connect de présenter les fonctionnalités d’applications tierces directement dans leurs propres tableaux de bord. Grâce aux composants Connect embarqués, vous pouvez donner à vos comptes connectés l’accès à des applications comme QuickBooks, Xero et Mailchimp, sans qu’ils aient à se rendre dans le Dashboard Stripe.

Vue d’ensemble

Les applications embarquées reposent sur deux composants Connect embarqués essentiels :

app-install : affiche un bouton d’installation pour une Stripe App dans l’interface de votre plateforme
app-viewport : affiche un viewport d’application précis dans l’interface de votre plateforme

Les opérateurs de plateforme peuvent ainsi intégrer des outils de comptabilité, de marketing et d’exploitation directement dans leur produit.

Applications prises en charge

Les applications suivantes prennent en charge l’intégration via les composants Connect :

Application	Catégorie	Cas d’usage
QuickBooks	Comptabilité	Synchroniser les paiements et les factures vers QuickBooks
Xero	Comptabilité	Tenue de comptes et rapprochement automatisés
Mailchimp	Marketing	Synchroniser les données client pour les campagnes e-mail
Applications personnalisées	Toutes	Vos propres Stripe Apps conçues pour votre plateforme

Tip

L’intégration Tajo Brevo peut être embarquée dans les plateformes Connect, ce qui permet aux comptes connectés de synchroniser leurs données Stripe avec Brevo depuis l’interface de la plateforme elle-même.

Configuration avec l’API Account Sessions

Pour embarquer des applications, vous devez créer des Account Sessions dans lesquelles les composants voulus sont activés :

Côté serveur : créer une Account Session

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

Côté client : initialiser 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;
  },
});

Composant App Install

Le composant app-install affiche un bouton d’installation que les comptes connectés peuvent utiliser pour installer une Stripe App :

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

Composant App Viewport

Le composant app-viewport affiche un viewport d’application précis à l’intérieur de votre plateforme :

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

Schéma des métadonnées de destination charge

Lorsque vous utilisez des applications embarquées avec des destination charges, courantes sur les plateformes Connect, les métadonnées du paiement transportent des données structurées que les intégrations comptables et marketing peuvent exploiter.

Intégrations comptables

Pour des applications comme QuickBooks et Xero, les métadonnées d’une destination charge suivent ce schéma :

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

Champ	Type	Description
`customer_id`	string	Identifiant client propre à la plateforme
`customer_email`	string	E-mail du client pour le rapprochement des factures et des reçus
`product_name`	string	Nom d’affichage du produit pour les lignes de facture
`product_id`	string	ID de produit Stripe
`quantity`	string	Quantité de l’article
`unit_amount`	string	Prix unitaire dans la plus petite unité monétaire (centimes)
`currency`	string	Code de devise ISO à trois lettres
`platform_fee`	string	Montant des frais d’application dans la plus petite unité monétaire
`platform_fee_currency`	string	Devise des frais de plateforme
`tax_amount`	string	Montant de la taxe dans la plus petite unité monétaire
`tax_rate_id`	string	ID du taux de taxe Stripe appliqué
`invoice_id`	string	ID de la facture associée
`order_id`	string	Identifiant de commande interne à la plateforme

Intégrations marketing

Pour des applications comme Mailchimp et l’intégration Tajo Brevo, ces métadonnées permettent la segmentation des clients et le ciblage des campagnes :

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

Ces métadonnées rendent possibles des automations Brevo telles que :

Séries de bienvenue pour les premiers achats (is_first_purchase: "true")
Campagnes d’upsell fondées sur product_category et purchase_value
Parcours de rétention pour les clients abonnés, selon subscription_interval
Campagnes de reconquête ciblant les clients à forte lifetime_value qui se désabonnent

Exemple d’intégration de plateforme

Une intégration de plateforme complète qui embarque l’application Tajo 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>
  );
};

Considérations de sécurité

Lorsque vous embarquez des applications dans votre plateforme :

Les Account Sessions expirent : créez de nouvelles sessions au besoin, ne mettez pas les client secrets en cache
Contrôle de la portée : utilisez allowed_apps pour restreindre les applications installables
Isolation des données : les données de chaque compte connecté sont isolées, la plateforme ne peut pas accéder aux données de l’application
En-têtes CSP : vérifiez que la Content Security Policy de votre plateforme autorise les connexions vers https://connect-js.stripe.com

Caution

Les composants d’applications embarquées exigent une intégration Connect disposant de l’accès à l’API Account Sessions. Les comptes Stripe standard ne peuvent pas utiliser les composants embarqués.

Stripe Apps embarquées

Vue d’ensemble

Applications prises en charge

Configuration avec l’API Account Sessions

Côté serveur : créer une Account Session

Côté client : initialiser Connect.js

Composant App Install

JavaScript

React

Composant App Viewport

JavaScript

React

Schéma des métadonnées de destination charge

Intégrations comptables

Intégrations marketing

Exemple d’intégration de plateforme

Considérations de sécurité

Demandez un accès anticipé

Merci, votre inscription est confirmée.