---
title: "Viewports-referens | Tajo"
description: "Fullständig referens för Stripe Dashboard-viewports där din Stripe App-UI kan renderas"
url: https://tajo.io/se/docs/stripe-apps/viewports/
markdown: https://tajo.io/se/docs/stripe-apps/viewports.md
lang: sv-SE
author: "Set Noa"
author_url: https://tajo.io/se/set-noa/
robots: noindex
---

Ansök om tidig åtkomst

Ange ditt förnamn och din e-postadress på jobbet. Vi skickar en länk för att bekräfta din begäran om åtkomst till Tajo.

# Viewports-referens

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

Viewports definierar var din Stripe Apps UI-komponenter visas i Stripe Dashboard. Varje viewport motsvarar en specifik Dashboard-sida eller plats där din app kan rendera en vy.

Caution

**Status: planerad, inte byggd.** Tajo har ingen Stripe-app, så inget i det här avsnittet kan installeras i dag. App-ID:n, URL:er och inloggningsuppgifter på den här sidan är illustrativa platshållare, inte skarpa endpoints.

## Hur viewports fungerar

När du deklarerar en vy i ditt app-manifest mappar du en React-komponent till en viewport:

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

Komponenten renderas i appdradern (sidopanelen) när en användare navigerar till motsvarande Dashboard-sida och öppnar din app.

## Dashboardomfattande vs sidspecifika viewports

### Dashboardomfattande viewports

Dessa viewports är tillgängliga på varje sida i Stripe Dashboard:

| Viewport-ID | Beskrivning |
| --- | --- |
| `stripe.dashboard.drawer.default` | Standard drader-vy, tillgänglig från valfri Dashboard-sida via appikonen |
| `stripe.dashboard.home.overview` | Startsidöversikt, visas på Dashboard-landningssidan |
| `stripe.dashboard.settings` | Appinställningssida, tillgänglig från appens inställningsmeny |
| `stripe.dashboard.onboarding` | Onboarding-flöde, visas efter appinstallation |

Tip

Viewporten `drawer.default` fungerar som reserv. Om en användare öppnar din app på en sida där du inte deklarerat en specifik viewport renderas `drawer.default`-vyn istället.

### Sidspecifika viewports

Dessa viewports renderas bara när användaren är på motsvarande Dashboard-sida:

## Betalningar

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Betalningslista | `/payments` |  |
| `stripe.dashboard.payment.detail` | Betalningsdetalj | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Avgiftsdetalj | `/payments/:id` (legacy) | Charge |

## Kunder

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Kundlista | `/customers` |  |
| `stripe.dashboard.customer.detail` | Kunddetalj | `/customers/:id` | Customer |

## Produkter och priser

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Produktlista | `/products` |  |
| `stripe.dashboard.product.detail` | Produktdetalj | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Prisdetalj | `/prices/:id` | Price |

## Fakturor

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Fakturalista | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Fakturadetalj | `/invoices/:id` | Invoice |

## Prenumerationer

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Prenumerationslista | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Prenumerationsdetalj | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout Sessions-lista | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout Session-detalj | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Betalningslänklista | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Betalningslänkdetalj | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Anslutna kontolista | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Anslutet kontodetalj | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Överföringslista | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Överföringsdetalj | `/connect/transfers/:id` | Transfer |

## Fakturering

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Kupponglista | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Kupongdetalj | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Offertelista | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Offertdetalj | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Kreditnotadetalj | `/credit-notes/:id` | CreditNote |

## Utbetalningar

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Utbetalningslista | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Utbetalningsdetalj | `/payouts/:id` | Payout |

## Tvister

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Tvistlista | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Tvistdetalj | `/disputes/:id` | Dispute |

## Terminal

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Läsarlista | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Läsardetalj | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Platslista | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Platsdetalj | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport-ID | Sida | URL-mönster | Objekttyp |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Kortlista | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Kortdetalj | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Korthållarlista | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Korthållardetalj | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Transaktionslista | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Auktoriseringslista | `/issuing/authorizations` |  |

## Åtkomst till objektkontext

När din app renderas i en detalj-viewport tar den emot det relevanta Stripe-objektet som 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>
  );
};
```

### Lista vs detalj-kontext

| Viewport-typ | Objektkontext | Användningsfall |
| --- | --- | --- |
| **Lista** (t.ex. `customer.list`) | Ej tillgänglig – inget specifikt objekt valt | Visa aggregerade data, sammanfattningsvyer eller batchåtgärder |
| **Detalj** (t.ex. `customer.detail`) | Fullständigt Stripe-objekt för den aktuella sidan | Visa objektspecifika data, åtgärder och integrationer |

## Rekommenderade viewports för Tajo Brevo-integrationen

För Tajo Brevo-integrationsappen erbjuder dessa viewports mest värde:

```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 | Syfte |
| --- | --- |
| **CustomerDetailView** | Visa Brevo-kontaktinfo, synkstatus och engagemangdata för en specifik kund |
| **CustomerListView** | Visa batch-synkkontroller och aggregerade Brevo-synkstatistiker |
| **PaymentDetailView** | Visa vilka Brevo-händelser som utlöstes av denna betalning |
| **SubscriptionDetailView** | Visa Brevo-automationsstatus för denna prenumeration |
| **OverviewView** | Dashboard-hemwidget med synkhälsa och viktiga Brevo-mätvärden |
| **DrawerView** | Allmän appdrade med snabbåtgärder och statusöversikt |
| **SettingsView** | Konfigurera Brevo API-nyckel, synkpreferenser och fältmappningar |
| **OnboardingView** | Guida nya användare genom att ansluta sitt Brevo-konto |

## Viewport-tillgänglighet

Inte alla viewports är tillgängliga i alla Stripe Dashboard-lägen:

| Läge | Tillgängliga viewports |
| --- | --- |
| **Live-läge** | Alla viewports |
| **Testläge** | Alla viewports (använder testdata) |
| **Sandbox** | Alla viewports (om `sandbox_install_compatible: true`) |

Caution

Om ditt manifest deklarerar en viewport som inte finns misslyckas app-uppladdningen vid validering. Kontrollera alltid viewport-ID:n mot denna referens.