Be om tidlig tilgang

Skriv inn fornavnet ditt og en e-postadresse eller et telefonnummer. Vi kontakter deg med informasjon om tilgang til Tajo.

På denne siden

Innebygde Stripe Apps

Innebygde Stripe Apps lar plattformer bygget på Stripe Connect vise funksjonalitet fra tredjepartsapper direkte i sine egne dashboard. Med Connect innebygde komponenter kan du gi de tilkoblede kontoene dine tilgang til apper som QuickBooks, Xero og Mailchimp uten at de må innom Stripe Dashboard.

Oversikt

Innebygde apper bruker to sentrale innebygde Connect-komponenter:

  • app-install: Viser en installasjonsknapp for en Stripe App i plattform-grensesnittet ditt
  • app-viewport: Viser et bestemt app-viewport i plattform-grensesnittet ditt

Slik kan plattformoperatører legge regnskaps-, markedsførings- og driftsverktøy rett inn i produktet sitt.

Apper som støttes

Disse appene kan bygges inn via Connect-komponenter:

AppKategoriBruksområde
QuickBooksRegnskapSynkroniser betalinger og fakturaer til QuickBooks
XeroRegnskapAutomatisert bokføring og avstemming
MailchimpMarkedsføringSynkroniser kundedata til e-postkampanjer
Egne apperAlleDine egne Stripe Apps bygget for plattformen din

Tip

Tajos Brevo-integrasjon kan bygges inn i Connect-plattformer, slik at tilkoblede kontoer kan synkronisere Stripe-dataene sine til Brevo gjennom plattformens eget grensesnitt.

Oppsett med Account Sessions API

For å bygge inn apper må du opprette Account Sessions med de riktige komponentene aktivert:

På serversiden: opprett 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 });

På klientsiden: 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;
  },
});

App Install-komponenten

Komponenten app-install viser en installasjonsknapp som tilkoblede kontoer kan bruke til å 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>
  );
};

App Viewport-komponenten

Komponenten app-viewport viser et bestemt app-viewport i plattformen din:

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

Metadataskjema for destination charges

Når du bruker innebygde apper sammen med destination charges (vanlig i Connect-plattformer), bærer metadataene på belastningen strukturerte data som regnskaps- og markedsføringsintegrasjoner kan lese.

Regnskapsintegrasjoner

For apper som QuickBooks og Xero følger metadataene for destination charges dette skjemaet:

{
  "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"
  }
}
FeltTypeBeskrivelse
customer_idstringPlattformens kundeidentifikator
customer_emailstringKundens e-post, brukt til å matche faktura og kvittering
product_namestringProduktnavnet som vises på ordrelinjene
product_idstringProdukt-ID i Stripe
quantitystringAntall enheter
unit_amountstringEnhetspris i minste valutaenhet (øre)
currencystringValutakode etter ISO, tre bokstaver
platform_feestringApplikasjonsgebyr i minste valutaenhet
platform_fee_currencystringValuta for plattformgebyret
tax_amountstringAvgiftsbeløp i minste valutaenhet
tax_rate_idstringID-en til avgiftssatsen i Stripe som er brukt
invoice_idstringID-en til tilhørende faktura
order_idstringPlattformens interne ordreidentifikator

Markedsføringsintegrasjoner

For apper som Mailchimp og Tajos Brevo-integrasjon gjør metadataene det mulig å segmentere kunder og målrette kampanjer:

{
  "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 metadataene gjør det mulig å kjøre Brevo-automatiseringer som:

  • Velkomstserier for førstegangskjøpere (is_first_purchase: "true")
  • Mersalgskampanjer basert på product_category og purchase_value
  • Lojalitetsflyter for abonnementskunder basert på subscription_interval
  • Gjenvinningskampanjer rettet mot kunder med høy lifetime_value som slutter

Eksempel på plattformintegrasjon

En komplett plattformintegrasjon som bygger inn Tajos Brevo-app:

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

Sikkerhetshensyn

Når du bygger inn apper i plattformen din:

  • Account Sessions utløper: Opprett nye økter ved behov, og mellomlagre aldri client secrets
  • Kontroller omfanget: Bruk allowed_apps til å begrense hvilke apper som kan installeres
  • Dataisolasjon: Dataene til hver tilkoblede konto er isolert, og plattformen får ikke tilgang til appdataene
  • CSP-headere: Sørg for at Content Security Policy i plattformen din tillater tilkoblinger til https://connect-js.stripe.com

Caution

Innebygde app-komponenter krever en Connect-integrasjon med tilgang til Account Sessions API. Vanlige Stripe-kontoer kan ikke bruke innebygde komponenter.

Be om tidlig tilgang

Skriv inn fornavnet ditt og en e-postadresse eller et telefonnummer. Vi kontakter deg med informasjon om tilgang til Tajo.

automatisk gjenkjenning
AI-assistent

Hei! Spør meg om dokumentasjonen.