---
title: "Referência de viewports | Tajo"
description: "Referência completa dos viewports do Stripe Dashboard em que a interface do seu Stripe App pode ser renderizada"
url: https://tajo.io/pt/docs/stripe-apps/viewports/
markdown: https://tajo.io/pt/docs/stripe-apps/viewports.md
lang: pt-BR
author: "Set Noa"
author_url: https://tajo.io/pt/set-noa/
robots: noindex
---

Solicite acesso antecipado

Indique o seu nome e endereço de e-mail profissional. Enviaremos um link para confirmar o seu pedido de acesso ao Tajo.

# Referência de viewports

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

Os viewports definem onde os componentes de interface do seu Stripe App aparecem dentro do Stripe Dashboard. Cada viewport corresponde a uma página ou a um local específico do Dashboard em que o seu app pode renderizar uma visão.

Caution

**Status: planejado, não construído.** A Tajo não tem um Stripe App, então nada nesta seção pode ser instalado hoje. Os identificadores de app, URLs e credenciais desta página são exemplos ilustrativos, não endpoints reais.

## Como os viewports funcionam

Quando você declara uma visão no manifesto do app, você associa um componente React a um viewport:

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

O componente é renderizado na gaveta do app (painel lateral) quando o usuário navega até a página correspondente do Dashboard e abre o seu app.

## Viewports de todo o Dashboard e viewports de página específica

### Viewports de todo o Dashboard

Estes viewports estão disponíveis em todas as páginas do Stripe Dashboard:

| ID do viewport | Descrição |
| --- | --- |
| `stripe.dashboard.drawer.default` | Visão padrão da gaveta, acessível de qualquer página do Dashboard pelo ícone do app |
| `stripe.dashboard.home.overview` | Visão geral da página inicial, exibida na tela de entrada do Dashboard |
| `stripe.dashboard.settings` | Página de configurações do app, acessível pelo menu de configurações do app |
| `stripe.dashboard.onboarding` | Fluxo de onboarding, exibido depois da instalação do app |

Tip

O viewport `drawer.default` funciona como alternativa. Se um usuário abrir o seu app em uma página para a qual você não declarou um viewport específico, a visão `drawer.default` é renderizada no lugar.

### Viewports de página específica

Estes viewports são renderizados apenas quando o usuário está na página correspondente do Dashboard:

## Payments

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Lista de pagamentos | `/payments` |  |
| `stripe.dashboard.payment.detail` | Detalhe do pagamento | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Detalhe da cobrança | `/payments/:id` (legado) | Charge |

## Clientes

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Lista de clientes | `/customers` |  |
| `stripe.dashboard.customer.detail` | Detalhe do cliente | `/customers/:id` | Customer |

## Produtos e preços

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Lista de produtos | `/products` |  |
| `stripe.dashboard.product.detail` | Detalhe do produto | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detalhe do preço | `/prices/:id` | Price |

## Faturas

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Lista de faturas | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detalhe da fatura | `/invoices/:id` | Invoice |

## Assinaturas

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Lista de assinaturas | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Detalhe da assinatura | `/subscriptions/:id` | Subscription |

## Checkout

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Lista de Checkout Sessions | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detalhe da Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Lista de Payment Links | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detalhe do Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Lista de contas conectadas | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detalhe da conta conectada | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Lista de transferências | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detalhe da transferência | `/connect/transfers/:id` | Transfer |

## Billing

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Lista de cupons | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detalhe do cupom | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Lista de orçamentos | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detalhe do orçamento | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Detalhe da nota de crédito | `/credit-notes/:id` | CreditNote |

## Repasses

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Lista de repasses | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Detalhe do repasse | `/payouts/:id` | Payout |

## Contestações

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Lista de contestações | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detalhe da contestação | `/disputes/:id` | Dispute |

## Terminal

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Lista de maquininhas | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detalhe da maquininha | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Lista de locais | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detalhe do local | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID do viewport | Página | Padrão de URL | Tipo de objeto |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Lista de cartões | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detalhe do cartão | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Lista de portadores | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detalhe do portador | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Lista de transações | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Lista de autorizações | `/issuing/authorizations` |  |

## Acesso ao contexto do objeto

Quando o seu app é renderizado em um viewport de detalhe, ele recebe o objeto Stripe correspondente 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 de lista e contexto de detalhe

| Tipo de viewport | Contexto do objeto | Caso de uso |
| --- | --- | --- |
| **Lista** (por exemplo, `customer.list`) | Indisponível, nenhum objeto específico selecionado | Mostrar dados agregados, visões de resumo ou ações em lote |
| **Detalhe** (por exemplo, `customer.detail`) | Objeto Stripe completo da página atual | Mostrar dados, ações e integrações específicos do objeto |

## Viewports recomendados para a integração Tajo com a Brevo

Para o app de integração da Tajo com a Brevo, estes viewports oferecem o maior valor:

```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 | Finalidade |
| --- | --- |
| **CustomerDetailView** | Mostrar os dados do contato na Brevo, o status de sincronização e o engajamento de um cliente específico |
| **CustomerListView** | Mostrar os controles de sincronização em lote e as estatísticas agregadas de sincronização com a Brevo |
| **PaymentDetailView** | Mostrar quais eventos da Brevo foram disparados por este pagamento |
| **SubscriptionDetailView** | Mostrar o status da automação da Brevo para esta assinatura |
| **OverviewView** | Widget da página inicial do Dashboard com a saúde da sincronização e as principais métricas da Brevo |
| **DrawerView** | Gaveta geral do app com ações rápidas e visão geral do status |
| **SettingsView** | Configurar a chave da API da Brevo, as preferências de sincronização e os mapeamentos de campos |
| **OnboardingView** | Orientar novos usuários na conexão da conta Brevo |

## Disponibilidade dos viewports

Nem todos os viewports estão disponíveis em todos os modos do Stripe Dashboard:

| Modo | Viewports disponíveis |
| --- | --- |
| **Modo live** | Todos os viewports |
| **Modo de teste** | Todos os viewports (usa dados de teste) |
| **Sandbox** | Todos os viewports (se `sandbox_install_compatible: true`) |

Caution

Se o seu manifesto declarar um viewport que não existe, o envio do app falha na validação. Sempre confira os IDs de viewport nesta referência.