Solicită acces anticipat

Spune-ne prenumele și o adresă de e-mail sau un număr de telefon. Îți vom trimite detaliile de acces la Tajo.

Referință pentru viewporturi

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.

Cum funcționează viewporturile

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

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

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:

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