---
title: "Referanse for viewporter | Tajo"
description: "Fullstendig referanse over viewportene i Stripe-dashboardet der brukergrensesnittet i Stripe-appen din kan vises"
url: https://tajo.io/no/docs/stripe-apps/viewports/
markdown: https://tajo.io/no/docs/stripe-apps/viewports.md
lang: no-NO
author: "Set Noa"
author_url: https://tajo.io/no/set-noa/
robots: noindex
---

Be om tidlig tilgang

Skriv inn fornavn og e-postadresse på jobb. Vi sender deg en lenke for å bekrefte forespørselen om tilgang til Tajo.

# Referanse for viewporter

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

Viewporter bestemmer hvor UI-komponentene i Stripe-appen din vises inne i Stripe-dashboardet. Hver viewport svarer til en bestemt side eller plassering i dashboardet der appen din kan vise en visning.

Caution

**Status: planlagt, ikke bygget.** Tajo har ingen Stripe-app, så ingenting i denne delen kan installeres i dag. App-identifikatorene, URL-ene og legitimasjonen på denne siden er illustrerende plassholdere, ikke ekte endepunkter.

## Slik fungerer viewporter

Når du erklærer en visning i app-manifestet ditt, knytter du en React-komponent til en viewport:

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

Komponenten vises i appskuffen (sidepanelet) når brukeren går til den tilhørende siden i dashboardet og åpner appen din.

## Viewporter for hele dashboardet kontra sidespesifikke viewporter

### Viewporter for hele dashboardet

Disse viewportene er tilgjengelige på alle sider i Stripe-dashboardet:

| Viewport-ID | Beskrivelse |
| --- | --- |
| `stripe.dashboard.drawer.default` | Standard skuffvisning, tilgjengelig fra alle sider i dashboardet via appikonet |
| `stripe.dashboard.home.overview` | Oversikt på hjemmesiden, vises på landingssiden i dashboardet |
| `stripe.dashboard.settings` | Innstillingssiden for appen, tilgjengelig fra appens innstillingsmeny |
| `stripe.dashboard.onboarding` | Oppstartsflyten, vises etter at appen er installert |

Tip

Viewporten `drawer.default` fungerer som reserveløsning. Åpner brukeren appen din på en side der du ikke har erklært en egen viewport, vises `drawer.default` i stedet.

### Sidespesifikke viewporter

Disse viewportene vises bare når brukeren er på den tilhørende siden i dashboardet:

## Betalinger

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Liste over betalinger | `/payments` |  |
| `stripe.dashboard.payment.detail` | Detaljer om betaling | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Detaljer om belastning | `/payments/:id` (eldre) | Charge |

## Kunder

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Liste over kunder | `/customers` |  |
| `stripe.dashboard.customer.detail` | Detaljer om kunde | `/customers/:id` | Customer |

## Produkter og priser

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Liste over produkter | `/products` |  |
| `stripe.dashboard.product.detail` | Detaljer om produkt | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detaljer om pris | `/prices/:id` | Price |

## Fakturaer

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Liste over fakturaer | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detaljer om faktura | `/invoices/:id` | Invoice |

## Abonnementer

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Liste over abonnementer | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Detaljer om abonnement | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Liste over Checkout Sessions | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detaljer om Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Liste over Payment Links | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detaljer om Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Liste over tilkoblede kontoer | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detaljer om tilkoblet konto | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Liste over overføringer | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detaljer om overføring | `/connect/transfers/:id` | Transfer |

## Fakturering

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Liste over rabattkoder | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detaljer om rabattkode | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Liste over tilbud | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detaljer om tilbud | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Detaljer om kreditnota | `/credit-notes/:id` | CreditNote |

## Utbetalinger

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Liste over utbetalinger | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Detaljer om utbetaling | `/payouts/:id` | Payout |

## Innsigelser

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Liste over innsigelser | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detaljer om innsigelse | `/disputes/:id` | Dispute |

## Terminal

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Liste over kortlesere | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detaljer om kortleser | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Liste over lokasjoner | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detaljer om lokasjon | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport-ID | Side | URL-mønster | Objekttype |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Liste over kort | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detaljer om kort | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Liste over kortholdere | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detaljer om kortholder | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Liste over transaksjoner | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Liste over autorisasjoner | `/issuing/authorizations` |  |

## Hent objektkonteksten

Når appen din vises i en detaljvisning, får den det aktuelle Stripe-objektet 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>
  );
};
```

### Kontekst i lister kontra detaljvisninger

| Type viewport | Objektkontekst | Brukstilfelle |
| --- | --- | --- |
| **Liste** (for eksempel `customer.list`) | Ikke tilgjengelig, ingen bestemt objekt er valgt | Vis samlede tall, oversikter eller handlinger på flere objekter |
| **Detalj** (for eksempel `customer.detail`) | Hele Stripe-objektet for den aktuelle siden | Vis data, handlinger og integrasjoner knyttet til objektet |

## Anbefalte viewporter for Tajos Brevo-integrasjon

For appen med Tajos Brevo-integrasjon gir disse viewportene mest verdi:

```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** | Viser Brevo-kontaktinfo, synkroniseringsstatus og engasjementsdata for en bestemt kunde |
| **CustomerListView** | Viser kontroller for synkronisering i bulk og samlet statistikk for Brevo-synkroniseringen |
| **PaymentDetailView** | Viser hvilke Brevo-hendelser denne betalingen utløste |
| **SubscriptionDetailView** | Viser status for Brevo-automatiseringen for dette abonnementet |
| **OverviewView** | Widget på dashboardets hjemmeside med synkroniseringsstatus og nøkkeltall fra Brevo |
| **DrawerView** | Generell appskuff med hurtighandlinger og statusoversikt |
| **SettingsView** | Konfigurer API-nøkkel for Brevo, innstillinger for synkronisering og feltkoblinger |
| **OnboardingView** | Veileder nye brukere gjennom å koble til Brevo-kontoen sin |

## Tilgjengelighet for viewporter

Ikke alle viewporter er tilgjengelige i alle modusene i Stripe-dashboardet:

| Modus | Tilgjengelige viewporter |
| --- | --- |
| **Live-modus** | Alle viewporter |
| **Testmodus** | Alle viewporter (bruker testdata) |
| **Sandkasse** | Alle viewporter (hvis `sandbox_install_compatible: true`) |

Caution

Erklærer manifestet ditt en viewport som ikke finnes, feiler valideringen når appen lastes opp. Kontroller alltid viewport-ID-ene mot denne referansen.