---
title: "Riferimento dei viewport | Tajo"
description: "Riferimento completo dei viewport della dashboard di Stripe in cui può essere mostrata l'interfaccia della tua Stripe App"
url: https://tajo.io/it/docs/stripe-apps/viewports/
markdown: https://tajo.io/it/docs/stripe-apps/viewports.md
lang: it-IT
author: "Set Noa"
author_url: https://tajo.io/it/set-noa/
robots: noindex
---

Richiedi l’accesso anticipato

Inserisci il tuo nome e indirizzo email aziendale. Ti invieremo un link per confermare la richiesta di accesso a Tajo.

# Riferimento dei viewport

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

I viewport definiscono dove compaiono i componenti dell’interfaccia della tua Stripe App dentro la dashboard di Stripe. Ogni viewport corrisponde a una pagina o a una posizione specifica della dashboard in cui la tua app può mostrare una vista.

Caution

**Stato: pianificata, non realizzata.** Tajo non ha un’app Stripe, quindi oggi nulla di questa sezione può essere installato. Gli identificatori dell’app, gli URL e le credenziali presenti in questa pagina sono segnaposto illustrativi, non endpoint reali.

## Come funzionano i viewport

Quando dichiari una vista nel manifest della tua app, associ un componente React a un viewport:

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

Il componente viene mostrato nel drawer dell’app (il pannello laterale) quando un utente apre la pagina corrispondente della dashboard e avvia la tua app.

## Viewport globali e viewport di pagina

### Viewport globali della dashboard

Questi viewport sono disponibili su ogni pagina della dashboard di Stripe:

| ID del viewport | Descrizione |
| --- | --- |
| `stripe.dashboard.drawer.default` | Vista drawer predefinita, raggiungibile da qualsiasi pagina della dashboard tramite l’icona dell’app |
| `stripe.dashboard.home.overview` | Panoramica della home, mostrata nella pagina iniziale della dashboard |
| `stripe.dashboard.settings` | Pagina delle impostazioni dell’app, raggiungibile dal menu impostazioni dell’app |
| `stripe.dashboard.onboarding` | Flusso di onboarding, mostrato dopo l’installazione dell’app |

Tip

Il viewport `drawer.default` funziona da ripiego. Se un utente apre la tua app su una pagina per cui non hai dichiarato un viewport specifico, viene mostrata la vista `drawer.default`.

### Viewport di pagina

Questi viewport compaiono solo quando l’utente si trova sulla pagina corrispondente della dashboard:

## Pagamenti

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Elenco pagamenti | `/payments` |  |
| `stripe.dashboard.payment.detail` | Dettaglio pagamento | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Dettaglio addebito | `/payments/:id` (legacy) | Charge |

## Clienti

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Elenco clienti | `/customers` |  |
| `stripe.dashboard.customer.detail` | Dettaglio cliente | `/customers/:id` | Customer |

## Prodotti e prezzi

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Elenco prodotti | `/products` |  |
| `stripe.dashboard.product.detail` | Dettaglio prodotto | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Dettaglio prezzo | `/prices/:id` | Price |

## Fatture

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Elenco fatture | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Dettaglio fattura | `/invoices/:id` | Invoice |

## Abbonamenti

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Elenco abbonamenti | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Dettaglio abbonamento | `/subscriptions/:id` | Subscription |

## Checkout

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Elenco Checkout Session | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Dettaglio Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Elenco Payment Link | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Dettaglio Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Elenco account collegati | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Dettaglio account collegato | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Elenco trasferimenti | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Dettaglio trasferimento | `/connect/transfers/:id` | Transfer |

## Fatturazione

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Elenco coupon | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Dettaglio coupon | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Elenco preventivi | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Dettaglio preventivo | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Dettaglio nota di credito | `/credit-notes/:id` | CreditNote |

## Payout

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Elenco payout | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Dettaglio payout | `/payouts/:id` | Payout |

## Contestazioni

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Elenco contestazioni | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Dettaglio contestazione | `/disputes/:id` | Dispute |

## Terminal

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Elenco lettori | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Dettaglio lettore | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Elenco sedi | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Dettaglio sede | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID del viewport | Pagina | Schema URL | Tipo di oggetto |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Elenco carte | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Dettaglio carta | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Elenco titolari di carta | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Dettaglio titolare di carta | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Elenco transazioni | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Elenco autorizzazioni | `/issuing/authorizations` |  |

## Accedere al contesto dell’oggetto

Quando la tua app viene mostrata in un viewport di dettaglio, riceve come contesto l’oggetto Stripe corrispondente:

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

### Contesto negli elenchi e nei dettagli

| Tipo di viewport | Contesto dell’oggetto | Caso d’uso |
| --- | --- | --- |
| **Elenco** (ad esempio `customer.list`) | Non disponibile, nessun oggetto specifico selezionato | Mostrare dati aggregati, viste di riepilogo o azioni massive |
| **Dettaglio** (ad esempio `customer.detail`) | Oggetto Stripe completo della pagina corrente | Mostrare dati, azioni e integrazioni specifici dell’oggetto |

## Viewport consigliati per l’integrazione Tajo Brevo

Per l’app di integrazione Tajo Brevo, questi viewport danno il valore maggiore:

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

| Componente | Scopo |
| --- | --- |
| **CustomerDetailView** | Mostra contatto Brevo, stato di sincronizzazione e dati di coinvolgimento per un cliente specifico |
| **CustomerListView** | Mostra i controlli di sincronizzazione massiva e le statistiche aggregate di sincronizzazione con Brevo |
| **PaymentDetailView** | Mostra quali eventi Brevo sono stati attivati da questo pagamento |
| **SubscriptionDetailView** | Mostra lo stato delle automazioni Brevo per questo abbonamento |
| **OverviewView** | Widget nella home della dashboard con lo stato della sincronizzazione e le metriche chiave di Brevo |
| **DrawerView** | Drawer generale dell’app con azioni rapide e panoramica dello stato |
| **SettingsView** | Configura la chiave API di Brevo, le preferenze di sincronizzazione e le mappature dei campi |
| **OnboardingView** | Accompagna i nuovi utenti nel collegamento del loro account Brevo |

## Disponibilità dei viewport

Non tutti i viewport sono disponibili in tutte le modalità della dashboard di Stripe:

| Modalità | Viewport disponibili |
| --- | --- |
| **Modalità live** | Tutti i viewport |
| **Modalità test** | Tutti i viewport (usa dati di test) |
| **Sandbox** | Tutti i viewport (se `sandbox_install_compatible: true`) |

Caution

Se il tuo manifest dichiara un viewport che non esiste, il caricamento dell’app non supera la validazione. Verifica sempre gli ID dei viewport su questo riferimento.