---
title: "Viewport referencia | Tajo"
description: "A Stripe Dashboard összes viewportja, ahol a Stripe Appod felülete megjelenhet"
url: https://tajo.io/hu/docs/stripe-apps/viewports/
markdown: https://tajo.io/hu/docs/stripe-apps/viewports.md
lang: hu-HU
author: "Set Noa"
author_url: https://tajo.io/hu/set-noa/
robots: noindex
---

Kérj korai hozzáférést

Adja meg keresztnevét és munkahelyi e-mail-címét. Küldünk egy hivatkozást, amellyel megerősítheti a Tajo-hozzáférési kérelmét.

# Viewport referencia

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

A viewportok határozzák meg, hol jelennek meg a Stripe Appod felületi komponensei a Stripe Dashboardon belül. Minden viewport a Dashboard egy konkrét oldalához vagy helyéhez tartozik, ahol az alkalmazásod nézetet jeleníthet meg.

Caution

**Állapot: tervezett, még nem készült el.** A Tajónak nincs Stripe appja, így ebből a szakaszból ma semmi sem telepíthető. Az ezen az oldalon szereplő app-azonosítók, URL-ek és hitelesítő adatok szemléltető helyőrzők, nem élő végpontok.

## Hogyan működnek a viewportok?

Amikor nézetet deklarálsz az alkalmazás manifestjében, egy React komponenst rendelsz egy viewporthoz:

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

A komponens az alkalmazásfiókban (oldalsó panelen) jelenik meg, amikor a felhasználó a megfelelő Dashboard oldalra navigál, és megnyitja az alkalmazásodat.

## Dashboard-szintű és oldalspecifikus viewportok

### Dashboard-szintű viewportok

Ezek a viewportok a Stripe Dashboard minden oldalán elérhetők:

| Viewport azonosító | Leírás |
| --- | --- |
| `stripe.dashboard.drawer.default` | Alapértelmezett fiók nézet, bármelyik Dashboard oldalról elérhető az alkalmazás ikonjával |
| `stripe.dashboard.home.overview` | Kezdőoldali áttekintés, a Dashboard nyitóoldalán jelenik meg |
| `stripe.dashboard.settings` | Az alkalmazás beállítási oldala, az alkalmazás beállítás menüjéből érhető el |
| `stripe.dashboard.onboarding` | Bevezető folyamat, a telepítés után jelenik meg |

Tip

A `drawer.default` viewport tartalékként működik. Ha a felhasználó olyan oldalon nyitja meg az alkalmazásodat, amelyhez nem deklaráltál külön viewportot, a `drawer.default` nézet jelenik meg helyette.

### Oldalspecifikus viewportok

Ezek a viewportok csak akkor jelennek meg, ha a felhasználó a megfelelő Dashboard oldalon van:

## Fizetések

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Fizetések listája | `/payments` |  |
| `stripe.dashboard.payment.detail` | Fizetés részletei | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Terhelés részletei | `/payments/:id` (elavult) | Charge |

## Vásárlók

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Vásárlók listája | `/customers` |  |
| `stripe.dashboard.customer.detail` | Vásárló részletei | `/customers/:id` | Customer |

## Termékek és árak

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Termékek listája | `/products` |  |
| `stripe.dashboard.product.detail` | Termék részletei | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Ár részletei | `/prices/:id` | Price |

## Számlák

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Számlák listája | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Számla részletei | `/invoices/:id` | Invoice |

## Előfizetések

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Előfizetések listája | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Előfizetés részletei | `/subscriptions/:id` | Subscription |

## Pénztár

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout Session lista | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout Session részletei | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Payment Link lista | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Payment Link részletei | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Kapcsolt fiókok listája | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Kapcsolt fiók részletei | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Átutalások listája | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Átutalás részletei | `/connect/transfers/:id` | Transfer |

## Számlázás

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Kuponok listája | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Kupon részletei | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Árajánlatok listája | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Árajánlat részletei | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Jóváíró számla részletei | `/credit-notes/:id` | CreditNote |

## Kifizetések

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Kifizetések listája | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Kifizetés részletei | `/payouts/:id` | Payout |

## Vitatott tranzakciók

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Vitatott tranzakciók listája | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Vitatott tranzakció részletei | `/disputes/:id` | Dispute |

## Terminal

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Olvasók listája | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Olvasó részletei | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Helyszínek listája | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Helyszín részletei | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport azonosító | Oldal | URL-minta | Objektumtípus |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Kártyák listája | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Kártya részletei | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Kártyabirtokosok listája | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Kártyabirtokos részletei | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Tranzakciók listája | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Engedélyezések listája | `/issuing/authorizations` |  |

## Az objektumkontextus elérése

Amikor az alkalmazásod egy részletező viewportban jelenik meg, kontextusként megkapja a hozzá tartozó Stripe objektumot:

```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 és részletező kontextus

| Viewport típusa | Objektumkontextus | Felhasználási eset |
| --- | --- | --- |
| **Lista** (például `customer.list`) | Nem elérhető, nincs kiválasztott objektum | Összesített adatok, összefoglaló nézetek vagy kötegelt műveletek megjelenítése |
| **Részletező** (például `customer.detail`) | Az aktuális oldalhoz tartozó teljes Stripe objektum | Objektumspecifikus adatok, műveletek és integrációk megjelenítése |

## Ajánlott viewportok a Tajo Brevo integrációhoz

A Tajo Brevo integrációs alkalmazásnál ezek a viewportok adják a legtöbb értéket:

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

| Komponens | Cél |
| --- | --- |
| **CustomerDetailView** | Az adott vásárló Brevo kapcsolatadatainak, szinkronizálási állapotának és aktivitási adatainak megjelenítése |
| **CustomerListView** | Kötegelt szinkronizálási vezérlők és összesített Brevo szinkronizálási statisztikák megjelenítése |
| **PaymentDetailView** | Annak megjelenítése, hogy ez a fizetés mely Brevo eseményeket indította el |
| **SubscriptionDetailView** | Az előfizetéshez tartozó Brevo automatizálások állapotának megjelenítése |
| **OverviewView** | Kezdőoldali widget a szinkronizálás állapotával és a legfontosabb Brevo metrikákkal |
| **DrawerView** | Általános alkalmazásfiók gyors műveletekkel és állapot-áttekintéssel |
| **SettingsView** | A Brevo API-kulcs, a szinkronizálási beállítások és a mezőleképezések konfigurálása |
| **OnboardingView** | Az új felhasználók végigvezetése a Brevo fiókjuk összekapcsolásán |

## A viewportok elérhetősége

Nem minden viewport érhető el a Stripe Dashboard összes módjában:

| Mód | Elérhető viewportok |
| --- | --- |
| **Éles mód** | Minden viewport |
| **Teszt mód** | Minden viewport (tesztadatokkal) |
| **Sandbox** | Minden viewport (ha `sandbox_install_compatible: true`) |

Caution

Ha a manifested olyan viewportot deklarál, amely nem létezik, az alkalmazás feltöltése elbukik a validáción. Mindig ellenőrizd a viewport azonosítókat ebben a referenciában.