Požiadajte o skorý prístup

Uveďte svoje krstné meno a e-mailovú adresu alebo telefónne číslo. Pošleme Vám podrobnosti o prístupe k platforme Tajo.

Referencia viewportov

Viewporty určujú, kde sa UI komponenty Vašej aplikácie Stripe App zobrazia v rámci Stripe Dashboardu. Každý viewport zodpovedá konkrétnej stránke Dashboardu alebo miestu, kde môže Vaša aplikácia vykresliť pohľad.

Ako viewporty fungujú

Keď v manifeste aplikácie deklarujete pohľad, mapujete React komponent na viewport:

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

Komponent sa vykreslí v zásuvke aplikácie (bočnom paneli), keď používateľ prejde na zodpovedajúcu stránku Dashboardu a otvorí Vašu aplikáciu.

Viewporty pre celý Dashboard verzus viewporty konkrétnych stránok

Viewporty pre celý Dashboard

Tieto viewporty sú dostupné na každej stránke Stripe Dashboardu:

ID viewportu	Popis
`stripe.dashboard.drawer.default`	Predvolený pohľad zásuvky, dostupný z ktorejkoľvek stránky Dashboardu cez ikonu aplikácie
`stripe.dashboard.home.overview`	Prehľad na domovskej stránke, zobrazený na úvodnej stránke Dashboardu
`stripe.dashboard.settings`	Stránka s nastaveniami aplikácie, dostupná z ponuky nastavení aplikácie
`stripe.dashboard.onboarding`	Onboardingový postup, zobrazený po inštalácii aplikácie

Tip

Viewport drawer.default slúži ako záložná možnosť. Ak používateľ otvorí Vašu aplikáciu na stránke, pre ktorú ste nedeklarovali konkrétny viewport, vykreslí sa namiesto toho pohľad drawer.default.

Viewporty konkrétnych stránok

Tieto viewporty sa vykreslia iba vtedy, keď je používateľ na zodpovedajúcej stránke Dashboardu:

Platby

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

Zákazníci

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.customer.list`	Zoznam zákazníkov	`/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`	Zoznam produktov	`/products`
`stripe.dashboard.product.detail`	Detail produktu	`/products/:id`	Product
`stripe.dashboard.price.detail`	Detail ceny	`/prices/:id`	Price

Faktúry

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.invoice.list`	Zoznam faktúr	`/invoices`
`stripe.dashboard.invoice.detail`	Detail faktúry	`/invoices/:id`	Invoice

Predplatné

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

Checkout

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.checkout.session.list`	Zoznam relácií Checkout	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detail relácie Checkout	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Zoznam platobných odkazov	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detail platobného odkazu	`/payment-links/:id`	PaymentLink

Connect

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.connect.account.list`	Zoznam pripojených účtov	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detail pripojeného účtu	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Zoznam prevodov	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Detail prevodu	`/connect/transfers/:id`	Transfer

Fakturácia

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.coupon.list`	Zoznam kupónov	`/coupons`
`stripe.dashboard.coupon.detail`	Detail kupónu	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Zoznam cenových ponúk	`/quotes`
`stripe.dashboard.quote.detail`	Detail cenovej ponuky	`/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`	Zoznam 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`	Zoznam sporov	`/disputes`
`stripe.dashboard.dispute.detail`	Detail sporu	`/disputes/:id`	Dispute

Terminal

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.terminal.reader.list`	Zoznam čítačiek	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detail čítačky	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Zoznam lokalít	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Detail lokality	`/terminal/locations/:id`	TerminalLocation

Issuing

ID viewportu	Stránka	Vzor URL	Typ objektu
`stripe.dashboard.issuing.card.list`	Zoznam kariet	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Detail karty	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Zoznam držiteľov kariet	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detail držiteľa karty	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Zoznam transakcií	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Zoznam autorizácií	`/issuing/authorizations`

Prístup ku kontextu objektu

Keď sa Vaša aplikácia vykresľuje v detailnom viewporte, dostane príslušný objekt Stripe ako kontext:

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 v zozname verzus v detaile

Typ viewportu	Kontext objektu	Použitie
Zoznam (napríklad `customer.list`)	Nie je dostupný, nie je vybraný žiadny konkrétny objekt	Zobrazenie súhrnných dát, prehľadov alebo hromadných akcií
Detail (napríklad `customer.detail`)	Úplný objekt Stripe pre aktuálnu stránku	Zobrazenie dát, akcií a integrácií špecifických pre daný objekt

Odporúčané viewporty pre integráciu Tajo Brevo

Pre aplikáciu integrácie Tajo Brevo prinášajú najväčší úžitok tieto 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"
      }
    ]
  }
}

Komponent	Účel
CustomerDetailView	Zobrazuje kontaktné údaje z Brevo, stav synchronizácie a dáta o zapojení pre konkrétneho zákazníka
CustomerListView	Zobrazuje ovládacie prvky hromadnej synchronizácie a súhrnné štatistiky synchronizácie s Brevo
PaymentDetailView	Zobrazuje, ktoré udalosti Brevo spustila táto platba
SubscriptionDetailView	Zobrazuje stav automatizácie Brevo pre toto predplatné
OverviewView	Widget na domovskej stránke Dashboardu so stavom synchronizácie a kľúčovými metrikami Brevo
DrawerView	Všeobecná zásuvka aplikácie s rýchlymi akciami a prehľadom stavu
SettingsView	Nastavenie API kľúča Brevo, predvolieb synchronizácie a mapovaní polí
OnboardingView	Prevedie nových používateľov pripojením ich účtu Brevo

Dostupnosť viewportov

Nie všetky viewporty sú dostupné vo všetkých režimoch Stripe Dashboardu:

Režim	Dostupné viewporty
Live mode	Všetky viewporty
Test mode	Všetky viewporty (používajú testovacie dáta)
Sandbox	Všetky viewporty (ak je `sandbox_install_compatible: true`)

Caution

Ak Váš manifest deklaruje viewport, ktorý neexistuje, nahranie aplikácie neprejde validáciou. ID viewportov si vždy overte oproti tejto referencii.