Viewports Reference

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.

How Viewports Work

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

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

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:

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