On this page

Inbäddade Stripe Apps

Inbäddade Stripe Apps låter plattformar byggda på Stripe Connect exponera tredjepartsapp-funktionalitet direkt i sina egna instrumentpaneler. Med Connect inbäddade komponenter kan du ge dina anslutna konton åtkomst till appar som QuickBooks, Xero och Mailchimp utan att de behöver besöka Stripe Dashboard.

Översikt

Inbäddade appar använder två viktiga Connect inbäddade komponenter:

app-install: Renderar en installationsknapp för en Stripe App i din plattforms UI
app-viewport: Renderar en specifik app-viewport i din plattforms UI

Detta gör det möjligt för plattformsoperatörer att bädda in bokförings-, marknadsförings- och driftverktyg direkt i sin produkt.

Appar som stöds

Följande appar stöder inbäddning via Connect-komponenter:

App	Kategori	Användningsfall
QuickBooks	Bokföring	Synkronisera betalningar och fakturor till QuickBooks
Xero	Bokföring	Automatiserad bokföring och avstämning
Mailchimp	Marknadsföring	Synkronisera kunddata för e-postkampanjer
Anpassade appar	Valfri	Dina egna Stripe Apps byggda för din plattform

Tip

Tajo Brevo-integrationen kan bäddas in i Connect-plattformar, vilket gör att anslutna konton kan synkronisera sin Stripe-data till Brevo via plattformens eget gränssnitt.

Inställning med Account Sessions API

För att bädda in appar måste du skapa Account Sessions med lämpliga komponenter aktiverade:

Server-sida: Skapa 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 });

Klient-sida: Initiera 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;
  },
});

App Install-komponent

Komponenten app-install renderar en installationsknapp som anslutna konton kan använda för att installera en 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>
  );
};

App Viewport-komponent

Komponenten app-viewport renderar en specifik app-viewport i din 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 BrevoCusomerView = ({ 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 för destinationsavgifter

När du använder inbäddade appar med destinationsavgifter (vanligt i Connect-plattformar) innehåller avgiftsmetadata strukturerad data som bokförings- och marknadsföringsintegrationer kan konsumera.

Bokföringsintegrationer

För appar som QuickBooks och Xero följer destinationsavgiftsmetadata detta 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"
  }
}

Fält	Typ	Beskrivning
`customer_id`	sträng	Plattformens kundidentifierare
`customer_email`	sträng	Kund-e-post för faktura-/kvittomatchning
`product_name`	sträng	Produktvisningsnamn för radposter
`product_id`	sträng	Stripe produkt-ID
`quantity`	sträng	Antal artiklar
`unit_amount`	sträng	Enhetspris i minsta valutaenhet (ören)
`currency`	sträng	Trelitterskod ISO-valuta
`platform_fee`	sträng	Appavgiftsbelopp i minsta valutaenhet
`platform_fee_currency`	sträng	Valuta för plattformsavgiften
`tax_amount`	sträng	Skattebelopp i minsta valutaenhet
`tax_rate_id`	sträng	Stripe skattesats-ID tillämpad
`invoice_id`	sträng	Associerat faktura-ID
`order_id`	sträng	Plattformens interna bestellningsidentifierare

Marknadsföringsintegrationer

För appar som Mailchimp och Tajo Brevo-integrationen möjliggör metadata kundsegmentering och kampanjriktning:

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

Denna metadata möjliggör Brevo-automatiseringar som:

Välkomstserier för förstagångsköpare (is_first_purchase: "true")
Merförsäljningskampanjer baserade på product_category och purchase_value
Retentionsflöden för prenumerationskunder baserade på subscription_interval
Win-back-kampanjer som riktar sig mot kunder med högt lifetime_value som churnar

Plattformsintegrationsexempel

En komplett plattformsintegration som bäddar in Tajo Brevo-appen:

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

Säkerhetsöverväganden

När du bäddar in appar i din plattform:

Account Sessions löper ut: Skapa nya sessioner vid behov; cacha inte klienthemligheter
Omfångskontroll: Använd allowed_apps för att begränsa vilka appar som kan installeras
Dataisolering: Varje anslutet kontos data är isolerat; plattformen kan inte komma åt appdata
CSP-headers: Se till att din plattforms Content Security Policy tillåter anslutningar till https://connect-js.stripe.com

Caution

Inbäddade appkomponenter kräver en Connect-integration med Account Sessions API-åtkomst. Standard Stripe-konton kan inte använda inbäddade komponenter.

Inbäddade Stripe Apps

Översikt

Appar som stöds

Inställning med Account Sessions API

Server-sida: Skapa Account Session

Klient-sida: Initiera Connect.js

App Install-komponent

JavaScript

React

App Viewport-komponent

JavaScript

React

Metadataschema för destinationsavgifter

Bokföringsintegrationer

Marknadsföringsintegrationer

Plattformsintegrationsexempel

Säkerhetsöverväganden

Subscribe to updates

Thanks — you're subscribed.