Požádejte o přednostní přístup

Uveďte své křestní jméno a e-mail nebo telefonní číslo. Pošleme Vám informace o přístupu k platformě Tajo.

Na této stránce

Vestavěné aplikace Stripe

Vestavěné aplikace Stripe umožňují platformám postaveným na Stripe Connect nabídnout funkce aplikací třetích stran přímo ve vlastních dashboardech. Pomocí vestavěných komponent Connect můžete svým propojeným účtům zpřístupnit aplikace jako QuickBooks, Xero nebo Mailchimp, aniž by musely navštívit Stripe Dashboard.

Přehled

Vestavěné aplikace používají dvě klíčové vestavěné komponenty Connect:

app-install: vykreslí tlačítko pro instalaci aplikace Stripe ve Vašem rozhraní platformy
app-viewport: vykreslí konkrétní viewport aplikace ve Vašem rozhraní platformy

Provozovatelé platforem tak mohou vložit účetní, marketingové a provozní nástroje přímo do svého produktu.

Podporované aplikace

Vestavění přes komponenty Connect podporují tyto aplikace:

Aplikace	Kategorie	Použití
QuickBooks	Účetnictví	Synchronizace plateb a faktur do QuickBooks
Xero	Účetnictví	Automatizované účetnictví a párování
Mailchimp	Marketing	Synchronizace zákaznických dat pro e-mailové kampaně
Vlastní aplikace	Libovolná	Vaše vlastní aplikace Stripe vytvořené pro Vaši platformu

Tip

Integraci Tajo pro Brevo lze vestavět do platforem Connect, takže propojené účty mohou synchronizovat svá data ze Stripe do Brevo přímo v rozhraní platformy.

Nastavení pomocí Account Sessions API

Abyste mohli aplikace vestavět, musíte vytvořit Account Sessions se zapnutými odpovídajícími komponentami:

Na straně serveru: vytvoř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 });

Na straně klienta: inicializace 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;
  },
});

Komponenta App Install

Komponenta app-install vykreslí instalační tlačítko, kterým si propojené účty nainstalují aplikaci Stripe:

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

Komponenta App Viewport

Komponenta app-viewport vykreslí konkrétní viewport aplikace uvnitř Vaší platformy:

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 metadat pro destination charge

Při použití vestavěných aplikací s destination charges (běžné na platformách Connect) nesou metadata platby strukturovaná data, která mohou účetní a marketingové integrace zpracovat.

Účetní integrace

U aplikací jako QuickBooks a Xero mají metadata destination charge toto 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"
  }
}

Pole	Typ	Popis
`customer_id`	string	Identifikátor zákazníka na straně platformy
`customer_email`	string	E-mail zákazníka pro párování faktur a účtenek
`product_name`	string	Zobrazovaný název produktu pro položky dokladu
`product_id`	string	ID produktu ve Stripe
`quantity`	string	Množství položky
`unit_amount`	string	Jednotková cena v nejmenší jednotce měny (v centech)
`currency`	string	Třípísmenný kód měny podle ISO
`platform_fee`	string	Výše poplatku aplikace v nejmenší jednotce měny
`platform_fee_currency`	string	Měna poplatku platformy
`tax_amount`	string	Výše daně v nejmenší jednotce měny
`tax_rate_id`	string	ID použité daňové sazby ve Stripe
`invoice_id`	string	ID související faktury
`order_id`	string	Interní identifikátor objednávky na straně platformy

Marketingové integrace

U aplikací jako Mailchimp a integrace Tajo pro Brevo umožňují metadata segmentaci zákazníků a cílení kampaní:

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

Tato metadata umožňují v Brevo automatizace, jako jsou:

Uvítací série pro první nákup (is_first_purchase: "true")
Upsell kampaně podle product_category a purchase_value
Retenční toky pro předplatitele podle subscription_interval
Kampaně na návrat zákazníků cílené na odcházející zákazníky s vysokou hodnotou lifetime_value

Ukázka integrace platformy

Kompletní integrace platformy s vestavěnou aplikací Tajo pro 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>
  );
};

Bezpečnostní hlediska

Když vestavujete aplikace do své platformy:

Account Sessions vyprší: vytvářejte nové relace podle potřeby, client secrets neukládejte do mezipaměti
Kontrola rozsahu: pomocí allowed_apps omezte, které aplikace lze instalovat
Izolace dat: data každého propojeného účtu jsou oddělená, platforma k datům aplikace nemá přístup
Hlavičky CSP: zajistěte, aby Content Security Policy Vaší platformy povolovala spojení na https://connect-js.stripe.com

Caution

Komponenty vestavěných aplikací vyžadují integraci Connect s přístupem k Account Sessions API. Standardní účty Stripe vestavěné komponenty používat nemohou.

Vestavěné aplikace Stripe

Přehled

Podporované aplikace

Nastavení pomocí Account Sessions API

Na straně serveru: vytvoření Account Session

Na straně klienta: inicializace Connect.js

Komponenta App Install

JavaScript

React

Komponenta App Viewport

JavaScript

React

Schéma metadat pro destination charge

Účetní integrace

Marketingové integrace

Ukázka integrace platformy

Bezpečnostní hlediska

Požádejte o přednostní přístup

Děkujeme, přihlášení proběhlo úspěšně.