On this page

Reference viewportů

Viewporty definují, kde se UI komponenty vaší Stripe App zobrazují v rámci Stripe Dashboard. Každý viewport odpovídá specifické stránce nebo umístění v Dashboard, kde vaše aplikace může renderovat pohled.

Jak viewporty fungují

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

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

Komponenta se renderuje v zásuvce aplikace (boční panel), když uživatel přejde na odpovídající stránku Dashboard a otevře vaši aplikaci.

Viewporty celého Dashboard

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

ID Viewportu	Popis
`stripe.dashboard.drawer.default`	Výchozí pohled zásuvky, přístupný z jakékoli stránky Dashboard přes ikonu aplikace
`stripe.dashboard.home.overview`	Přehled domovské stránky, zobrazený na vstupní stránce Dashboard
`stripe.dashboard.settings`	Stránka nastavení aplikace, přístupná z nabídky nastavení aplikace
`stripe.dashboard.onboarding`	Onboardingový tok, zobrazený po instalaci aplikace

Tip

Viewport drawer.default funguje jako záložní. Pokud uživatel otevře vaši aplikaci na stránce, kde jste nedeklarovali specifický viewport, renderuje se pohled drawer.default.

Stránkově specifické viewporty

Platby

ID Viewportu	Stránka	Vzor URL
`stripe.dashboard.payment.list`	Seznam plateb	`/payments`
`stripe.dashboard.payment.detail`	Detail platby	`/payments/:id`
`stripe.dashboard.charge.detail`	Detail poplatku	`/payments/:id` (legacy)

Zákazníci

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

Produkty a ceny

ID Viewportu	Stránka	Vzor URL
`stripe.dashboard.product.list`	Seznam produktů	`/products`
`stripe.dashboard.product.detail`	Detail produktu	`/products/:id`

Faktury

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

Předplatné

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

Doporučené viewporty pro integraci Tajo Brevo

{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "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	Zobrazení informací o kontaktu Brevo, stavu synchronizace a dat zapojení pro konkrétního zákazníka
CustomerListView	Zobrazení ovládacích prvků dávkové synchronizace a souhrnné statistiky synchronizace Brevo
OverviewView	Widget domovské stránky Dashboard se zdravím synchronizace a klíčovými metrikami Brevo
DrawerView	Obecná zásuvka aplikace s rychlými akcemi a přehledem stavu
SettingsView	Konfigurace API klíče Brevo, preferencí synchronizace a mapování polí
OnboardingView	Provede nové uživatele propojením jejich účtu Brevo

Caution

Pokud váš manifest deklaruje viewport, který neexistuje, nahrání aplikace selže při validaci. Vždy ověřte ID viewportů oproti této referenci.