Požiadajte o skorý prístup

Uveďte svoje krstné meno a e-mailovú adresu alebo telefónne číslo. Pošleme Vám podrobnosti o prístupe k platforme Tajo.

Na tejto stránke

Vložené Stripe Apps

Vložené Stripe Apps umožňujú platformám postaveným na Stripe Connect sprístupniť funkcie aplikácií tretích strán priamo vo vlastných dashboardoch. Pomocou vložených komponentov Connect môžete svojim prepojeným účtom poskytnúť prístup k aplikáciám ako QuickBooks, Xero a Mailchimp bez toho, aby museli navštíviť Stripe Dashboard.

Prehľad

Vložené aplikácie využívajú dva kľúčové vložené komponenty Connect:

app-install: vykreslí inštalačné tlačidlo pre Stripe App v rozhraní Vašej platformy
app-viewport: vykreslí konkrétny viewport aplikácie v rozhraní Vašej platformy

Prevádzkovatelia platforiem tak môžu vložiť účtovné, marketingové a prevádzkové nástroje priamo do svojho produktu.

Podporované aplikácie

Vkladanie cez komponenty Connect podporujú tieto aplikácie:

Aplikácia	Kategória	Použitie
QuickBooks	Účtovníctvo	Synchronizácia platieb a faktúr do QuickBooks
Xero	Účtovníctvo	Automatizované účtovníctvo a párovanie
Mailchimp	Marketing	Synchronizácia zákazníckych dát pre e-mailové kampane
Vlastné aplikácie	Ľubovoľná	Vaše vlastné Stripe Apps vytvorené pre Vašu platformu

Tip

Integráciu Tajo s Brevo možno vložiť do platforiem Connect, takže prepojené účty môžu synchronizovať svoje dáta zo Stripe do Brevo priamo cez rozhranie danej platformy.

Nastavenie pomocou Account Sessions API

Na vloženie aplikácií musíte vytvoriť Account Sessions so zapnutými príslušnými komponentmi:

Na strane servera: vytvorenie 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 strane klienta: inicializácia 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;
  },
});

Komponent App Install

Komponent app-install vykreslí inštalačné tlačidlo, pomocou ktorého si prepojené účty môžu nainštalovať 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>
  );
};

Komponent App Viewport

Komponent app-viewport vykreslí konkrétny viewport aplikácie vo Vašej platforme:

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 metadát pri destination charges

Pri používaní vložených aplikácií s destination charges (bežné na platformách Connect) nesú metadáta platby štruktúrované dáta, ktoré dokážu spracovať účtovné a marketingové integrácie.

Účtovné integrácie

Pre aplikácie ako QuickBooks a Xero majú metadáta destination charges túto schému:

{
  "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 v platforme
`customer_email`	string	E-mail zákazníka na párovanie faktúr a potvrdení
`product_name`	string	Zobrazovaný názov produktu pre položky dokladu
`product_id`	string	ID produktu v Stripe
`quantity`	string	Množstvo položky
`unit_amount`	string	Jednotková cena v najmenšej jednotke meny (centoch)
`currency`	string	Trojpísmenový kód meny podľa ISO
`platform_fee`	string	Výška poplatku aplikácie v najmenšej jednotke meny
`platform_fee_currency`	string	Mena poplatku platformy
`tax_amount`	string	Výška dane v najmenšej jednotke meny
`tax_rate_id`	string	ID použitej daňovej sadzby v Stripe
`invoice_id`	string	ID súvisiacej faktúry
`order_id`	string	Interný identifikátor objednávky v platforme

Marketingové integrácie

Pre aplikácie ako Mailchimp a integráciu Tajo s Brevo umožňujú metadáta segmentáciu zákazníkov a cielenie 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"
  }
}

Tieto metadáta umožňujú v Brevo automatizácie, napríklad:

Uvítacia séria pre prvonákupcov (is_first_purchase: "true")
Upsell kampane podľa product_category a purchase_value
Retenčné postupy pre predplatiteľov podľa subscription_interval
Kampane na získanie zákazníka späť cielené na odchádzajúcich zákazníkov s vysokou hodnotou lifetime_value

Príklad integrácie do platformy

Kompletná integrácia platformy s vloženou aplikáciou Tajo pre 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é aspekty

Pri vkladaní aplikácií do Vašej platformy:

Platnosť Account Sessions vyprší: vytvárajte nové relácie podľa potreby a neukladajte si client secrets do vyrovnávacej pamäte
Kontrola rozsahu: pomocou allowed_apps obmedzte, ktoré aplikácie sa dajú nainštalovať
Izolácia dát: dáta každého prepojeného účtu sú izolované, platforma nemá prístup k dátam aplikácie
CSP hlavičky: zabezpečte, aby Content Security Policy Vašej platformy povoľovala spojenia na https://connect-js.stripe.com

Caution

Komponenty vložených aplikácií vyžadujú integráciu Connect s prístupom k Account Sessions API. Štandardné účty Stripe vložené komponenty používať nemôžu.

Vložené Stripe Apps

Prehľad

Podporované aplikácie

Nastavenie pomocou Account Sessions API

Na strane servera: vytvorenie Account Session

Na strane klienta: inicializácia Connect.js

Komponent App Install

JavaScript

React

Komponent App Viewport

JavaScript

React

Schéma metadát pri destination charges

Účtovné integrácie

Marketingové integrácie

Príklad integrácie do platformy

Bezpečnostné aspekty

Požiadajte o skorý prístup

Ďakujeme, prihlásenie prebehlo úspešne.