On this page

Справочник вьюпортов

Вьюпорты определяют, где UI-компоненты вашего Stripe App отображаются в Stripe Dashboard. Каждый вьюпорт соответствует определённой странице или месту в Dashboard, где приложение может рендерить представление.

Как работают вьюпорты

При объявлении представления в манифесте приложения вы сопоставляете React-компонент с вьюпортом:

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

Компонент рендерится в панели приложения (боковая панель), когда пользователь переходит на соответствующую страницу Dashboard и открывает ваше приложение.

Глобальные и страничные вьюпорты

Глобальные вьюпорты

Эти вьюпорты доступны на каждой странице Stripe Dashboard:

ID вьюпорта	Описание
`stripe.dashboard.drawer.default`	Представление drawer по умолчанию, доступное с любой страницы
`stripe.dashboard.home.overview`	Обзорная страница Dashboard
`stripe.dashboard.settings`	Страница настроек приложения
`stripe.dashboard.onboarding`	Поток онбординга после установки

Tip

Вьюпорт drawer.default выступает в роли запасного варианта. Если пользователь открывает приложение на странице без объявленного вьюпорта, рендерится представление drawer.default.

Страничные вьюпорты

Эти вьюпорты рендерятся только на соответствующей странице Dashboard:

Платежи

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.payment.list`	Список платежей	`/payments`	,
`stripe.dashboard.payment.detail`	Детали платежа	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Детали платежа (legacy)	`/payments/:id`	Charge

Покупатели

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.customer.list`	Список покупателей	`/customers`	,
`stripe.dashboard.customer.detail`	Детали покупателя	`/customers/:id`	Customer

Товары и цены

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.product.list`	Список товаров	`/products`	,
`stripe.dashboard.product.detail`	Детали товара	`/products/:id`	Product
`stripe.dashboard.price.detail`	Детали цены	`/prices/:id`	Price

Счета

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.invoice.list`	Список счетов	`/invoices`	,
`stripe.dashboard.invoice.detail`	Детали счёта	`/invoices/:id`	Invoice

Подписки

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.subscription.list`	Список подписок	`/subscriptions`	,
`stripe.dashboard.subscription.detail`	Детали подписки	`/subscriptions/:id`	Subscription

Checkout

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.checkout.session.list`	Список Checkout Sessions	`/checkout/sessions`	,
`stripe.dashboard.checkout.session.detail`	Детали Checkout Session	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Список Payment Links	`/payment-links`	,
`stripe.dashboard.payment-link.detail`	Детали Payment Link	`/payment-links/:id`	PaymentLink

Connect

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.connect.account.list`	Список подключённых аккаунтов	`/connect/accounts`	,
`stripe.dashboard.connect.account.detail`	Детали подключённого аккаунта	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Список переводов	`/connect/transfers`	,
`stripe.dashboard.transfer.detail`	Детали перевода	`/connect/transfers/:id`	Transfer

Биллинг

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.coupon.list`	Список купонов	`/coupons`	,
`stripe.dashboard.coupon.detail`	Детали купона	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Список предложений	`/quotes`	,
`stripe.dashboard.quote.detail`	Детали предложения	`/quotes/:id`	Quote

Выплаты

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.payout.list`	Список выплат	`/payouts`	,
`stripe.dashboard.payout.detail`	Детали выплаты	`/payouts/:id`	Payout

Споры

ID вьюпорта	Страница	URL	Тип объекта
`stripe.dashboard.dispute.list`	Список споров	`/disputes`	,
`stripe.dashboard.dispute.detail`	Детали спора	`/disputes/:id`	Dispute

Доступ к контексту объекта

Когда приложение рендерится в detail-вьюпорте, оно получает соответствующий объект 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>
  );
};

Контекст List vs Detail

Тип вьюпорта	Контекст объекта	Сценарий использования
List (например, `customer.list`)	Недоступен	Агрегированные данные, сводные представления
Detail (например, `customer.detail`)	Полный объект Stripe	Данные, действия и интеграции для конкретного объекта

Рекомендуемые вьюпорты для интеграции 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	Показывает элементы управления пакетной синхронизацией и статистику
PaymentDetailView	Показывает, какие события Brevo были вызваны этим платежом
SubscriptionDetailView	Показывает статус автоматизации Brevo для этой подписки
OverviewView	Виджет на главной странице Dashboard с метриками синхронизации
DrawerView	Общая панель с быстрыми действиями и обзором статуса
SettingsView	Настройка API-ключа Brevo, параметров синхронизации и маппинга полей
OnboardingView	Руководство для новых пользователей по подключению аккаунта Brevo

Caution

Если в манифесте объявлен несуществующий вьюпорт, загрузка приложения не пройдёт валидацию. Всегда проверяйте ID вьюпортов по этому справочнику.