---
title: "Viewports-Referenz | Tajo"
description: "Vollständige Referenz der Viewports im Stripe Dashboard, in denen die Oberfläche deiner Stripe App rendern kann"
url: https://tajo.io/de/docs/stripe-apps/viewports/
markdown: https://tajo.io/de/docs/stripe-apps/viewports.md
lang: de-DE
author: "Set Noa"
author_url: https://tajo.io/de/set-noa/
robots: noindex
---

Beantrage frühzeitigen Zugang

Gib deinen Vornamen und deine geschäftliche E-Mail-Adresse ein. Wir senden dir einen Link, mit dem du deine Anfrage für den Tajo-Zugang bestätigst.

# Viewports-Referenz

[Set Noa](https://tajo.io/de/set-noa/)

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.

Caution

**Status: geplant, nicht gebaut.** Tajo hat keine Stripe App, daher lässt sich nichts in diesem Abschnitt heute installieren. Die App-Kennungen, URLs und Zugangsdaten auf dieser Seite sind illustrative Platzhalter, keine echten Endpunkte.

## So funktionieren Viewports

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

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

```typescript
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:

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