---
title: "Aplicații Stripe încorporate | Tajo"
description: "Folosește componentele încorporate Connect pentru a integra aplicații Stripe în propria ta platformă"
url: https://tajo.io/ro/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/ro/docs/stripe-apps/embedded-apps.md
lang: ro-RO
author: "Set Noa"
author_url: https://tajo.io/ro/set-noa/
robots: noindex
---

Solicită acces anticipat

Introduceți prenumele și adresa de e-mail profesională. Vă vom trimite un link pentru a confirma cererea de acces la Tajo.

# Aplicații Stripe încorporate

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

Aplicațiile Stripe încorporate permit platformelor construite pe Stripe Connect să afișeze funcționalitatea aplicațiilor terțe direct în propriile panouri de administrare. Cu ajutorul componentelor încorporate Connect, poți oferi conturilor conectate acces la aplicații precum QuickBooks, Xero și Mailchimp, fără ca ele să fie nevoite să intre în Stripe Dashboard.

Caution

**Status: planificat, neconstruit.** Tajo nu are nicio aplicație Stripe, deci nimic din această secțiune nu poate fi instalat astăzi. Identificatorii de aplicație, URL-urile și credențialele din această pagină sunt exemple ilustrative, nu endpointuri reale.

## Prezentare generală

Aplicațiile încorporate folosesc două componente Connect esențiale:

- **`app-install`**: afișează un buton de instalare pentru o aplicație Stripe în interfața platformei tale
- **`app-viewport`**: afișează o anumită vizualizare a aplicației în interfața platformei tale

Astfel, operatorii de platforme pot încorpora instrumente de contabilitate, marketing și operațiuni direct în produsul lor.

## Aplicații acceptate

Următoarele aplicații pot fi încorporate prin componente Connect:

| Aplicație | Categorie | Caz de utilizare |
| --- | --- | --- |
| **QuickBooks** | Contabilitate | Sincronizează plățile și facturile cu QuickBooks |
| **Xero** | Contabilitate | Contabilitate și reconciliere automate |
| **Mailchimp** | Marketing | Sincronizează datele clienților pentru campanii de e-mail |
| **Aplicații personalizate** | Oricare | Propriile tale aplicații Stripe, create pentru platforma ta |

Tip

Integrarea Tajo pentru Brevo poate fi încorporată în platformele Connect, permițând conturilor conectate să își sincronizeze datele Stripe cu Brevo prin interfața proprie a platformei.

## Configurare cu API-ul Account Sessions

Pentru a încorpora aplicații, trebuie să creezi Account Sessions cu componentele potrivite activate:

### Pe server: creează o 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 });
```

### Pe client: inițializează 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;
  },
});
```

## Componenta App Install

Componenta `app-install` afișează un buton de instalare pe care conturile conectate îl pot folosi pentru a instala o aplicație 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>
  );
};
```

## Componenta App Viewport

Componenta `app-viewport` afișează o anumită vizualizare a aplicației în platforma ta:

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

## Schema metadatelor pentru plățile cu destinație

Când folosești aplicații încorporate cu plăți cu destinație (destination charges), obișnuite în platformele Connect, metadatele plății transportă date structurate pe care integrările de contabilitate și de marketing le pot consuma.

### Integrări de contabilitate

Pentru aplicații precum QuickBooks și Xero, metadatele plăților cu destinație respectă această schemă:

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

| Câmp | Tip | Descriere |
| --- | --- | --- |
| `customer_id` | string | Identificatorul clientului în platformă |
| `customer_email` | string | E-mailul clientului, pentru potrivirea facturilor și chitanțelor |
| `product_name` | string | Numele afișat al produsului, pentru liniile de comandă |
| `product_id` | string | ID-ul produsului în Stripe |
| `quantity` | string | Cantitatea articolului |
| `unit_amount` | string | Prețul unitar în cea mai mică unitate monetară (cenți) |
| `currency` | string | Codul ISO de trei litere al monedei |
| `platform_fee` | string | Valoarea comisionului aplicației, în cea mai mică unitate monetară |
| `platform_fee_currency` | string | Moneda comisionului platformei |
| `tax_amount` | string | Valoarea taxei, în cea mai mică unitate monetară |
| `tax_rate_id` | string | ID-ul cotei de taxă Stripe aplicate |
| `invoice_id` | string | ID-ul facturii asociate |
| `order_id` | string | Identificatorul intern al comenzii în platformă |

### Integrări de marketing

Pentru aplicații precum Mailchimp și integrarea Tajo pentru Brevo, metadatele fac posibile segmentarea clienților și targetarea campaniilor:

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

Aceste metadate fac posibile automatizări Brevo precum:

- **Serii de bun venit** pentru cei care cumpără prima dată (`is_first_purchase: "true"`)
- **Campanii de upsell** pe baza câmpurilor `product_category` și `purchase_value`
- **Fluxuri de retenție** pentru clienții cu abonament, pe baza câmpului `subscription_interval`
- **Campanii de recâștigare** care vizează clienții cu `lifetime_value` mare care renunță

## Exemplu de integrare într-o platformă

O integrare completă de platformă care încorporează aplicația Tajo pentru 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>
  );
};
```

## Considerații de securitate

Când încorporezi aplicații în platforma ta:

- **Account Sessions expiră**: creează sesiuni noi când e nevoie, nu păstra în cache secretele de client
- **Controlul domeniului de acces**: folosește `allowed_apps` pentru a limita aplicațiile care pot fi instalate
- **Izolarea datelor**: datele fiecărui cont conectat sunt izolate, platforma nu poate accesa datele aplicației
- **Anteturi CSP**: asigură-te că politica de securitate a conținutului (Content Security Policy) a platformei tale permite conexiuni către `https://connect-js.stripe.com`

Caution

Componentele pentru aplicații încorporate necesită o integrare Connect cu acces la API-ul Account Sessions. Conturile Stripe standard nu pot folosi componente încorporate.