Bed om tidlig adgang til Tajo

Indtast dit fornavn og en e-mailadresse eller et telefonnummer. Vi kontakter dig med oplysninger om adgang til Tajo.

På denne side

Indlejrede Stripe Apps

Indlejrede Stripe Apps gør det muligt for platforme bygget på Stripe Connect at vise funktioner fra tredjeparts-apps direkte i deres eget dashboard. Med Connect embedded components kan du give dine tilknyttede konti adgang til apps som QuickBooks, Xero og Mailchimp, uden at de skal ind i Stripe Dashboard.

Overblik

Indlejrede apps bygger på to centrale Connect embedded components:

app-install: Viser en installationsknap til en Stripe App inde i din platforms brugerflade
app-viewport: Viser et bestemt app-viewport inde i din platforms brugerflade

Det gør det muligt for platformsoperatører at lægge værktøjer til bogføring, markedsføring og drift direkte ind i deres eget produkt.

Understøttede apps

Disse apps understøtter indlejring via Connect-komponenter:

App	Kategori	Anvendelse
QuickBooks	Bogføring	Synkronisér betalinger og fakturaer til QuickBooks
Xero	Bogføring	Automatiseret bogføring og afstemning
Mailchimp	Markedsføring	Synkronisér kundedata til e-mailkampagner
Custom Apps	Alle	Dine egne Stripe Apps bygget til din platform

Tip

Tajo Brevo-integrationen kan indlejres i Connect-platforme, så tilknyttede konti kan synkronisere deres Stripe-data til Brevo gennem platformens egen brugerflade.

Opsætning med Account Sessions API

For at indlejre apps skal du oprette Account Sessions med de rigtige komponenter slået til:

På serveren: Opret en 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 });

I browseren: Initialisér 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;
  },
});

Komponenten app-install

Komponenten app-install viser en installationsknap, som tilknyttede konti kan bruge til at installere 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>
  );
};

Komponenten app-viewport

Komponenten app-viewport viser et bestemt app-viewport inde i din 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>
  );
};

Metadata-schema for destination charges

Når du bruger indlejrede apps sammen med destination charges (som er almindeligt på Connect-platforme), bærer betalingens metadata strukturerede data, som integrationer til bogføring og markedsføring kan bruge.

Integrationer til bogføring

For apps som QuickBooks og Xero følger metadata på destination charges dette 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"
  }
}

Felt	Type	Beskrivelse
`customer_id`	string	Platformens id for kunden
`customer_email`	string	Kundens e-mail, så faktura og kvittering kan matches
`product_name`	string	Produktets viste navn på linjeposterne
`product_id`	string	Stripes produkt-id
`quantity`	string	Antal enheder
`unit_amount`	string	Enhedspris i valutaens mindste enhed (øre)
`currency`	string	Valutakode på tre bogstaver efter ISO
`platform_fee`	string	Application fee i valutaens mindste enhed
`platform_fee_currency`	string	Valutaen for platformens gebyr
`tax_amount`	string	Momsbeløb i valutaens mindste enhed
`tax_rate_id`	string	Id på den anvendte Stripe-momssats
`invoice_id`	string	Id på den tilhørende faktura
`order_id`	string	Platformens interne id for ordren

Integrationer til markedsføring

For apps som Mailchimp og Tajo Brevo-integrationen gør disse metadata det muligt at segmentere kunder og målrette kampagner:

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

Disse metadata gør det muligt at bygge Brevo-automatiseringer som:

Velkomstforløb til førstegangskøbere (is_first_purchase: "true")
Mersalgskampagner ud fra product_category og purchase_value
Fastholdelsesflows til abonnementskunder ud fra subscription_interval
Win-back-kampagner rettet mod kunder med høj lifetime_value, der falder fra

Eksempel på en platformsintegration

En komplet platformsintegration, der indlejrer 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>
  );
};

Sikkerhedsovervejelser

Når du indlejrer apps i din platform:

Account Sessions udløber: Opret nye sessioner efter behov, og gem ikke client secrets i cache
Styr omfanget: Brug allowed_apps til at begrænse, hvilke apps der kan installeres
Adskilte data: Hver tilknyttet kontos data er adskilt, og platformen kan ikke tilgå appens data
CSP-headers: Sørg for, at din platforms Content Security Policy tillader forbindelser til https://connect-js.stripe.com

Caution

Komponenter til indlejrede apps kræver en Connect-integration med adgang til Account Sessions API. Almindelige Stripe-konti kan ikke bruge embedded components.

Indlejrede Stripe Apps

Overblik

Understøttede apps

Opsætning med Account Sessions API

På serveren: Opret en Account Session

I browseren: Initialisér Connect.js

Komponenten app-install

JavaScript

React

Komponenten app-viewport

JavaScript

React

Metadata-schema for destination charges

Integrationer til bogføring

Integrationer til markedsføring

Eksempel på en platformsintegration

Sikkerhedsovervejelser

Bed om tidlig adgang til Tajo

Tak, du er tilmeldt.