On this page

Viewports Referenz

Viewports definieren, wo die UI-Komponenten Ihrer Stripe App im Stripe Dashboard erscheinen. Jeder Viewport entspricht einer bestimmten Dashboard-Seite oder Position, an der Ihre App eine Ansicht rendern kann.

Funktionsweise von Viewports

Wenn Sie eine Ansicht in Ihrem App-Manifest deklarieren, ordnen Sie eine React-Komponente einem Viewport zu:

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

Dashboard-weite Viewports

Viewport-ID	Beschreibung
`stripe.dashboard.drawer.default`	Standard-Drawer-Ansicht, von jeder Seite über das App-Icon erreichbar
`stripe.dashboard.home.overview`	Startseiten-Übersicht auf der Dashboard-Landingpage
`stripe.dashboard.settings`	App-Einstellungsseite
`stripe.dashboard.onboarding`	Onboarding-Flow nach der App-Installation

Tip

Der drawer.default Viewport dient als Fallback. Wenn ein Benutzer Ihre App auf einer Seite öffnet, für die Sie keinen spezifischen Viewport deklariert haben, wird stattdessen die drawer.default Ansicht gerendert.

Seitenspezifische Viewports

Zahlungen

Viewport-ID	Seite	URL-Muster
`stripe.dashboard.payment.list`	Zahlungsliste	`/payments`
`stripe.dashboard.payment.detail`	Zahlungsdetail	`/payments/:id`

Kunden

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

Produkte & Preise

Viewport-ID	Seite	URL-Muster
`stripe.dashboard.product.list`	Produktliste	`/products`
`stripe.dashboard.product.detail`	Produktdetail	`/products/:id`

Rechnungen

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

Abonnements

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

Empfohlene Viewports für Tajo Brevo-Integration

Komponente	Zweck
CustomerDetailView	Brevo-Kontaktinfos und Synchronisierungsstatus für einen bestimmten Kunden anzeigen
CustomerListView	Batch-Synchronisierungskontrollen und aggregierte Brevo-Synchronisierungsstatistiken
OverviewView	Dashboard-Home-Widget mit Synchronisierungszustand und wichtigen Brevo-Metriken
SettingsView	Brevo API-Schlüssel, Synchronisierungspräferenzen und Feldzuordnungen konfigurieren
OnboardingView	Neue Benutzer durch die Verbindung ihres Brevo-Kontos führen

Caution

Wenn Ihr Manifest einen nicht existierenden Viewport deklariert, schlägt der App-Upload bei der Validierung fehl. Überprüfen Sie Viewport-IDs immer anhand dieser Referenz.