---
title: "Naslag viewports | Tajo"
description: "Volledig overzicht van de viewports in het Stripe Dashboard waarin de UI van je Stripe App kan renderen"
url: https://tajo.io/nl/docs/stripe-apps/viewports/
markdown: https://tajo.io/nl/docs/stripe-apps/viewports.md
lang: nl-NL
author: "Set Noa"
author_url: https://tajo.io/nl/set-noa/
robots: noindex
---

Vraag vroegtijdige toegang aan

Vul je voornaam en je zakelijke e-mailadres in. We sturen je een link om je aanvraag voor toegang tot Tajo te bevestigen.

# Naslag viewports

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

Viewports bepalen waar de UI-componenten van je Stripe App verschijnen binnen het Stripe Dashboard. Elke viewport hoort bij een specifieke Dashboard-pagina of plek waar je app een weergave kan renderen.

Caution

**Status: gepland, niet gebouwd.** Tajo heeft geen Stripe App, dus niets in dit onderdeel kan vandaag worden geïnstalleerd. De app-identifiers, URL’s en credentials op deze pagina zijn illustratieve voorbeelden, geen werkende endpoints.

## Hoe viewports werken

Als je een weergave declareert in je app-manifest, koppel je een React-component aan een viewport:

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

De component rendert in de app-lade (het zijpaneel) zodra een gebruiker naar de bijbehorende Dashboard-pagina navigeert en je app opent.

## Dashboardbrede versus paginaspecifieke viewports

### Dashboardbrede viewports

Deze viewports zijn op elke pagina van het Stripe Dashboard beschikbaar:

| Viewport ID | Beschrijving |
| --- | --- |
| `stripe.dashboard.drawer.default` | Standaardweergave in de lade, vanaf elke Dashboard-pagina bereikbaar via het app-icoon |
| `stripe.dashboard.home.overview` | Overzicht op de homepagina, getoond op de startpagina van het Dashboard |
| `stripe.dashboard.settings` | Instellingenpagina van de app, bereikbaar via het instellingenmenu van de app |
| `stripe.dashboard.onboarding` | Onboardingstappen, getoond na installatie van de app |

Tip

De viewport `drawer.default` fungeert als terugvaloptie. Opent een gebruiker je app op een pagina waarvoor je geen specifieke viewport hebt gedeclareerd, dan rendert de weergave `drawer.default`.

### Paginaspecifieke viewports

Deze viewports renderen alleen wanneer de gebruiker zich op de bijbehorende Dashboard-pagina bevindt:

## Betalingen

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Lijst met betalingen | `/payments` |  |
| `stripe.dashboard.payment.detail` | Detail van een betaling | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Detail van een charge | `/payments/:id` (verouderd) | Charge |

## Klanten

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Lijst met klanten | `/customers` |  |
| `stripe.dashboard.customer.detail` | Detail van een klant | `/customers/:id` | Customer |

## Producten en prijzen

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Lijst met producten | `/products` |  |
| `stripe.dashboard.product.detail` | Detail van een product | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detail van een prijs | `/prices/:id` | Price |

## Facturen

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Lijst met facturen | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detail van een factuur | `/invoices/:id` | Invoice |

## Abonnementen

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Lijst met abonnementen | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Detail van een abonnement | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Lijst met Checkout Sessions | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detail van een Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Lijst met Payment Links | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detail van een Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Lijst met gekoppelde accounts | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detail van een gekoppeld account | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Lijst met overboekingen | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detail van een overboeking | `/connect/transfers/:id` | Transfer |

## Facturatie

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Lijst met coupons | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detail van een coupon | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Lijst met offertes | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detail van een offerte | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Detail van een creditnota | `/credit-notes/:id` | CreditNote |

## Uitbetalingen

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Lijst met uitbetalingen | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Detail van een uitbetaling | `/payouts/:id` | Payout |

## Geschillen

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Lijst met geschillen | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detail van een geschil | `/disputes/:id` | Dispute |

## Terminal

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Lijst met readers | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detail van een reader | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Lijst met locaties | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detail van een locatie | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport ID | Pagina | URL-patroon | Objecttype |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Lijst met kaarten | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detail van een kaart | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Lijst met kaarthouders | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detail van een kaarthouder | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Lijst met transacties | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Lijst met autorisaties | `/issuing/authorizations` |  |

## De objectcontext gebruiken

Rendert je app in een detailviewport, dan ontvangt hij het bijbehorende Stripe-object als context:

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

### Context bij lijst- versus detailweergaven

| Type viewport | Objectcontext | Toepassing |
| --- | --- | --- |
| **Lijst** (bijv. `customer.list`) | Niet beschikbaar, er is geen specifiek object geselecteerd | Toon geaggregeerde gegevens, samenvattingen of batchacties |
| **Detail** (bijv. `customer.detail`) | Het volledige Stripe-object van de huidige pagina | Toon objectspecifieke gegevens, acties en integraties |

## Aanbevolen viewports voor de Tajo Brevo-integratie

Voor de Tajo Brevo-integratieapp leveren deze viewports de meeste waarde op:

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

| Component | Doel |
| --- | --- |
| **CustomerDetailView** | Toon de Brevo-contactgegevens, synchronisatiestatus en betrokkenheidsdata van een specifieke klant |
| **CustomerListView** | Toon de bediening voor batchsynchronisatie en geaggregeerde synchronisatiestatistieken van Brevo |
| **PaymentDetailView** | Toon welke Brevo-events door deze betaling zijn getriggerd |
| **SubscriptionDetailView** | Toon de status van de Brevo-automatisering voor dit abonnement |
| **OverviewView** | Widget op de Dashboard-homepagina met de gezondheid van de synchronisatie en de belangrijkste Brevo-cijfers |
| **DrawerView** | Algemene app-lade met snelle acties en een statusoverzicht |
| **SettingsView** | Stel de Brevo API-sleutel, synchronisatievoorkeuren en veldkoppelingen in |
| **OnboardingView** | Leid nieuwe gebruikers door het koppelen van hun Brevo-account |

## Beschikbaarheid van viewports

Niet alle viewports zijn in elke modus van het Stripe Dashboard beschikbaar:

| Modus | Beschikbare viewports |
| --- | --- |
| **Live-modus** | Alle viewports |
| **Testmodus** | Alle viewports (met testgegevens) |
| **Sandbox** | Alle viewports (als `sandbox_install_compatible: true`) |

Caution

Declareert je manifest een viewport die niet bestaat, dan mislukt de validatie bij het uploaden van de app. Controleer viewport-ID’s altijd aan de hand van dit overzicht.