Požádejte o přednostní přístup

Uveďte své křestní jméno a e-mail nebo telefonní číslo. Pošleme Vám informace o přístupu k platformě Tajo.

Reference viewportů

Viewporty určují, kde se komponenty rozhraní Vaší Stripe App zobrazí ve Stripe Dashboardu. Každý viewport odpovídá konkrétní stránce nebo místu v Dashboardu, kde Vaše aplikace může vykreslit pohled.

Jak viewporty fungují

Když v manifestu aplikace deklarujete pohled, mapujete React komponentu na viewport:

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

Komponenta se vykreslí v zásuvce aplikace (bočním panelu), když uživatel přejde na odpovídající stránku Dashboardu a otevře Vaši aplikaci.

Viewporty pro celý Dashboard versus viewporty konkrétních stránek

Viewporty pro celý Dashboard

Tyto viewporty jsou dostupné na každé stránce Stripe Dashboardu:

ID viewportu	Popis
`stripe.dashboard.drawer.default`	Výchozí pohled zásuvky, dostupný z libovolné stránky Dashboardu přes ikonu aplikace
`stripe.dashboard.home.overview`	Přehled na domovské stránce, zobrazený na úvodní stránce Dashboardu
`stripe.dashboard.settings`	Stránka nastavení aplikace, dostupná z nabídky nastavení aplikace
`stripe.dashboard.onboarding`	Onboardingový tok, zobrazený po instalaci aplikace

Tip

Viewport drawer.default slouží jako záloha. Pokud uživatel otevře Vaši aplikaci na stránce, pro kterou jste konkrétní viewport nedeklarovali, vykreslí se místo něj pohled drawer.default.

Viewporty konkrétních stránek

Tyto viewporty se vykreslí pouze tehdy, když je uživatel na odpovídající stránce Dashboardu:

Platby

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.payment.list`	Seznam plateb	`/payments`
`stripe.dashboard.payment.detail`	Detail platby	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Detail poplatku	`/payments/:id` (starší verze)	Charge

Zákazníci

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.customer.list`	Seznam zákazníků	`/customers`
`stripe.dashboard.customer.detail`	Detail zákazníka	`/customers/:id`	Customer

Produkty a ceny

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.product.list`	Seznam produktů	`/products`
`stripe.dashboard.product.detail`	Detail produktu	`/products/:id`	Product
`stripe.dashboard.price.detail`	Detail ceny	`/prices/:id`	Price

Faktury

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.invoice.list`	Seznam faktur	`/invoices`
`stripe.dashboard.invoice.detail`	Detail faktury	`/invoices/:id`	Invoice

Předplatná

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.subscription.list`	Seznam předplatných	`/subscriptions`
`stripe.dashboard.subscription.detail`	Detail předplatného	`/subscriptions/:id`	Subscription

Checkout

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.checkout.session.list`	Seznam Checkout Sessions	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detail Checkout Session	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Seznam Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detail Payment Link	`/payment-links/:id`	PaymentLink

Connect

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.connect.account.list`	Seznam propojených účtů	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detail propojeného účtu	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Seznam převodů	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Detail převodu	`/connect/transfers/:id`	Transfer

Billing

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.coupon.list`	Seznam kupónů	`/coupons`
`stripe.dashboard.coupon.detail`	Detail kupónu	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Seznam nabídek	`/quotes`
`stripe.dashboard.quote.detail`	Detail nabídky	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Detail dobropisu	`/credit-notes/:id`	CreditNote

Výplaty

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.payout.list`	Seznam výplat	`/payouts`
`stripe.dashboard.payout.detail`	Detail výplaty	`/payouts/:id`	Payout

Spory

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.dispute.list`	Seznam sporů	`/disputes`
`stripe.dashboard.dispute.detail`	Detail sporu	`/disputes/:id`	Dispute

Terminal

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.terminal.reader.list`	Seznam čteček	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detail čtečky	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Seznam poboček	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Detail pobočky	`/terminal/locations/:id`	TerminalLocation

Issuing

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.issuing.card.list`	Seznam karet	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Detail karty	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Seznam držitelů karet	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detail držitele karty	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Seznam transakcí	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Seznam autorizací	`/issuing/authorizations`

Přístup ke kontextu objektu

Když se Vaše aplikace vykreslí v detailním viewportu, dostane jako kontext příslušný objekt Stripe:

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

Kontext seznamu versus detailu

Typ viewportu	Kontext objektu	Použití
Seznam (například `customer.list`)	Není dostupný, není vybrán žádný konkrétní objekt	Souhrnná data, přehledové pohledy nebo dávkové akce
Detail (například `customer.detail`)	Úplný objekt Stripe pro aktuální stránku	Data, akce a integrace vázané na konkrétní objekt

Doporučené viewporty pro integraci Tajo Brevo

U aplikace integrace Tajo Brevo přinášejí největší hodnotu tyto viewporty:

{
  "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	Účel
CustomerDetailView	Zobrazuje kontakt v Brevo, stav synchronizace a data o zapojení konkrétního zákazníka
CustomerListView	Zobrazuje ovládání dávkové synchronizace a souhrnné statistiky synchronizace s Brevo
PaymentDetailView	Zobrazuje, které události Brevo tato platba spustila
SubscriptionDetailView	Zobrazuje stav automatizací Brevo pro toto předplatné
OverviewView	Widget na domovské stránce Dashboardu se stavem synchronizace a klíčovými metrikami Brevo
DrawerView	Obecná zásuvka aplikace s rychlými akcemi a přehledem stavu
SettingsView	Nastavení API klíče Brevo, předvoleb synchronizace a mapování polí
OnboardingView	Provede nové uživatele propojením jejich účtu Brevo

Dostupnost viewportů

Ne všechny viewporty jsou dostupné ve všech režimech Stripe Dashboardu:

Režim	Dostupné viewporty
Živý režim	Všechny viewporty
Testovací režim	Všechny viewporty (používá testovací data)
Sandbox	Všechny viewporty (pokud platí `sandbox_install_compatible: true`)

Caution

Pokud Váš manifest deklaruje viewport, který neexistuje, nahrání aplikace neprojde validací. ID viewportů si vždy ověřte podle této reference.