On this page

Indlejrede Stripe Apps

Indlejrede Stripe Apps giver platforme bygget på Stripe Connect mulighed for at eksponere tredjeparts-app-funktionalitet direkte i deres egne dashboards. Med Connect indlejrede komponenter kan du give dine tilknyttede konti adgang til apps som QuickBooks, Xero og Mailchimp uden at de behøver besøge Stripe Dashboard.

Oversigt

Indlejrede apps bruger to nøgle Connect indlejrede komponenter:

app-install: Gengiver en installationsknap til en Stripe App i din platform-UI
app-viewport: Gengiver et specifikt app-viewport i din platform-UI

Dette giver platformoperatører mulighed for at indlejre regnskabs-, marketing- og driftsværktøjer direkte i deres produkt.

Understøttede apps

Følgende apps understøtter indlejring via Connect-komponenter:

App	Kategori	Brugsscenarie
QuickBooks	Regnskab	Synkroniser betalinger og fakturaer til QuickBooks
Xero	Regnskab	Automatiseret bogføring og afstemning
Mailchimp	Marketing	Synkroniser kundedata til emailkampagner
Tilpassede apps	Alle	Dine egne Stripe Apps bygget til din platform

Tip

Tajo Brevo-integrationen kan indlejres i Connect-platforme, hvilket giver tilknyttede konti mulighed for at synkronisere deres Stripe-data til Brevo via platformens egen interface.

Opsætning med Account Sessions API

For at indlejre apps skal du oprette Account Sessions med de relevante komponenter aktiveret:

Server-side: Opret Account Session

const stripe = require('stripe')('sk_live_...');

const accountSession = await stripe.accountSessions.create({
  account: 'acct_connected_account_id',
  components: {
    app_install: {
      enabled: true,
      features: {
        allowed_apps: [
          'com.tajo.brevo-integration',
          'com.quickbooks.stripe-app'
        ],
      },
    },
    app_viewport: {
      enabled: true,
      features: {
        allowed_apps: [
          'com.tajo.brevo-integration'
        ],
      },
    },
  },
});

res.json({ clientSecret: accountSession.client_secret });

Client-side: Initialiser Connect.js

import { loadConnectAndInitialize } from '@stripe/connect-js';

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-komponenten

app-install-komponenten gengiver en installationsknap som tilknyttede konti kan bruge til at installere en Stripe App:

JavaScript

const appInstall = stripeConnect.create('app-install');
appInstall.setApp('com.tajo.brevo-integration');

const container = document.getElementById('app-install-container');
appInstall.mount(container);

appInstall.on('app_installed', (event) => {
  console.log('App installed:', event.app_id);
  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-komponenten

app-viewport-komponenten gengiver et specifikt app-viewport i din platform:

JavaScript

const appViewport = stripeConnect.create('app-viewport');
appViewport.setApp('com.tajo.brevo-integration');
appViewport.setViewport('stripe.dashboard.customer.detail');
appViewport.setObjectContext({
  id: 'cus_xxxxx',
  object: 'customer',
});

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

Marketingintegrationer

For apps som Mailchimp og Tajo Brevo-integrationen muliggør metadata kundesegmentering og kampagnemålretning:

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

Dette metadata aktiverer Brevo-automatiseringer som:

Velkomstserier til førstegangskøbere (is_first_purchase: "true")
Mersalgskampagner baseret på product_category og purchase_value
Fastholdelsesflows til abonnementskunder baseret på subscription_interval
Generhvelseskampagner rettet mod høj lifetime_value-kunder der churner

Sikkerhedsovervejelser

Når du indlejrer apps i din platform:

Account Sessions udløber: Opret nye sessioner efter behov; cach ikke klienthemmeligheder
Omfangsstyring: Brug allowed_apps til at begrænse hvilke apps der kan installeres
Dataisolation: Hver tilknyttet kontos data er isoleret; platformen kan ikke tilgå app-data
CSP-headere: Sikr at din platforms Content Security Policy tillader forbindelser til https://connect-js.stripe.com

Caution

Indlejrede app-komponenter kræver en Connect-integration med Account Sessions API-adgang. Standard Stripe-konti kan ikke bruge indlejrede komponenter.

Indlejrede Stripe Apps

Oversigt

Understøttede apps

Opsætning med Account Sessions API

Server-side: Opret Account Session

Client-side: Initialiser Connect.js

App Install-komponenten

JavaScript

React

App Viewport-komponenten

JavaScript

React

Marketing­integrationer

Sikkerhedsovervejelser

Subscribe to updates

Thanks — you're subscribed.

Marketingintegrationer