Referência de viewports

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.

Como os viewports funcionam

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

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

Viewports de página específica

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

Payments

Clientes

Produtos e preços

Faturas

Assinaturas

Checkout

Connect

Billing

Repasses

Contestações

Terminal

Issuing

Acesso ao contexto do objeto

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

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:

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

Disponibilidade dos viewports

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