Viewports-referens

Viewports definierar var din Stripe Apps UI-komponenter visas i Stripe Dashboard. Varje viewport motsvarar en specifik Dashboard-sida eller plats där din app kan rendera en vy.

Hur viewports fungerar

När du deklarerar en vy i ditt app-manifest mappar du en React-komponent till en viewport:

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

Komponenten renderas i appdradern (sidopanelen) när en användare navigerar till motsvarande Dashboard-sida och öppnar din app.

Dashboardomfattande vs sidspecifika viewports

Dashboardomfattande viewports

Dessa viewports är tillgängliga på varje sida i Stripe Dashboard:

Viewport-ID	Beskrivning
`stripe.dashboard.drawer.default`	Standard drader-vy, tillgänglig från valfri Dashboard-sida via appikonen
`stripe.dashboard.home.overview`	Startsidöversikt, visas på Dashboard-landningssidan
`stripe.dashboard.settings`	Appinställningssida, tillgänglig från appens inställningsmeny
`stripe.dashboard.onboarding`	Onboarding-flöde, visas efter appinstallation

Tip

Viewporten drawer.default fungerar som reserv. Om en användare öppnar din app på en sida där du inte deklarerat en specifik viewport renderas drawer.default-vyn istället.

Sidspecifika viewports

Dessa viewports renderas bara när användaren är på motsvarande Dashboard-sida:

Betalningar

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.payment.list`	Betalningslista	`/payments`	,
`stripe.dashboard.payment.detail`	Betalningsdetalj	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Avgiftsdetalj	`/payments/:id` (legacy)	Charge

Kunder

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.customer.list`	Kundlista	`/customers`	,
`stripe.dashboard.customer.detail`	Kunddetalj	`/customers/:id`	Customer

Produkter och priser

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.product.list`	Produktlista	`/products`	,
`stripe.dashboard.product.detail`	Produktdetalj	`/products/:id`	Product
`stripe.dashboard.price.detail`	Prisdetalj	`/prices/:id`	Price

Fakturor

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.invoice.list`	Fakturalista	`/invoices`	,
`stripe.dashboard.invoice.detail`	Fakturadetalj	`/invoices/:id`	Invoice

Prenumerationer

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.subscription.list`	Prenumerationslista	`/subscriptions`	,
`stripe.dashboard.subscription.detail`	Prenumerationsdetalj	`/subscriptions/:id`	Subscription

Checkout

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.checkout.session.list`	Checkout Sessions-lista	`/checkout/sessions`	,
`stripe.dashboard.checkout.session.detail`	Checkout Session-detalj	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Betalningslänklista	`/payment-links`	,
`stripe.dashboard.payment-link.detail`	Betalningslänkdetalj	`/payment-links/:id`	PaymentLink

Connect

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.connect.account.list`	Anslutna kontolista	`/connect/accounts`	,
`stripe.dashboard.connect.account.detail`	Anslutet kontodetalj	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Överföringslista	`/connect/transfers`	,
`stripe.dashboard.transfer.detail`	Överföringsdetalj	`/connect/transfers/:id`	Transfer

Fakturering

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.coupon.list`	Kupponglista	`/coupons`	,
`stripe.dashboard.coupon.detail`	Kupongdetalj	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Offertelista	`/quotes`	,
`stripe.dashboard.quote.detail`	Offertdetalj	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Kreditnotadetalj	`/credit-notes/:id`	CreditNote

Utbetalningar

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.payout.list`	Utbetalningslista	`/payouts`	,
`stripe.dashboard.payout.detail`	Utbetalningsdetalj	`/payouts/:id`	Payout

Tvister

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.dispute.list`	Tvistlista	`/disputes`	,
`stripe.dashboard.dispute.detail`	Tvistdetalj	`/disputes/:id`	Dispute

Terminal

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.terminal.reader.list`	Läsarlista	`/terminal/readers`	,
`stripe.dashboard.terminal.reader.detail`	Läsardetalj	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Platslista	`/terminal/locations`	,
`stripe.dashboard.terminal.location.detail`	Platsdetalj	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport-ID	Sida	URL-mönster	Objekttyp
`stripe.dashboard.issuing.card.list`	Kortlista	`/issuing/cards`	,
`stripe.dashboard.issuing.card.detail`	Kortdetalj	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Korthållarlista	`/issuing/cardholders`	,
`stripe.dashboard.issuing.cardholder.detail`	Korthållardetalj	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Transaktionslista	`/issuing/transactions`	,
`stripe.dashboard.issuing.authorization.list`	Auktoriseringslista	`/issuing/authorizations`	,

Åtkomst till objektkontext

När din app renderas i en detalj-viewport tar den emot det relevanta Stripe-objektet som kontext:

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

Lista vs detalj-kontext

Viewport-typ	Objektkontext	Användningsfall
Lista (t.ex. `customer.list`)	Ej tillgänglig – inget specifikt objekt valt	Visa aggregerade data, sammanfattningsvyer eller batchåtgärder
Detalj (t.ex. `customer.detail`)	Fullständigt Stripe-objekt för den aktuella sidan	Visa objektspecifika data, åtgärder och integrationer

Rekommenderade viewports för Tajo Brevo-integrationen

För Tajo Brevo-integrationsappen erbjuder dessa viewports mest värde:

{
  "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	Syfte
CustomerDetailView	Visa Brevo-kontaktinfo, synkstatus och engagemangdata för en specifik kund
CustomerListView	Visa batch-synkkontroller och aggregerade Brevo-synkstatistiker
PaymentDetailView	Visa vilka Brevo-händelser som utlöstes av denna betalning
SubscriptionDetailView	Visa Brevo-automationsstatus för denna prenumeration
OverviewView	Dashboard-hemwidget med synkhälsa och viktiga Brevo-mätvärden
DrawerView	Allmän appdrade med snabbåtgärder och statusöversikt
SettingsView	Konfigurera Brevo API-nyckel, synkpreferenser och fältmappningar
OnboardingView	Guida nya användare genom att ansluta sitt Brevo-konto

Viewport-tillgänglighet

Inte alla viewports är tillgängliga i alla Stripe Dashboard-lägen:

Läge	Tillgängliga viewports
Live-läge	Alla viewports
Testläge	Alla viewports (använder testdata)
Sandbox	Alla viewports (om `sandbox_install_compatible: true`)

Caution

Om ditt manifest deklarerar en viewport som inte finns misslyckas app-uppladdningen vid validering. Kontrollera alltid viewport-ID:n mot denna referens.