---
title: "Reference viewportů | Tajo"
description: "Kompletní přehled viewportů Stripe Dashboardu, ve kterých se může vykreslit rozhraní Vaší Stripe App"
url: https://tajo.io/cz/docs/stripe-apps/viewports/
markdown: https://tajo.io/cz/docs/stripe-apps/viewports.md
lang: cs-CZ
author: "Set Noa"
author_url: https://tajo.io/cz/set-noa/
robots: noindex
---

Požádejte o přednostní přístup

Zadejte své jméno a pracovní e-mailovou adresu. Pošleme vám odkaz pro potvrzení žádosti o přístup k Tajo.

# Reference viewportů

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

Viewporty určují, kde se komponenty rozhraní Vaší Stripe App zobrazí ve Stripe Dashboardu. Každý viewport odpovídá konkrétní stránce nebo místu v Dashboardu, kde Vaše aplikace může vykreslit pohled.

Caution

**Stav: plánováno, zatím nevytvořeno.** Tajo nemá žádnou aplikaci pro Stripe, takže nic z této sekce dnes nelze nainstalovat. Identifikátory aplikace, URL i přihlašovací údaje na této stránce jsou ilustrativní zástupné hodnoty, nikoli živé endpointy.

## Jak viewporty fungují

Když v manifestu aplikace deklarujete pohled, mapujete React komponentu na viewport:

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

Komponenta se vykreslí v zásuvce aplikace (bočním panelu), když uživatel přejde na odpovídající stránku Dashboardu a otevře Vaši aplikaci.

## Viewporty pro celý Dashboard versus viewporty konkrétních stránek

### Viewporty pro celý Dashboard

Tyto viewporty jsou dostupné na každé stránce Stripe Dashboardu:

| ID viewportu | Popis |
| --- | --- |
| `stripe.dashboard.drawer.default` | Výchozí pohled zásuvky, dostupný z libovolné stránky Dashboardu přes ikonu aplikace |
| `stripe.dashboard.home.overview` | Přehled na domovské stránce, zobrazený na úvodní stránce Dashboardu |
| `stripe.dashboard.settings` | Stránka nastavení aplikace, dostupná z nabídky nastavení aplikace |
| `stripe.dashboard.onboarding` | Onboardingový tok, zobrazený po instalaci aplikace |

Tip

Viewport `drawer.default` slouží jako záloha. Pokud uživatel otevře Vaši aplikaci na stránce, pro kterou jste konkrétní viewport nedeklarovali, vykreslí se místo něj pohled `drawer.default`.

### Viewporty konkrétních stránek

Tyto viewporty se vykreslí pouze tehdy, když je uživatel na odpovídající stránce Dashboardu:

## Platby

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

## Zákazníci

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Seznam zákazníků | `/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` | Seznam produktů | `/products` |  |
| `stripe.dashboard.product.detail` | Detail produktu | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detail ceny | `/prices/:id` | Price |

## Faktury

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Seznam faktur | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detail faktury | `/invoices/:id` | Invoice |

## Předplatná

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

## Checkout

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Seznam Checkout Sessions | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detail Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Seznam Payment Links | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detail Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Seznam propojených účtů | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detail propojeného účtu | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Seznam převodů | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detail převodu | `/connect/transfers/:id` | Transfer |

## Billing

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Seznam kupónů | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detail kupónu | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Seznam nabídek | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detail nabídky | `/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` | Seznam 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` | Seznam sporů | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detail sporu | `/disputes/:id` | Dispute |

## Terminal

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Seznam čteček | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detail čtečky | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Seznam poboček | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detail pobočky | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID viewportu | Stránka | Vzor URL | Typ objektu |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Seznam karet | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detail karty | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Seznam držitelů karet | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detail držitele karty | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Seznam transakcí | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Seznam autorizací | `/issuing/authorizations` |  |

## Přístup ke kontextu objektu

Když se Vaše aplikace vykreslí v detailním viewportu, dostane jako kontext příslušný objekt Stripe:

```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 seznamu versus detailu

| Typ viewportu | Kontext objektu | Použití |
| --- | --- | --- |
| **Seznam** (například `customer.list`) | Není dostupný, není vybrán žádný konkrétní objekt | Souhrnná data, přehledové pohledy nebo dávkové akce |
| **Detail** (například `customer.detail`) | Úplný objekt Stripe pro aktuální stránku | Data, akce a integrace vázané na konkrétní objekt |

## Doporučené viewporty pro integraci Tajo Brevo

U aplikace integrace Tajo Brevo přinášejí největší hodnotu tyto 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"
      }
    ]
  }
}
```

| Komponenta | Účel |
| --- | --- |
| **CustomerDetailView** | Zobrazuje kontakt v Brevo, stav synchronizace a data o zapojení konkrétního zákazníka |
| **CustomerListView** | Zobrazuje ovládání dávkové synchronizace a souhrnné statistiky synchronizace s Brevo |
| **PaymentDetailView** | Zobrazuje, které události Brevo tato platba spustila |
| **SubscriptionDetailView** | Zobrazuje stav automatizací Brevo pro toto předplatné |
| **OverviewView** | Widget na domovské stránce Dashboardu se stavem synchronizace a klíčovými metrikami Brevo |
| **DrawerView** | Obecná zásuvka aplikace s rychlými akcemi a přehledem stavu |
| **SettingsView** | Nastavení API klíče Brevo, předvoleb synchronizace a mapování polí |
| **OnboardingView** | Provede nové uživatele propojením jejich účtu Brevo |

## Dostupnost viewportů

Ne všechny viewporty jsou dostupné ve všech režimech Stripe Dashboardu:

| Režim | Dostupné viewporty |
| --- | --- |
| **Živý režim** | Všechny viewporty |
| **Testovací režim** | Všechny viewporty (používá testovací data) |
| **Sandbox** | Všechny viewporty (pokud platí `sandbox_install_compatible: true`) |

Caution

Pokud Váš manifest deklaruje viewport, který neexistuje, nahrání aplikace neprojde validací. ID viewportů si vždy ověřte podle této reference.