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.

Referencia de viewports

Los viewports definen dónde aparecen los componentes de interfaz de tu Stripe App dentro del panel de Stripe. Cada viewport corresponde a una página o una ubicación concreta del panel donde tu app puede renderizar una vista.

Cómo funcionan los viewports

Cuando declaras una vista en el manifiesto de tu app, asocias un componente de React a un viewport:

{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      }
    ]
  }
}

El componente se renderiza en el cajón de la app (el panel lateral) cuando alguien navega a la página correspondiente del panel y abre tu app.

Viewports globales frente a viewports por página

Viewports globales del panel

Estos viewports están disponibles en todas las páginas del panel de Stripe:

ID del viewport	Descripción
`stripe.dashboard.drawer.default`	Vista de cajón por defecto, accesible desde cualquier página del panel a través del icono de la app
`stripe.dashboard.home.overview`	Resumen de la página de inicio, se muestra en la página principal del panel
`stripe.dashboard.settings`	Página de ajustes de la app, accesible desde el menú de ajustes de la app
`stripe.dashboard.onboarding`	Flujo de incorporación, se muestra tras instalar la app

Tip

El viewport drawer.default actúa como alternativa de reserva. Si alguien abre tu app en una página para la que no has declarado un viewport específico, se renderiza la vista drawer.default.

Viewports por página

Estos viewports solo se renderizan cuando la persona está en la página correspondiente del panel:

Pagos

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.payment.list`	Lista de pagos	`/payments`
`stripe.dashboard.payment.detail`	Detalle de pago	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Detalle de cargo	`/payments/:id` (heredado)	Charge

Clientes

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.customer.list`	Lista de clientes	`/customers`
`stripe.dashboard.customer.detail`	Detalle de cliente	`/customers/:id`	Customer

Productos y precios

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.product.list`	Lista de productos	`/products`
`stripe.dashboard.product.detail`	Detalle de producto	`/products/:id`	Product
`stripe.dashboard.price.detail`	Detalle de precio	`/prices/:id`	Price

Facturas

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.invoice.list`	Lista de facturas	`/invoices`
`stripe.dashboard.invoice.detail`	Detalle de factura	`/invoices/:id`	Invoice

Suscripciones

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.subscription.list`	Lista de suscripciones	`/subscriptions`
`stripe.dashboard.subscription.detail`	Detalle de suscripción	`/subscriptions/:id`	Subscription

Checkout

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.checkout.session.list`	Lista de sesiones de Checkout	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detalle de sesión de Checkout	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Lista de enlaces de pago	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detalle de enlace de pago	`/payment-links/:id`	PaymentLink

Connect

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.connect.account.list`	Lista de cuentas conectadas	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detalle de cuenta conectada	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Lista de transferencias	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Detalle de transferencia	`/connect/transfers/:id`	Transfer

Facturación

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.coupon.list`	Lista de cupones	`/coupons`
`stripe.dashboard.coupon.detail`	Detalle de cupón	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Lista de presupuestos	`/quotes`
`stripe.dashboard.quote.detail`	Detalle de presupuesto	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Detalle de nota de crédito	`/credit-notes/:id`	CreditNote

Pagos salientes

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.payout.list`	Lista de pagos salientes	`/payouts`
`stripe.dashboard.payout.detail`	Detalle de pago saliente	`/payouts/:id`	Payout

Disputas

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.dispute.list`	Lista de disputas	`/disputes`
`stripe.dashboard.dispute.detail`	Detalle de disputa	`/disputes/:id`	Dispute

Terminal

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.terminal.reader.list`	Lista de lectores	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detalle de lector	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Lista de ubicaciones	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Detalle de ubicación	`/terminal/locations/:id`	TerminalLocation

Issuing

ID del viewport	Página	Patrón de URL	Tipo de objeto
`stripe.dashboard.issuing.card.list`	Lista de tarjetas	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Detalle de tarjeta	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Lista de titulares	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detalle de titular	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Lista de transacciones	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Lista de autorizaciones	`/issuing/authorizations`

Acceso al contexto del objeto

Cuando tu app se renderiza en un viewport de detalle, recibe el objeto de Stripe correspondiente como contexto:

import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  // objectContext contains the current Stripe object
  const customerId = objectContext?.id; // "cus_xxxxx"
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};

Contexto en listas frente a detalles

Tipo de viewport	Contexto del objeto	Caso de uso
Lista (por ejemplo, `customer.list`)	No disponible, no hay ningún objeto seleccionado	Mostrar datos agregados, vistas de resumen o acciones por lotes
Detalle (por ejemplo, `customer.detail`)	Objeto de Stripe completo de la página actual	Mostrar datos, acciones e integraciones propias del objeto

Viewports recomendados para la integración de Tajo con Brevo

Para la app de integración de Tajo con Brevo, estos son los viewports que más valor aportan:

{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "viewport": "stripe.dashboard.payment.detail",
        "component": "PaymentDetailView"
      },
      {
        "viewport": "stripe.dashboard.subscription.detail",
        "component": "SubscriptionDetailView"
      },
      {
        "viewport": "stripe.dashboard.home.overview",
        "component": "OverviewView"
      },
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "DrawerView"
      },
      {
        "viewport": "stripe.dashboard.settings",
        "component": "SettingsView"
      },
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  }
}

Componente	Finalidad
CustomerDetailView	Muestra los datos del contacto en Brevo, el estado de sincronización y la interacción de un cliente concreto
CustomerListView	Muestra los controles de sincronización por lotes y las estadísticas agregadas de sincronización con Brevo
PaymentDetailView	Muestra qué eventos de Brevo ha disparado este pago
SubscriptionDetailView	Muestra el estado de las automatizaciones de Brevo para esta suscripción
OverviewView	Widget de la página de inicio del panel con la salud de la sincronización y las métricas clave de Brevo
DrawerView	Cajón general de la app con acciones rápidas y un resumen del estado
SettingsView	Configura la clave de API de Brevo, las preferencias de sincronización y las correspondencias de campos
OnboardingView	Guía a las personas nuevas para que conecten su cuenta de Brevo

Disponibilidad de los viewports

No todos los viewports están disponibles en todos los modos del panel de Stripe:

Modo	Viewports disponibles
Modo real	Todos los viewports
Modo de prueba	Todos los viewports (con datos de prueba)
Sandbox	Todos los viewports (si `sandbox_install_compatible: true`)

Caution

Si tu manifiesto declara un viewport que no existe, la subida de la app no pasará la validación. Verifica siempre los ID de viewport con esta referencia.