On this page

Viewportreference

Viewports definerer hvor din Stripe Apps UI-komponenter vises i Stripe Dashboard. Hvert viewport svarer til en specifik Dashboard-side eller placering hvor din app kan gengive en visning.

Sådan fungerer viewports

Når du deklarerer en visning i dit app-manifest, mapper du en React-komponent til et viewport:

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

Komponenten gengives i app-skuffen (sidepanel) når en bruger navigerer til den tilsvarende Dashboard-side og åbner din app.

Dashboard-wide vs sidespecifikke viewports

Dashboard-wide viewports

Disse viewports er tilgængelige på alle sider i Stripe Dashboard:

Viewport-ID	Beskrivelse
`stripe.dashboard.drawer.default`	Standard skuffevisning, tilgængelig fra alle Dashboard-sider via app-ikonet
`stripe.dashboard.home.overview`	Startside oversigt, vist på Dashboard-landingssiden
`stripe.dashboard.settings`	App-indstillingsside, tilgængelig fra appens indstillingsmenu
`stripe.dashboard.onboarding`	Onboarding-flow, vist efter app-installation

Tip

drawer.default-viewportet fungerer som fallback. Hvis en bruger åbner din app på en side hvor du ikke har deklareret et specifikt viewport, gengives drawer.default-visningen i stedet.

Sidespecifikke viewports

Disse viewports gengives kun når brugeren er på den tilsvarende Dashboard-side:

Betalinger

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.payment.list`	Betalingsliste	`/payments`	,
`stripe.dashboard.payment.detail`	Betalingsdetalje	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Opkrævningsdetalje	`/payments/:id` (legacy)	Charge

Kunder

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.customer.list`	Kundeliste	`/customers`	,
`stripe.dashboard.customer.detail`	Kundedetalje	`/customers/:id`	Customer

Produkter og priser

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.product.list`	Produktliste	`/products`	,
`stripe.dashboard.product.detail`	Produktdetalje	`/products/:id`	Product
`stripe.dashboard.price.detail`	Prisdetalje	`/prices/:id`	Price

Fakturaer

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.invoice.list`	Fakturaliste	`/invoices`	,
`stripe.dashboard.invoice.detail`	Fakturaadetalje	`/invoices/:id`	Invoice

Abonnementer

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.subscription.list`	Abonnementsliste	`/subscriptions`	,
`stripe.dashboard.subscription.detail`	Abonnementsdetalje	`/subscriptions/:id`	Subscription

Checkout

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.checkout.session.list`	Checkout Sessions-liste	`/checkout/sessions`	,
`stripe.dashboard.checkout.session.detail`	Checkout Session-detalje	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Betalingslinks-liste	`/payment-links`	,
`stripe.dashboard.payment-link.detail`	Betalingslinkdetalje	`/payment-links/:id`	PaymentLink

Connect

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.connect.account.list`	Tilknyttede konti-liste	`/connect/accounts`	,
`stripe.dashboard.connect.account.detail`	Tilknyttet kontoadetalje	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Overførselsliste	`/connect/transfers`	,
`stripe.dashboard.transfer.detail`	Overførselsdetalje	`/connect/transfers/:id`	Transfer

Fakturering

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.coupon.list`	Kuponliste	`/coupons`	,
`stripe.dashboard.coupon.detail`	Kupondetalje	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Tilbudsliste	`/quotes`	,
`stripe.dashboard.quote.detail`	Tilbudsdetalje	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Kreditnotadetalje	`/credit-notes/:id`	CreditNote

Udbetalinger

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.payout.list`	Udbetalingsliste	`/payouts`	,
`stripe.dashboard.payout.detail`	Udbetalingsdetalje	`/payouts/:id`	Payout

Tvister

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.dispute.list`	Tvistliste	`/disputes`	,
`stripe.dashboard.dispute.detail`	Tvistdetalje	`/disputes/:id`	Dispute

Terminal

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.terminal.reader.list`	Læserliste	`/terminal/readers`	,
`stripe.dashboard.terminal.reader.detail`	Læserdetalje	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Placeringsliste	`/terminal/locations`	,
`stripe.dashboard.terminal.location.detail`	Placeringsdetalje	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.issuing.card.list`	Kortliste	`/issuing/cards`	,
`stripe.dashboard.issuing.card.detail`	Kortdetalje	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Kortholderliste	`/issuing/cardholders`	,
`stripe.dashboard.issuing.cardholder.detail`	Kortholderdetalje	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Transaktionsliste	`/issuing/transactions`	,
`stripe.dashboard.issuing.authorization.list`	Autorisationsliste	`/issuing/authorizations`	,

Tilgang til objektkontekst

Når din app gengives i et detalje-viewport, modtager den det relevante Stripe-objekt som kontekst:

import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  const customerId = objectContext?.id;
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};

Anbefalede viewports til Tajo Brevo-integration

Til Tajo Brevo-integrationsappen giver disse viewports mest værdi:

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

Komponent	Formål
CustomerDetailView	Vis Brevo-kontaktinfo, synkstatus og engagementdata for en specifik kunde
CustomerListView	Vis batch-synkkontroller og samlede Brevo-synkstatistikker
PaymentDetailView	Vis hvilke Brevo-hændelser der blev udløst af denne betaling
SubscriptionDetailView	Vis Brevo-automatiseringsstatus for dette abonnement
OverviewView	Dashboard hjem-widget med synksundhed og nøgle-Brevo-metrics
DrawerView	Generel app-skuffe med hurtige handlinger og statusoversigt
SettingsView	Konfigurer Brevo API-nøgle, synkpræferencer og feltmappings
OnboardingView	Guider nye brugere gennem forbindelsen af deres Brevo-konto

Caution

Hvis dit manifest deklarerer et viewport der ikke eksisterer, vil app-uploaden fejle ved validering. Verificer altid viewport-ID’er mod denne reference.

Viewport­reference