Solicita acceso anticipado

Indica tu nombre y un email o número de teléfono. Nos pondremos en contacto contigo para darte los detalles de acceso a Tajo.

En esta página

Stripe Apps embebidas

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.

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

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

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

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

Componente app viewport

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

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

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:

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

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:

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

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:

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.

Stripe Apps embebidas

Resumen

Apps compatibles

Configuración con la Account Sessions API

En el servidor: crear la Account Session

En el cliente: inicializar Connect.js

Componente app install

JavaScript

React

Componente app viewport

JavaScript

React

Esquema de metadatos de los cargos con destino

Integraciones de contabilidad

Integraciones de marketing

Ejemplo de integración en una plataforma

Consideraciones de seguridad

Solicita acceso anticipado

Gracias, tu suscripción está confirmada.