Richiedi l’accesso anticipato

Inserisci il tuo nome e un indirizzo email o un numero di telefono. Ti contatteremo con tutte le informazioni per accedere a Tajo.

Riferimento dei viewport

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.

Come funzionano i viewport

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

{
  "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:

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:

{
  "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.