On this page

Справочник за viewport-и

Viewport-ите дефинират къде се появяват UI компонентите на вашия Stripe App в таблото на Stripe. Всеки viewport съответства на конкретна страница или местоположение в таблото, където вашият app може да рендерира изглед.

Как работят viewport-ите

Когато декларирате изглед в манифеста на вашия app, свързвате React компонент с viewport:

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

Компонентът се рендерира в чекмеджето на app-а (страничния панел), когато потребителят навигира до съответната страница в таблото и отвори вашия app.

Viewport-и за цялото табло

ID на viewport	Описание
`stripe.dashboard.drawer.default`	Изглед по подразбиране на чекмеджето, достъпен от всяка страница
`stripe.dashboard.home.overview`	Преглед на началната страница
`stripe.dashboard.settings`	Страница с настройки на app-а
`stripe.dashboard.onboarding`	Поток за въвеждане след инсталиране

Viewport-и за конкретни страници

Плащания

ID на viewport	Страница	URL шаблон
`stripe.dashboard.payment.list`	Списък с плащания	`/payments`
`stripe.dashboard.payment.detail`	Детайли за плащане	`/payments/:id`
`stripe.dashboard.charge.detail`	Детайли за начисление	`/payments/:id` (legacy)

Клиенти

ID на viewport	Страница	URL шаблон
`stripe.dashboard.customer.list`	Списък с клиенти	`/customers`
`stripe.dashboard.customer.detail`	Детайли за клиент	`/customers/:id`

Продукти и цени

ID на viewport	Страница	URL шаблон
`stripe.dashboard.product.list`	Списък с продукти	`/products`
`stripe.dashboard.product.detail`	Детайли за продукт	`/products/:id`
`stripe.dashboard.price.detail`	Детайли за цена	`/prices/:id`

Фактури

ID на viewport	Страница	URL шаблон
`stripe.dashboard.invoice.list`	Списък с фактури	`/invoices`
`stripe.dashboard.invoice.detail`	Детайли за фактура	`/invoices/:id`

Абонаменти

ID на viewport	Страница	URL шаблон
`stripe.dashboard.subscription.list`	Списък с абонаменти	`/subscriptions`
`stripe.dashboard.subscription.detail`	Детайли за абонамент	`/subscriptions/:id`

Препоръчани viewport-и за интеграцията Tajo Brevo

{
  "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"
      }
    ]
  }
}

Компонент	Предназначение
CustomerDetailView	Показване на информация за контакт в Brevo и данни за ангажиране за конкретен клиент
CustomerListView	Показване на контроли за пакетна синхронизация и статистики за синхронизация с Brevo
PaymentDetailView	Показване на задействаните от плащането събития в Brevo
SubscriptionDetailView	Показване на статуса на автоматизация в Brevo за абонамента
OverviewView	Начален уиджет с проверка на синхронизацията и ключови метрики на Brevo
DrawerView	Общо чекмедже на app-а с бързи действия
SettingsView	Конфигуриране на API ключ за Brevo, предпочитания за синхронизация
OnboardingView	Насочване на нови потребители при свързване на акаунта им в Brevo

Caution

Ако манифестът декларира viewport, който не съществува, качването на app-а ще се провали при валидирането. Винаги проверявайте ID-тата на viewport-ите спрямо този справочник.