---
title: "Viewports Reference | Tajo"
description: "Complete reference of Stripe Dashboard viewports where your Stripe App UI can render"
url: https://tajo.io/docs/stripe-apps/viewports/
markdown: https://tajo.io/docs/stripe-apps/viewports.md
lang: en-US
author: "Set Noa"
author_url: https://tajo.io/set-noa/
---

# Viewports Reference

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

Viewports define where your Stripe App’s UI components appear within the Stripe Dashboard. Each viewport corresponds to a specific Dashboard page or location where your app can render a view.

Caution

**Status: planned, not built.** Tajo has no Stripe App, so nothing in this section can be installed today. The app identifiers, URLs and credentials on this page are illustrative placeholders, not live endpoints.

## How Viewports Work

When you declare a view in your app manifest, you map a React component to a viewport:

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

The component renders in the app drawer (side panel) when a user navigates to the corresponding Dashboard page and opens your app.

## Dashboard-Wide vs Page-Specific Viewports

### Dashboard-Wide Viewports

These viewports are available on every page of the Stripe Dashboard:

| Viewport ID | Description |
| --- | --- |
| `stripe.dashboard.drawer.default` | Default drawer view, accessible from any Dashboard page via the app icon |
| `stripe.dashboard.home.overview` | Home page overview, shown on the Dashboard landing page |
| `stripe.dashboard.settings` | App settings page, accessible from the app’s settings menu |
| `stripe.dashboard.onboarding` | Onboarding flow, shown after app installation |

Tip

The `drawer.default` viewport acts as a fallback. If a user opens your app on a page where you haven’t declared a specific viewport, the `drawer.default` view renders instead.

### Page-Specific Viewports

These viewports render only when the user is on the corresponding Dashboard page:

## Payments

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Payments list | `/payments` |  |
| `stripe.dashboard.payment.detail` | Payment detail | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Charge detail | `/payments/:id` (legacy) | Charge |

## Customers

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Customers list | `/customers` |  |
| `stripe.dashboard.customer.detail` | Customer detail | `/customers/:id` | Customer |

## Products & Prices

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Products list | `/products` |  |
| `stripe.dashboard.product.detail` | Product detail | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Price detail | `/prices/:id` | Price |

## Invoices

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Invoices list | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Invoice detail | `/invoices/:id` | Invoice |

## Subscriptions

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Subscriptions list | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Subscription detail | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout Sessions list | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout Session detail | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Payment Links list | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Payment Link detail | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Connected accounts list | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Connected account detail | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Transfers list | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Transfer detail | `/connect/transfers/:id` | Transfer |

## Billing

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Coupons list | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Coupon detail | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Quotes list | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Quote detail | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Credit note detail | `/credit-notes/:id` | CreditNote |

## Payouts

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Payouts list | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Payout detail | `/payouts/:id` | Payout |

## Disputes

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Disputes list | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Dispute detail | `/disputes/:id` | Dispute |

## Terminal

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Readers list | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Reader detail | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Locations list | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Location detail | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport ID | Page | URL Pattern | Object Type |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Cards list | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Card detail | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Cardholders list | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Cardholder detail | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Transactions list | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Authorizations list | `/issuing/authorizations` |  |

## Accessing Object Context

When your app renders in a detail viewport, it receives the relevant Stripe object as context:

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

### List vs Detail Context

| Viewport Type | Object Context | Use Case |
| --- | --- | --- |
| **List** (e.g., `customer.list`) | Not available, no specific object selected | Show aggregate data, summary views, or batch actions |
| **Detail** (e.g., `customer.detail`) | Full Stripe object for the current page | Show object-specific data, actions, and integrations |

## Recommended Viewports for Tajo Brevo Integration

For the Tajo Brevo integration app, these viewports provide the most value:

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

| Component | Purpose |
| --- | --- |
| **CustomerDetailView** | Show Brevo contact info, sync status, and engagement data for a specific customer |
| **CustomerListView** | Show batch sync controls and aggregate Brevo sync statistics |
| **PaymentDetailView** | Show which Brevo events were triggered by this payment |
| **SubscriptionDetailView** | Show Brevo automation status for this subscription |
| **OverviewView** | Dashboard home widget with sync health and key Brevo metrics |
| **DrawerView** | General app drawer with quick actions and status overview |
| **SettingsView** | Configure Brevo API key, sync preferences, and field mappings |
| **OnboardingView** | Guide new users through connecting their Brevo account |

## Viewport Availability

Not all viewports are available in all Stripe Dashboard modes:

| Mode | Available Viewports |
| --- | --- |
| **Live mode** | All viewports |
| **Test mode** | All viewports (uses test data) |
| **Sandbox** | All viewports (if `sandbox_install_compatible: true`) |

Caution

If your manifest declares a viewport that doesn’t exist, the app upload will fail validation. Always verify viewport IDs against this reference.