---
title: "Viewport­reference | Tajo"
description: "Komplet reference over Stripe Dashboard-viewports hvor din Stripe App-UI kan gengives"
url: https://tajo.io/dk/docs/stripe-apps/viewports/
markdown: https://tajo.io/dk/docs/stripe-apps/viewports.md
lang: da-DK
author: "Set Noa"
author_url: https://tajo.io/dk/set-noa/
robots: noindex
---

Bed om tidlig adgang til Tajo

Indtast dit fornavn og din arbejds-e-mailadresse. Vi sender dig et link til at bekræfte din anmodning om adgang til Tajo.

# Viewport­reference

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

Viewports definerer hvor din Stripe Apps UI-komponenter vises i Stripe Dashboard. Hvert viewport svarer til en specifik Dashboard-side eller placering hvor din app kan gengive en visning.

Caution

**Status: planlagt, ikke bygget.** Tajo har ingen Stripe-app, så intet i dette afsnit kan installeres i dag. App-ID’er, URL’er og loginoplysninger på denne side er illustrative pladsholdere, ikke aktive endpoints.

## Sådan fungerer viewports

Når du deklarerer en visning i dit app-manifest, mapper du en React-komponent til et viewport:

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

Komponenten gengives i app-skuffen (sidepanel) når en bruger navigerer til den tilsvarende Dashboard-side og åbner din app.

## Dashboard-wide vs sidespecifikke viewports

### Dashboard-wide viewports

Disse viewports er tilgængelige på alle sider i Stripe Dashboard:

| Viewport-ID | Beskrivelse |
| --- | --- |
| `stripe.dashboard.drawer.default` | Standard skuffevisning, tilgængelig fra alle Dashboard-sider via app-ikonet |
| `stripe.dashboard.home.overview` | Startside oversigt, vist på Dashboard-landingssiden |
| `stripe.dashboard.settings` | App-indstillingsside, tilgængelig fra appens indstillingsmenu |
| `stripe.dashboard.onboarding` | Onboarding-flow, vist efter app-installation |

Tip

`drawer.default`-viewportet fungerer som fallback. Hvis en bruger åbner din app på en side hvor du ikke har deklareret et specifikt viewport, gengives `drawer.default`-visningen i stedet.

### Sidespecifikke viewports

Disse viewports gengives kun når brugeren er på den tilsvarende Dashboard-side:

## Betalinger

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Betalingsliste | `/payments` |  |
| `stripe.dashboard.payment.detail` | Betalingsdetalje | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Opkrævningsdetalje | `/payments/:id` (legacy) | Charge |

## Kunder

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Kundeliste | `/customers` |  |
| `stripe.dashboard.customer.detail` | Kundedetalje | `/customers/:id` | Customer |

## Produkter og priser

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Produktliste | `/products` |  |
| `stripe.dashboard.product.detail` | Produktdetalje | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Prisdetalje | `/prices/:id` | Price |

## Fakturaer

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Fakturaliste | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Fakturaadetalje | `/invoices/:id` | Invoice |

## Abonnementer

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Abonnements­liste | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Abonnements­detalje | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout Sessions-liste | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout Session-detalje | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Betalings­links-liste | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Betalings­linkdetalje | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Tilknyttede konti-liste | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Tilknyttet kontoadetalje | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Overførselsliste | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Overførselsdetalje | `/connect/transfers/:id` | Transfer |

## Fakturering

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Kuponliste | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Kupondetalje | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Tilbudsliste | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Tilbudsdetalje | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Kreditnotadetalje | `/credit-notes/:id` | CreditNote |

## Udbetalinger

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Udbetalings­liste | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Udbetalings­detalje | `/payouts/:id` | Payout |

## Tvister

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Tvistliste | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Tvistdetalje | `/disputes/:id` | Dispute |

## Terminal

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Læserliste | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Læserdetalje | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Placerings­liste | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Placerings­detalje | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport-ID | Side | URL-mønster | Objekt­type |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Kortliste | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Kortdetalje | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Kortholder­liste | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Kortholder­detalje | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Transaktions­liste | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Autorisations­liste | `/issuing/authorizations` |  |

## Tilgang til objekt­kontekst

Når din app gengives i et detalje-viewport, modtager den det relevante Stripe-objekt som kontekst:

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

## Anbefalede viewports til Tajo Brevo-integration

Til Tajo Brevo-integrationsappen giver disse viewports mest værdi:

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

| Komponent | Formål |
| --- | --- |
| **CustomerDetailView** | Vis Brevo-kontaktinfo, synkstatus og engagement­data for en specifik kunde |
| **CustomerListView** | Vis batch-synk­kontroller og samlede Brevo-synkstatistikker |
| **PaymentDetailView** | Vis hvilke Brevo-hændelser der blev udløst af denne betaling |
| **SubscriptionDetailView** | Vis Brevo-automatiseringsstatus for dette abonnement |
| **OverviewView** | Dashboard hjem-widget med synk­sundhed og nøgle-Brevo-metrics |
| **DrawerView** | Generel app-skuffe med hurtige handlinger og statusoversigt |
| **SettingsView** | Konfigurer Brevo API-nøgle, synk­præferencer og felt­mappings |
| **OnboardingView** | Guider nye brugere gennem forbindelsen af deres Brevo-konto |

Caution

Hvis dit manifest deklarerer et viewport der ikke eksisterer, vil app-uploaden fejle ved validering. Verificer altid viewport-ID’er mod denne reference.