---
title: "Osadzone aplikacje Stripe | Tajo"
description: "Wykorzystaj osadzone komponenty Connect, aby zintegrować aplikacje Stripe z własną platformą"
url: https://tajo.io/pl/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/pl/docs/stripe-apps/embedded-apps.md
lang: pl-PL
author: "Set Noa"
author_url: https://tajo.io/pl/set-noa/
robots: noindex
---

Poproś o wcześniejszy dostęp

Podaj imię i firmowy adres e-mail. Wyślemy Ci link potwierdzający prośbę o dostęp do Tajo.

# Osadzone aplikacje Stripe

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

Osadzone aplikacje Stripe pozwalają platformom zbudowanym na Stripe Connect udostępniać funkcje aplikacji zewnętrznych bezpośrednio we własnych panelach. Dzięki osadzonym komponentom Connect możesz dać połączonym kontom dostęp do aplikacji takich jak QuickBooks, Xero czy Mailchimp, bez konieczności odwiedzania panelu Stripe.

Caution

**Status: planowana, niezbudowana.** Tajo nie ma aplikacji Stripe App, więc niczego z tej sekcji nie można dziś zainstalować. Identyfikatory aplikacji, adresy URL i dane dostępowe na tej stronie są przykładowymi symbolami zastępczymi, a nie działającymi endpointami.

## Przegląd

Osadzone aplikacje korzystają z dwóch kluczowych komponentów Connect:

- **`app-install`**: renderuje przycisk instalacji aplikacji Stripe w interfejsie Twojej platformy
- **`app-viewport`**: renderuje konkretny widok aplikacji w interfejsie Twojej platformy

Dzięki temu operatorzy platform mogą osadzać narzędzia księgowe, marketingowe i operacyjne bezpośrednio w swoim produkcie.

## Obsługiwane aplikacje

Następujące aplikacje można osadzać przez komponenty Connect:

| Aplikacja | Kategoria | Zastosowanie |
| --- | --- | --- |
| **QuickBooks** | Księgowość | Synchronizacja płatności i faktur do QuickBooks |
| **Xero** | Księgowość | Zautomatyzowana księgowość i uzgadnianie płatności |
| **Mailchimp** | Marketing | Synchronizacja danych klientów na potrzeby kampanii emailowych |
| **Aplikacje własne** | Dowolna | Twoje własne aplikacje Stripe zbudowane dla Twojej platformy |

Tip

Integrację Tajo z Brevo można osadzić w platformach Connect, dzięki czemu połączone konta synchronizują swoje dane ze Stripe do Brevo przez interfejs samej platformy.

## Konfiguracja z użyciem Account Sessions API

Aby osadzić aplikacje, musisz utworzyć sesje konta (Account Sessions) z włączonymi odpowiednimi komponentami:

### Po stronie serwera: utwórz sesję konta

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

### Po stronie klienta: zainicjuj 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;
  },
});
```

## Komponent instalacji aplikacji

Komponent `app-install` renderuje przycisk instalacji, za pomocą którego połączone konta instalują aplikację 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>
  );
};
```

## Komponent widoku aplikacji

Komponent `app-viewport` renderuje konkretny widok aplikacji wewnątrz Twojej 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>
  );
};
```

## Schemat metadanych opłat docelowych

Przy korzystaniu z osadzonych aplikacji razem z opłatami docelowymi (destination charges), częstymi na platformach Connect, metadane opłaty niosą ustrukturyzowane dane, które mogą wykorzystać integracje księgowe i marketingowe.

### Integracje księgowe

W przypadku aplikacji takich jak QuickBooks i Xero metadane opłaty docelowej mają następujący schemat:

```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 | Opis |
| --- | --- | --- |
| `customer_id` | string | Identyfikator klienta w systemie platformy |
| `customer_email` | string | Adres email klienta do dopasowania faktury lub paragonu |
| `product_name` | string | Wyświetlana nazwa produktu dla pozycji na dokumencie |
| `product_id` | string | Identyfikator produktu w Stripe |
| `quantity` | string | Liczba sztuk |
| `unit_amount` | string | Cena jednostkowa w najmniejszej jednostce waluty (grosze) |
| `currency` | string | Trzyliterowy kod waluty ISO |
| `platform_fee` | string | Kwota prowizji aplikacji w najmniejszej jednostce waluty |
| `platform_fee_currency` | string | Waluta prowizji platformy |
| `tax_amount` | string | Kwota podatku w najmniejszej jednostce waluty |
| `tax_rate_id` | string | Identyfikator zastosowanej stawki podatku w Stripe |
| `invoice_id` | string | Identyfikator powiązanej faktury |
| `order_id` | string | Wewnętrzny identyfikator zamówienia w platformie |

### Integracje marketingowe

W przypadku aplikacji takich jak Mailchimp oraz integracji Tajo z Brevo metadane umożliwiają segmentację klientów i precyzyjne kierowanie kampanii:

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

Te metadane pozwalają uruchamiać w Brevo automatyzacje takie jak:

- **Seria powitalna** dla kupujących po raz pierwszy (`is_first_purchase: "true"`)
- **Kampanie upsellowe** oparte na `product_category` i `purchase_value`
- **Ścieżki retencyjne** dla klientów subskrypcyjnych na podstawie `subscription_interval`
- **Kampanie odzyskujące** kierowane do odchodzących klientów o wysokiej wartości `lifetime_value`

## Przykład integracji z platformą

Kompletna integracja platformy osadzająca aplikację Tajo dla 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>
  );
};
```

## Kwestie bezpieczeństwa

Osadzając aplikacje we własnej platformie, pamiętaj o kilku zasadach:

- **Sesje konta wygasają**: twórz nowe sesje w miarę potrzeb i nie buforuj kluczy client secret
- **Kontrola zakresu**: użyj `allowed_apps`, aby ograniczyć listę aplikacji możliwych do zainstalowania
- **Izolacja danych**: dane każdego połączonego konta są odizolowane, a platforma nie ma dostępu do danych aplikacji
- **Nagłówki CSP**: upewnij się, że polityka Content Security Policy Twojej platformy zezwala na połączenia z `https://connect-js.stripe.com`

Caution

Komponenty osadzonych aplikacji wymagają integracji Connect z dostępem do Account Sessions API. Standardowe konta Stripe nie mogą korzystać z osadzonych komponentów.