---
title: "Referencia viewportov | Tajo"
description: "Úplná referencia viewportov v Stripe Dashboarde, kde sa môže vykresľovať používateľské rozhranie Vašej Stripe App"
url: https://tajo.io/sk/docs/stripe-apps/viewports/
markdown: https://tajo.io/sk/docs/stripe-apps/viewports.md
lang: sk-SK
author: "Set Noa"
author_url: https://tajo.io/sk/set-noa/
robots: noindex
---

Požiadajte o skorý prístup

Zadajte svoje meno a pracovnú e-mailovú adresu. Pošleme vám odkaz na potvrdenie žiadosti o prístup k Tajo.

# Referencia viewportov

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

Viewporty určujú, kde sa UI komponenty Vašej aplikácie Stripe App zobrazia v rámci Stripe Dashboardu. Každý viewport zodpovedá konkrétnej stránke Dashboardu alebo miestu, kde môže Vaša aplikácia vykresliť pohľad.

Caution

**Stav: plánované, nevytvorené.** Tajo nemá žiadnu aplikáciu Stripe, takže nič z tejto sekcie sa dnes nedá nainštalovať. Identifikátory aplikácie, URL a prihlasovacie údaje na tejto stránke sú ilustratívne zástupné hodnoty, nie funkčné endpointy.

## Ako viewporty fungujú

Keď v manifeste aplikácie deklarujete pohľad, mapujete React komponent na viewport:

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

Komponent sa vykreslí v zásuvke aplikácie (bočnom paneli), keď používateľ prejde na zodpovedajúcu stránku Dashboardu a otvorí Vašu aplikáciu.

## Viewporty pre celý Dashboard verzus viewporty konkrétnych stránok

### Viewporty pre celý Dashboard

Tieto viewporty sú dostupné na každej stránke Stripe Dashboardu:

| ID viewportu | Popis |
| --- | --- |
| `stripe.dashboard.drawer.default` | Predvolený pohľad zásuvky, dostupný z ktorejkoľvek stránky Dashboardu cez ikonu aplikácie |
| `stripe.dashboard.home.overview` | Prehľad na domovskej stránke, zobrazený na úvodnej stránke Dashboardu |
| `stripe.dashboard.settings` | Stránka s nastaveniami aplikácie, dostupná z ponuky nastavení aplikácie |
| `stripe.dashboard.onboarding` | Onboardingový postup, zobrazený po inštalácii aplikácie |

Tip

Viewport `drawer.default` slúži ako záložná možnosť. Ak používateľ otvorí Vašu aplikáciu na stránke, pre ktorú ste nedeklarovali konkrétny viewport, vykreslí sa namiesto toho pohľad `drawer.default`.

### Viewporty konkrétnych stránok

Tieto viewporty sa vykreslia iba vtedy, keď je používateľ na zodpovedajúcej stránke Dashboardu:

## Platby

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Zoznam platieb | `/payments` |  |
| `stripe.dashboard.payment.detail` | Detail platby | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Detail poplatku | `/payments/:id` (staršie) | Charge |

## Zákazníci

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Zoznam zákazníkov | `/customers` |  |
| `stripe.dashboard.customer.detail` | Detail zákazníka | `/customers/:id` | Customer |

## Produkty a ceny

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Zoznam produktov | `/products` |  |
| `stripe.dashboard.product.detail` | Detail produktu | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detail ceny | `/prices/:id` | Price |

## Faktúry

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Zoznam faktúr | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detail faktúry | `/invoices/:id` | Invoice |

## Predplatné

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Zoznam predplatných | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Detail predplatného | `/subscriptions/:id` | Subscription |

## Checkout

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Zoznam relácií Checkout | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detail relácie Checkout | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Zoznam platobných odkazov | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detail platobného odkazu | `/payment-links/:id` | PaymentLink |

## Connect

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Zoznam pripojených účtov | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detail pripojeného účtu | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Zoznam prevodov | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detail prevodu | `/connect/transfers/:id` | Transfer |

## Fakturácia

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Zoznam kupónov | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detail kupónu | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Zoznam cenových ponúk | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detail cenovej ponuky | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Detail dobropisu | `/credit-notes/:id` | CreditNote |

## Výplaty

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Zoznam výplat | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Detail výplaty | `/payouts/:id` | Payout |

## Spory

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Zoznam sporov | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detail sporu | `/disputes/:id` | Dispute |

## Terminal

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Zoznam čítačiek | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detail čítačky | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Zoznam lokalít | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detail lokality | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Zoznam kariet | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detail karty | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Zoznam držiteľov kariet | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detail držiteľa karty | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Zoznam transakcií | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Zoznam autorizácií | `/issuing/authorizations` |  |

## Prístup ku kontextu objektu

Keď sa Vaša aplikácia vykresľuje v detailnom viewporte, dostane príslušný objekt Stripe ako 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>
  );
};
```

### Kontext v zozname verzus v detaile

| Typ viewportu | Kontext objektu | Použitie |
| --- | --- | --- |
| **Zoznam** (napríklad `customer.list`) | Nie je dostupný, nie je vybraný žiadny konkrétny objekt | Zobrazenie súhrnných dát, prehľadov alebo hromadných akcií |
| **Detail** (napríklad `customer.detail`) | Úplný objekt Stripe pre aktuálnu stránku | Zobrazenie dát, akcií a integrácií špecifických pre daný objekt |

## Odporúčané viewporty pre integráciu Tajo Brevo

Pre aplikáciu integrácie Tajo Brevo prinášajú najväčší úžitok tieto viewporty:

```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 | Účel |
| --- | --- |
| **CustomerDetailView** | Zobrazuje kontaktné údaje z Brevo, stav synchronizácie a dáta o zapojení pre konkrétneho zákazníka |
| **CustomerListView** | Zobrazuje ovládacie prvky hromadnej synchronizácie a súhrnné štatistiky synchronizácie s Brevo |
| **PaymentDetailView** | Zobrazuje, ktoré udalosti Brevo spustila táto platba |
| **SubscriptionDetailView** | Zobrazuje stav automatizácie Brevo pre toto predplatné |
| **OverviewView** | Widget na domovskej stránke Dashboardu so stavom synchronizácie a kľúčovými metrikami Brevo |
| **DrawerView** | Všeobecná zásuvka aplikácie s rýchlymi akciami a prehľadom stavu |
| **SettingsView** | Nastavenie API kľúča Brevo, predvolieb synchronizácie a mapovaní polí |
| **OnboardingView** | Prevedie nových používateľov pripojením ich účtu Brevo |

## Dostupnosť viewportov

Nie všetky viewporty sú dostupné vo všetkých režimoch Stripe Dashboardu:

| Režim | Dostupné viewporty |
| --- | --- |
| **Live mode** | Všetky viewporty |
| **Test mode** | Všetky viewporty (používajú testovacie dáta) |
| **Sandbox** | Všetky viewporty (ak je `sandbox_install_compatible: true`) |

Caution

Ak Váš manifest deklaruje viewport, ktorý neexistuje, nahranie aplikácie neprejde validáciou. ID viewportov si vždy overte oproti tejto referencii.