---
title: "Dokumentacja viewportów | Tajo"
description: "Pełna dokumentacja viewportów Stripe Dashboard, w których może renderować się interfejs Twojej aplikacji Stripe"
url: https://tajo.io/pl/docs/stripe-apps/viewports/
markdown: https://tajo.io/pl/docs/stripe-apps/viewports.md
lang: pl-PL
author: "Set Noa"
author_url: https://tajo.io/pl/set-noa/
robots: noindex
---

Poproś o wcześniejszy dostęp

Podaj imię i firmowy adres e-mail. Wyślemy Ci link potwierdzający prośbę o dostęp do Tajo.

# Dokumentacja viewportów

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

Viewporty określają, gdzie w Stripe Dashboard pojawiają się komponenty interfejsu Twojej aplikacji Stripe. Każdy viewport odpowiada konkretnej stronie lub miejscu w Dashboardzie, w którym Twoja aplikacja może wyrenderować widok.

Caution

**Status: planowana, niezbudowana.** Tajo nie ma aplikacji Stripe App, więc niczego z tej sekcji nie można dziś zainstalować. Identyfikatory aplikacji, adresy URL i dane dostępowe na tej stronie są przykładowymi symbolami zastępczymi, a nie działającymi endpointami.

## Jak działają viewporty

Kiedy deklarujesz widok w manifeście aplikacji, przypisujesz komponent React do viewportu:

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

Komponent renderuje się w szufladzie aplikacji (panelu bocznym), gdy użytkownik przejdzie na odpowiednią stronę Dashboardu i otworzy Twoją aplikację.

## Viewporty globalne a viewporty stron

### Viewporty globalne dla całego Dashboardu

Te viewporty są dostępne na każdej stronie Stripe Dashboard:

| ID viewportu | Opis |
| --- | --- |
| `stripe.dashboard.drawer.default` | Domyślny widok szuflady, dostępny z dowolnej strony Dashboardu przez ikonę aplikacji |
| `stripe.dashboard.home.overview` | Podsumowanie na stronie głównej, wyświetlane na stronie startowej Dashboardu |
| `stripe.dashboard.settings` | Strona ustawień aplikacji, dostępna z menu ustawień aplikacji |
| `stripe.dashboard.onboarding` | Proces wdrożenia, pokazywany po instalacji aplikacji |

Tip

Viewport `drawer.default` działa jako rozwiązanie zapasowe. Jeśli użytkownik otworzy Twoją aplikację na stronie, dla której nie zadeklarowałeś konkretnego viewportu, wyrenderuje się widok `drawer.default`.

### Viewporty przypisane do stron

Te viewporty renderują się tylko wtedy, gdy użytkownik znajduje się na odpowiedniej stronie Dashboardu:

## Płatności

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Lista płatności | `/payments` |  |
| `stripe.dashboard.payment.detail` | Szczegóły płatności | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Szczegóły obciążenia | `/payments/:id` (starsza wersja) | Charge |

## Klienci

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Lista klientów | `/customers` |  |
| `stripe.dashboard.customer.detail` | Szczegóły klienta | `/customers/:id` | Customer |

## Produkty i ceny

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Lista produktów | `/products` |  |
| `stripe.dashboard.product.detail` | Szczegóły produktu | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Szczegóły ceny | `/prices/:id` | Price |

## Faktury

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Lista faktur | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Szczegóły faktury | `/invoices/:id` | Invoice |

## Subskrypcje

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Lista subskrypcji | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Szczegóły subskrypcji | `/subscriptions/:id` | Subscription |

## Checkout

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Lista sesji Checkout | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Szczegóły sesji Checkout | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Lista linków płatności | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Szczegóły linku płatności | `/payment-links/:id` | PaymentLink |

## Connect

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Lista połączonych kont | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Szczegóły połączonego konta | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Lista transferów | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Szczegóły transferu | `/connect/transfers/:id` | Transfer |

## Billing

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Lista kuponów | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Szczegóły kuponu | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Lista wycen | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Szczegóły wyceny | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Szczegóły noty korygującej | `/credit-notes/:id` | CreditNote |

## Wypłaty

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Lista wypłat | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Szczegóły wypłaty | `/payouts/:id` | Payout |

## Spory

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Lista sporów | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Szczegóły sporu | `/disputes/:id` | Dispute |

## Terminal

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Lista czytników | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Szczegóły czytnika | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Lista lokalizacji | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Szczegóły lokalizacji | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID viewportu | Strona | Wzorzec URL | Typ obiektu |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Lista kart | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Szczegóły karty | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Lista posiadaczy kart | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Szczegóły posiadacza karty | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Lista transakcji | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Lista autoryzacji | `/issuing/authorizations` |  |

## Dostęp do kontekstu obiektu

Gdy Twoja aplikacja renderuje się w viewporcie szczegółów, otrzymuje odpowiedni obiekt Stripe jako 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 listy a kontekst szczegółów

| Typ viewportu | Kontekst obiektu | Zastosowanie |
| --- | --- | --- |
| **Lista** (np. `customer.list`) | Niedostępny, żaden konkretny obiekt nie jest wybrany | Pokaż dane zbiorcze, widoki podsumowań lub akcje wsadowe |
| **Szczegóły** (np. `customer.detail`) | Pełny obiekt Stripe dla bieżącej strony | Pokaż dane, akcje i integracje właściwe dla obiektu |

## Rekomendowane viewporty dla integracji Tajo z Brevo

W aplikacji integracyjnej Tajo dla Brevo największą wartość dają te 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 | Przeznaczenie |
| --- | --- |
| **CustomerDetailView** | Pokazuje dane kontaktu w Brevo, status synchronizacji i dane o zaangażowaniu konkretnego klienta |
| **CustomerListView** | Pokazuje sterowanie synchronizacją wsadową i zbiorcze statystyki synchronizacji z Brevo |
| **PaymentDetailView** | Pokazuje, które zdarzenia w Brevo wywołała ta płatność |
| **SubscriptionDetailView** | Pokazuje status automatyzacji Brevo dla tej subskrypcji |
| **OverviewView** | Widżet na stronie głównej Dashboardu z kondycją synchronizacji i kluczowymi metrykami Brevo |
| **DrawerView** | Ogólna szuflada aplikacji z szybkimi akcjami i przeglądem statusu |
| **SettingsView** | Konfiguruje klucz API Brevo, preferencje synchronizacji i mapowania pól |
| **OnboardingView** | Prowadzi nowych użytkowników przez połączenie ich konta Brevo |

## Dostępność viewportów

Nie wszystkie viewporty są dostępne we wszystkich trybach Stripe Dashboard:

| Tryb | Dostępne viewporty |
| --- | --- |
| **Tryb live** | Wszystkie viewporty |
| **Tryb testowy** | Wszystkie viewporty (korzysta z danych testowych) |
| **Sandbox** | Wszystkie viewporty (jeśli `sandbox_install_compatible: true`) |

Caution

Jeśli manifest deklaruje nieistniejący viewport, przesłanie aplikacji nie przejdzie walidacji. Zawsze weryfikuj identyfikatory viewportów według tej dokumentacji.