---
title: "Referință pentru viewporturi | Tajo"
description: "Referință completă a viewporturilor din Stripe Dashboard în care se poate afișa interfața aplicației tale Stripe"
url: https://tajo.io/ro/docs/stripe-apps/viewports/
markdown: https://tajo.io/ro/docs/stripe-apps/viewports.md
lang: ro-RO
author: "Set Noa"
author_url: https://tajo.io/ro/set-noa/
robots: noindex
---

Solicită acces anticipat

Introduceți prenumele și adresa de e-mail profesională. Vă vom trimite un link pentru a confirma cererea de acces la Tajo.

# Referință pentru viewporturi

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

Viewporturile stabilesc unde apar componentele de interfață ale aplicației tale Stripe în Stripe Dashboard. Fiecare viewport corespunde unei anumite pagini sau zone din Dashboard, în care aplicația ta poate afișa o vizualizare.

Caution

**Status: planificat, neconstruit.** Tajo nu are nicio aplicație Stripe, deci nimic din această secțiune nu poate fi instalat astăzi. Identificatorii de aplicație, URL-urile și credențialele din această pagină sunt exemple ilustrative, nu endpointuri reale.

## Cum funcționează viewporturile

Când declari o vizualizare în manifestul aplicației, asociezi o componentă React unui viewport:

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

Componenta se afișează în sertarul aplicației (panoul lateral) atunci când un utilizator ajunge pe pagina corespunzătoare din Dashboard și deschide aplicația ta.

## Viewporturi la nivel de Dashboard față de viewporturi specifice unei pagini

### Viewporturi la nivel de Dashboard

Aceste viewporturi sunt disponibile pe fiecare pagină din Stripe Dashboard:

| ID viewport | Descriere |
| --- | --- |
| `stripe.dashboard.drawer.default` | Vizualizarea implicită din sertar, accesibilă de pe orice pagină din Dashboard prin pictograma aplicației |
| `stripe.dashboard.home.overview` | Prezentarea generală de pe pagina principală, afișată pe pagina de start a Dashboardului |
| `stripe.dashboard.settings` | Pagina de setări a aplicației, accesibilă din meniul de setări al aplicației |
| `stripe.dashboard.onboarding` | Fluxul de inițiere, afișat după instalarea aplicației |

Tip

Viewportul `drawer.default` funcționează ca variantă de rezervă. Dacă un utilizator deschide aplicația pe o pagină pentru care nu ai declarat un viewport anume, se afișează în schimb vizualizarea `drawer.default`.

### Viewporturi specifice unei pagini

Aceste viewporturi se afișează doar atunci când utilizatorul se află pe pagina corespunzătoare din Dashboard:

## Plăți

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Lista de plăți | `/payments` |  |
| `stripe.dashboard.payment.detail` | Detaliile plății | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Detaliile încasării | `/payments/:id` (versiune veche) | Charge |

## Clienți

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Lista de clienți | `/customers` |  |
| `stripe.dashboard.customer.detail` | Detaliile clientului | `/customers/:id` | Customer |

## Produse și prețuri

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Lista de produse | `/products` |  |
| `stripe.dashboard.product.detail` | Detaliile produsului | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detaliile prețului | `/prices/:id` | Price |

## Facturi

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Lista de facturi | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detaliile facturii | `/invoices/:id` | Invoice |

## Abonamente

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Lista de abonamente | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Detaliile abonamentului | `/subscriptions/:id` | Subscription |

## Finalizarea comenzii

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Lista sesiunilor Checkout | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detaliile sesiunii Checkout | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Lista linkurilor de plată | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detaliile linkului de plată | `/payment-links/:id` | PaymentLink |

## Connect

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Lista conturilor conectate | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detaliile contului conectat | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Lista transferurilor | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detaliile transferului | `/connect/transfers/:id` | Transfer |

## Facturare

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Lista cupoanelor | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detaliile cuponului | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Lista ofertelor | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detaliile ofertei | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Detaliile notei de credit | `/credit-notes/:id` | CreditNote |

## Plăți către cont

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Lista plăților către cont | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Detaliile plății către cont | `/payouts/:id` | Payout |

## Dispute

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Lista disputelor | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detaliile disputei | `/disputes/:id` | Dispute |

## Terminal

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Lista cititoarelor | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detaliile cititorului | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Lista locațiilor | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detaliile locației | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID viewport | Pagină | Tipar URL | Tip de obiect |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Lista cardurilor | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detaliile cardului | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Lista deținătorilor de card | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detaliile deținătorului de card | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Lista tranzacțiilor | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Lista autorizărilor | `/issuing/authorizations` |  |

## Accesarea contextului obiectului

Când aplicația ta se afișează într-un viewport de detaliu, primește drept context obiectul Stripe corespunzător:

```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>
  );
};
```

### Context în listă față de context în detaliu

| Tip de viewport | Contextul obiectului | Când îl folosești |
| --- | --- | --- |
| **Listă** (de exemplu, `customer.list`) | Indisponibil, nu este selectat niciun obiect anume | Afișează date agregate, vizualizări de tip rezumat sau acțiuni în masă |
| **Detaliu** (de exemplu, `customer.detail`) | Obiectul Stripe complet pentru pagina curentă | Afișează date, acțiuni și integrări specifice obiectului |

## Viewporturi recomandate pentru integrarea Tajo cu Brevo

Pentru aplicația de integrare Tajo cu Brevo, aceste viewporturi aduc cea mai mare valoare:

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

| Componentă | Rol |
| --- | --- |
| **CustomerDetailView** | Afișează informațiile de contact din Brevo, starea sincronizării și datele de interacțiune pentru un anumit client |
| **CustomerListView** | Afișează comenzile de sincronizare în masă și statisticile agregate ale sincronizării cu Brevo |
| **PaymentDetailView** | Afișează ce evenimente Brevo au fost declanșate de această plată |
| **SubscriptionDetailView** | Afișează starea automatizărilor Brevo pentru acest abonament |
| **OverviewView** | Widget pe pagina principală din Dashboard, cu starea sincronizării și indicatorii Brevo esențiali |
| **DrawerView** | Sertarul general al aplicației, cu acțiuni rapide și o privire de ansamblu asupra stării |
| **SettingsView** | Configurează cheia API Brevo, preferințele de sincronizare și maparea câmpurilor |
| **OnboardingView** | Îi ghidează pe utilizatorii noi prin conectarea contului lor Brevo |

## Disponibilitatea viewporturilor

Nu toate viewporturile sunt disponibile în toate modurile din Stripe Dashboard:

| Mod | Viewporturi disponibile |
| --- | --- |
| **Modul live** | Toate viewporturile |
| **Modul de test** | Toate viewporturile (folosește date de test) |
| **Sandbox** | Toate viewporturile (dacă `sandbox_install_compatible: true`) |

Caution

Dacă manifestul tău declară un viewport care nu există, încărcarea aplicației nu va trece de validare. Verifică întotdeauna ID-urile de viewport în această referință.