---
title: "Stripe Apps embebidas | Tajo"
description: "Usa los componentes embebidos de Connect para integrar Stripe Apps en tu propia plataforma"
url: https://tajo.io/es/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/es/docs/stripe-apps/embedded-apps.md
lang: es-ES
author: "Set Noa"
author_url: https://tajo.io/es/set-noa/
robots: noindex
---

Solicita acceso anticipado

Escribe tu nombre y dirección de correo de trabajo. Te enviaremos un enlace para confirmar tu solicitud de acceso a Tajo.

# Stripe Apps embebidas

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

Las Stripe Apps embebidas permiten que las plataformas construidas sobre Stripe Connect muestren las funciones de apps de terceros directamente en sus propios paneles de control. Con los componentes embebidos de Connect, puedes dar a tus cuentas conectadas acceso a apps como QuickBooks, Xero y Mailchimp sin que tengan que entrar en el Stripe Dashboard.

Caution

**Estado: planificada, no construida.** Tajo no tiene ninguna Stripe App, así que hoy no se puede instalar nada de esta sección. Los identificadores de app, las URLs y las credenciales de esta página son marcadores de posición ilustrativos, no endpoints reales.

## Resumen

Las apps embebidas usan dos componentes clave de Connect:

- **`app-install`**: muestra un botón de instalación de una Stripe App dentro de la interfaz de tu plataforma
- **`app-viewport`**: muestra un viewport concreto de la app dentro de la interfaz de tu plataforma

Así, los operadores de la plataforma pueden integrar herramientas de contabilidad, marketing y operaciones directamente en su producto.

## Apps compatibles

Estas apps admiten la integración mediante componentes de Connect:

| App | Categoría | Caso de uso |
| --- | --- | --- |
| **QuickBooks** | Contabilidad | Sincroniza pagos y facturas con QuickBooks |
| **Xero** | Contabilidad | Contabilidad y conciliación automatizadas |
| **Mailchimp** | Marketing | Sincroniza los datos de clientes para tus campañas de email |
| **Apps personalizadas** | Cualquiera | Tus propias Stripe Apps creadas para tu plataforma |

Tip

La integración de Tajo con Brevo se puede embeber en plataformas Connect, de modo que las cuentas conectadas sincronizan sus datos de Stripe con Brevo desde la propia interfaz de la plataforma.

## Configuración con la Account Sessions API

Para embeber apps tienes que crear Account Sessions con los componentes correspondientes activados:

### En el servidor: crear la 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 });
```

### En el cliente: inicializar 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;
  },
});
```

## Componente app install

El componente `app-install` muestra un botón de instalación que tus cuentas conectadas pueden usar para instalar una Stripe App:

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

## Componente app viewport

El componente `app-viewport` muestra un viewport concreto de la app dentro de tu plataforma:

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

## Esquema de metadatos de los cargos con destino

Cuando usas apps embebidas con cargos con destino (destination charges), habituales en las plataformas Connect, los metadatos del cargo llevan datos estructurados que las integraciones de contabilidad y de marketing pueden consumir.

### Integraciones de contabilidad

En apps como QuickBooks y Xero, los metadatos del cargo con destino siguen este esquema:

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

| Campo | Tipo | Descripción |
| --- | --- | --- |
| `customer_id` | string | Identificador del cliente en la plataforma |
| `customer_email` | string | Email del cliente para conciliar facturas y recibos |
| `product_name` | string | Nombre visible del producto en las líneas de detalle |
| `product_id` | string | ID del producto en Stripe |
| `quantity` | string | Cantidad del artículo |
| `unit_amount` | string | Precio unitario en la unidad monetaria mínima (céntimos) |
| `currency` | string | Código ISO de moneda de tres letras |
| `platform_fee` | string | Importe de la comisión de la aplicación en la unidad monetaria mínima |
| `platform_fee_currency` | string | Moneda de la comisión de la plataforma |
| `tax_amount` | string | Importe de impuestos en la unidad monetaria mínima |
| `tax_rate_id` | string | ID del tipo impositivo de Stripe aplicado |
| `invoice_id` | string | ID de la factura asociada |
| `order_id` | string | Identificador interno del pedido en la plataforma |

### Integraciones de marketing

En apps como Mailchimp y la integración de Tajo con Brevo, estos metadatos permiten segmentar clientes y orientar campañas:

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

Con estos metadatos puedes montar automatizaciones en Brevo como:

- **Series de bienvenida** para quienes compran por primera vez (`is_first_purchase: "true"`)
- **Campañas de upsell** según `product_category` y `purchase_value`
- **Flujos de retención** para clientes con suscripción según `subscription_interval`
- **Campañas de recuperación** dirigidas a clientes con un `lifetime_value` alto que se dan de baja

## Ejemplo de integración en una plataforma

Una integración completa que embebe la app de Tajo para 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>
  );
};
```

## Consideraciones de seguridad

Cuando embebas apps en tu plataforma:

- **Las Account Sessions caducan**: crea sesiones nuevas cuando haga falta y no guardes en caché los client secrets
- **Control del alcance**: usa `allowed_apps` para restringir qué apps se pueden instalar
- **Aislamiento de datos**: los datos de cada cuenta conectada están aislados y la plataforma no puede acceder a los datos de la app
- **Cabeceras CSP**: comprueba que la Content Security Policy de tu plataforma permite las conexiones a `https://connect-js.stripe.com`

Caution

Los componentes de apps embebidas requieren una integración de Connect con acceso a la Account Sessions API. Las cuentas estándar de Stripe no pueden usar componentes embebidos.