---
title: "Vestavěné aplikace Stripe | Tajo"
description: "Použijte vestavěné komponenty Connect k integraci Stripe Apps do Vaší vlastní platformy"
url: https://tajo.io/cz/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/cz/docs/stripe-apps/embedded-apps.md
lang: cs-CZ
author: "Set Noa"
author_url: https://tajo.io/cz/set-noa/
robots: noindex
---

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

Zadejte své jméno a pracovní e-mailovou adresu. Pošleme vám odkaz pro potvrzení žádosti o přístup k Tajo.

# Vestavěné aplikace Stripe

[Set Noa](https://tajo.io/cz/set-noa/)

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.

Caution

**Stav: plánováno, zatím nevytvořeno.** Tajo nemá žádnou aplikaci pro Stripe, takže nic z této sekce dnes nelze nainstalovat. Identifikátory aplikace, URL i přihlašovací údaje na této stránce jsou ilustrativní zástupné hodnoty, nikoli živé endpointy.

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

```javascript
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

```javascript
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

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

```tsx
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

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

```tsx
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:

```json
{
  "metadata": {
    "customer_id": "cus_platform_customer_id",
    "customer_email": "customer@example.com",
    "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í:

```json
{
  "metadata": {
    "customer_id": "cus_xxxxx",
    "customer_email": "customer@example.com",
    "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:

```tsx
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.