Beantrage frühzeitigen Zugang

Gib deinen Vornamen und eine E-Mail-Adresse oder Telefonnummer an. Wir melden uns mit den Details zum Tajo-Zugang bei dir.

Viewports-Referenz

Viewports legen fest, wo die UI-Komponenten deiner Stripe App im Stripe Dashboard erscheinen. Jeder Viewport entspricht einer bestimmten Dashboard-Seite oder Stelle, an der deine App eine Ansicht rendern kann.

So funktionieren Viewports

Wenn du eine Ansicht in deinem App-Manifest deklarierst, ordnest du eine React-Komponente einem Viewport zu:

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

Die Komponente rendert im App-Drawer (Seitenleiste), sobald jemand die passende Dashboard-Seite aufruft und deine App öffnet.

Dashboard-weite gegenüber seitenspezifischen Viewports

Dashboard-weite Viewports

Diese Viewports stehen auf jeder Seite des Stripe Dashboards zur Verfügung:

Viewport-ID	Beschreibung
`stripe.dashboard.drawer.default`	Standardansicht im Drawer, von jeder Dashboard-Seite über das App-Icon erreichbar
`stripe.dashboard.home.overview`	Übersicht auf der Startseite, wird auf der Dashboard-Landingpage angezeigt
`stripe.dashboard.settings`	Einstellungsseite der App, über das Einstellungsmenü der App erreichbar
`stripe.dashboard.onboarding`	Onboarding-Ablauf, wird nach der Installation der App angezeigt

Tip

Der Viewport drawer.default dient als Rückfallebene. Wenn jemand deine App auf einer Seite öffnet, für die du keinen eigenen Viewport deklariert hast, rendert stattdessen die Ansicht drawer.default.

Seitenspezifische Viewports

Diese Viewports rendern nur, wenn die passende Dashboard-Seite geöffnet ist:

Zahlungen

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.payment.list`	Zahlungsliste	`/payments`
`stripe.dashboard.payment.detail`	Zahlungsdetail	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Belastungsdetail	`/payments/:id` (veraltet)	Charge

Kund:innen

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.customer.list`	Kundenliste	`/customers`
`stripe.dashboard.customer.detail`	Kundendetail	`/customers/:id`	Customer

Produkte & Preise

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.product.list`	Produktliste	`/products`
`stripe.dashboard.product.detail`	Produktdetail	`/products/:id`	Product
`stripe.dashboard.price.detail`	Preisdetail	`/prices/:id`	Price

Rechnungen

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.invoice.list`	Rechnungsliste	`/invoices`
`stripe.dashboard.invoice.detail`	Rechnungsdetail	`/invoices/:id`	Invoice

Abonnements

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.subscription.list`	Abonnementliste	`/subscriptions`
`stripe.dashboard.subscription.detail`	Abonnementdetail	`/subscriptions/:id`	Subscription

Checkout

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.checkout.session.list`	Liste der Checkout Sessions	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detail einer Checkout Session	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Liste der Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detail eines Payment Links	`/payment-links/:id`	PaymentLink

Connect

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.connect.account.list`	Liste der verbundenen Konten	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detail eines verbundenen Kontos	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Transferliste	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Transferdetail	`/connect/transfers/:id`	Transfer

Billing

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.coupon.list`	Gutscheinliste	`/coupons`
`stripe.dashboard.coupon.detail`	Gutscheindetail	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Angebotsliste	`/quotes`
`stripe.dashboard.quote.detail`	Angebotsdetail	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Gutschriftdetail	`/credit-notes/:id`	CreditNote

Auszahlungen

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.payout.list`	Auszahlungsliste	`/payouts`
`stripe.dashboard.payout.detail`	Auszahlungsdetail	`/payouts/:id`	Payout

Streitfälle

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.dispute.list`	Liste der Streitfälle	`/disputes`
`stripe.dashboard.dispute.detail`	Detail eines Streitfalls	`/disputes/:id`	Dispute

Terminal

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.terminal.reader.list`	Liste der Lesegeräte	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detail eines Lesegeräts	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Standortliste	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Standortdetail	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport-ID	Seite	URL-Muster	Objekttyp
`stripe.dashboard.issuing.card.list`	Kartenliste	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Kartendetail	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Liste der Karteninhaber:innen	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detail einer Karteninhaberin oder eines Karteninhabers	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Transaktionsliste	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Liste der Autorisierungen	`/issuing/authorizations`

Zugriff auf den Objektkontext

Wenn deine App in einem Detail-Viewport rendert, bekommt sie das zugehörige Stripe-Objekt als 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>
  );
};

Kontext bei Listen gegenüber Detailseiten

Viewport-Typ	Objektkontext	Anwendungsfall
Liste (z. B. `customer.list`)	Nicht verfügbar, kein bestimmtes Objekt ausgewählt	Aggregierte Daten, Übersichten oder Sammelaktionen zeigen
Detail (z. B. `customer.detail`)	Das vollständige Stripe-Objekt der aktuellen Seite	Objektbezogene Daten, Aktionen und Integrationen zeigen

Empfohlene Viewports für die Tajo Brevo-Integration

Für die Tajo Brevo-Integration bringen diese Viewports den größten Nutzen:

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

Komponente	Zweck
CustomerDetailView	Zeigt Brevo-Kontaktdaten, Sync-Status und Engagement-Daten für einen bestimmten Kundendatensatz
CustomerListView	Zeigt Steuerelemente für die Sammelsynchronisierung und aggregierte Brevo-Sync-Statistiken
PaymentDetailView	Zeigt, welche Brevo-Events diese Zahlung ausgelöst hat
SubscriptionDetailView	Zeigt den Status der Brevo-Automation für dieses Abonnement
OverviewView	Widget auf der Dashboard-Startseite mit Sync-Zustand und wichtigen Brevo-Metriken
DrawerView	Allgemeiner App-Drawer mit Schnellaktionen und Statusübersicht
SettingsView	Konfiguriert Brevo API-Schlüssel, Sync-Einstellungen und Feldzuordnungen
OnboardingView	Führt neue Nutzer:innen durch die Verbindung ihres Brevo-Kontos

Verfügbarkeit von Viewports

Nicht alle Viewports stehen in allen Modi des Stripe Dashboards zur Verfügung:

Modus	Verfügbare Viewports
Live-Modus	Alle Viewports
Testmodus	Alle Viewports (mit Testdaten)
Sandbox	Alle Viewports (sofern `sandbox_install_compatible: true`)

Caution

Wenn dein Manifest einen Viewport deklariert, den es nicht gibt, scheitert der App-Upload an der Validierung. Prüfe Viewport-IDs immer gegen diese Referenz.