---
title: "Referencia de viewports | Tajo"
description: "Referencia completa de los viewports del panel de Stripe donde puede renderizarse la interfaz de tu Stripe App"
url: https://tajo.io/es/docs/stripe-apps/viewports/
markdown: https://tajo.io/es/docs/stripe-apps/viewports.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.

# Referencia de viewports

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

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.

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.

## Cómo funcionan los viewports

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

```json
{
  "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:

```typescript
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:

```json
{
  "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.