---
title: "Referenca viewportov | Tajo"
description: "Popolna referenca viewportov v Stripe Dashboard, kjer se lahko izriše uporabniški vmesnik vaše aplikacije Stripe App"
url: https://tajo.io/sl/docs/stripe-apps/viewports/
markdown: https://tajo.io/sl/docs/stripe-apps/viewports.md
lang: sl-SI
author: "Set Noa"
author_url: https://tajo.io/sl/set-noa/
robots: noindex
---

Zaprosite za zgodnji dostop

Vnesite svoje ime in službeni e-poštni naslov. Poslali vam bomo povezavo za potrditev zahteve za dostop do Taja.

# Referenca viewportov

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

Viewporti določajo, kje v vmesniku Stripe Dashboard se prikažejo komponente uporabniškega vmesnika vaše aplikacije Stripe App. Vsak viewport ustreza določeni strani ali mestu v Dashboardu, kjer lahko vaša aplikacija izriše pogled.

Caution

**Stanje: načrtovano, ne izdelano.** Tajo nima aplikacije Stripe, zato danes ničesar iz tega razdelka ni mogoče namestiti. Identifikatorji aplikacije, naslovi URL in poverilnice na tej strani so ponazoritvena nadomestila, ne delujoče končne točke.

## Kako viewporti delujejo

Ko v manifestu aplikacije napoveste pogled, komponento React preslikate na viewport:

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

Komponenta se izriše v predalu aplikacije (stranski plošči), ko uporabnik odpre ustrezno stran Dashboarda in zažene vašo aplikacijo.

## Viewporti za celoten Dashboard v primerjavi z viewporti posameznih strani

### Viewporti za celoten Dashboard

Ti viewporti so na voljo na vsaki strani vmesnika Stripe Dashboard:

| ID viewporta | Opis |
| --- | --- |
| `stripe.dashboard.drawer.default` | Privzeti pogled v predalu, dosegljiv z ikono aplikacije s katere koli strani Dashboarda |
| `stripe.dashboard.home.overview` | Pregled na domači strani, prikazan na vstopni strani Dashboarda |
| `stripe.dashboard.settings` | Stran z nastavitvami aplikacije, dosegljiva iz menija nastavitev aplikacije |
| `stripe.dashboard.onboarding` | Uvajalni proces, prikazan po namestitvi aplikacije |

Tip

Viewport `drawer.default` deluje kot nadomestna možnost. Če uporabnik odpre vašo aplikacijo na strani, za katero niste napovedali posebnega viewporta, se namesto tega izriše pogled `drawer.default`.

### Viewporti posameznih strani

Ti viewporti se izrišejo samo, kadar je uporabnik na ustrezni strani Dashboarda:

## Plačila

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Seznam plačil | `/payments` |  |
| `stripe.dashboard.payment.detail` | Podrobnosti plačila | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Podrobnosti bremenitve | `/payments/:id` (opuščeno) | Charge |

## Stranke

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Seznam strank | `/customers` |  |
| `stripe.dashboard.customer.detail` | Podrobnosti stranke | `/customers/:id` | Customer |

## Izdelki in cene

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Seznam izdelkov | `/products` |  |
| `stripe.dashboard.product.detail` | Podrobnosti izdelka | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Podrobnosti cene | `/prices/:id` | Price |

## Računi

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Seznam računov | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Podrobnosti računa | `/invoices/:id` | Invoice |

## Naročnine

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Seznam naročnin | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Podrobnosti naročnine | `/subscriptions/:id` | Subscription |

## Checkout

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Seznam sej Checkout | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Podrobnosti seje Checkout | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Seznam povezav Payment Links | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Podrobnosti povezave Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Seznam povezanih računov | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Podrobnosti povezanega računa | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Seznam prenosov | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Podrobnosti prenosa | `/connect/transfers/:id` | Transfer |

## Obračunavanje

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Seznam kuponov | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Podrobnosti kupona | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Seznam ponudb | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Podrobnosti ponudbe | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Podrobnosti dobropisa | `/credit-notes/:id` | CreditNote |

## Izplačila

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Seznam izplačil | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Podrobnosti izplačila | `/payouts/:id` | Payout |

## Spori

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Seznam sporov | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Podrobnosti spora | `/disputes/:id` | Dispute |

## Terminal

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Seznam čitalnikov | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Podrobnosti čitalnika | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Seznam lokacij | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Podrobnosti lokacije | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID viewporta | Stran | Vzorec naslova URL | Tip objekta |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Seznam kartic | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Podrobnosti kartice | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Seznam imetnikov kartic | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Podrobnosti imetnika kartice | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Seznam transakcij | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Seznam avtorizacij | `/issuing/authorizations` |  |

## Dostop do konteksta objekta

Ko se vaša aplikacija izriše v viewportu s podrobnostmi, prejme ustrezni objekt Stripe kot 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 seznama v primerjavi s kontekstom podrobnosti

| Tip viewporta | Kontekst objekta | Primer uporabe |
| --- | --- | --- |
| **Seznam** (npr. `customer.list`) | Ni na voljo, izbran ni noben posamezen objekt | Prikaz skupnih podatkov, zbirnih pogledov ali paketnih dejanj |
| **Podrobnosti** (npr. `customer.detail`) | Celoten objekt Stripe za trenutno stran | Prikaz podatkov, dejanj in integracij za posamezen objekt |

## Priporočeni viewporti za integracijo Tajo z Brevom

Za aplikacijo za integracijo Tajo z Brevom so najbolj uporabni ti viewporti:

```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 | Namen |
| --- | --- |
| **CustomerDetailView** | Prikaže podatke o stiku v Brevu, stanje sinhronizacije in podatke o sodelovanju za posamezno stranko |
| **CustomerListView** | Prikaže kontrolnike za paketno sinhronizacijo in skupno statistiko sinhronizacije z Brevom |
| **PaymentDetailView** | Prikaže, katere dogodke v Brevu je sprožilo to plačilo |
| **SubscriptionDetailView** | Prikaže stanje avtomatizacije v Brevu za to naročnino |
| **OverviewView** | Pripomoček na domači strani Dashboarda s stanjem sinhronizacije in ključnimi meritvami Brevo |
| **DrawerView** | Splošni predal aplikacije s hitrimi dejanji in pregledom stanja |
| **SettingsView** | Nastavitev ključa API za Brevo, nastavitev sinhronizacije in preslikav polj |
| **OnboardingView** | Vodi nove uporabnike skozi povezovanje njihovega računa Brevo |

## Razpoložljivost viewportov

Vsi viewporti niso na voljo v vseh načinih vmesnika Stripe Dashboard:

| Način | Razpoložljivi viewporti |
| --- | --- |
| **Način v živo** | Vsi viewporti |
| **Preizkusni način** | Vsi viewporti (uporablja preizkusne podatke) |
| **Peskovnik** | Vsi viewporti (če velja `sandbox_install_compatible: true`) |

Caution

Če vaš manifest napove viewport, ki ne obstaja, nalaganje aplikacije ne bo prestalo preverjanja. ID-je viewportov vedno preverite v tej referenci.