Подайте заявку на ранний доступ

Укажите имя, а также email или номер телефона. Мы отправим Вам информацию о доступе к Tajo.

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

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

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

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

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

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

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

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

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

ID вьюпорта	Описание
`stripe.dashboard.drawer.default`	Панель по умолчанию, доступная с любой страницы Dashboard по значку приложения
`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`	Карточка списания	`/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
`stripe.dashboard.credit-note.detail`	Карточка кредит-ноты	`/credit-notes/:id`	CreditNote

Выплаты

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

Terminal

ID вьюпорта	Страница	Шаблон URL	Тип объекта
`stripe.dashboard.terminal.reader.list`	Список считывателей	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Карточка считывателя	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Список точек	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Карточка точки	`/terminal/locations/:id`	TerminalLocation

Issuing

ID вьюпорта	Страница	Шаблон URL	Тип объекта
`stripe.dashboard.issuing.card.list`	Список карт	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Карточка карты	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Список держателей карт	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Карточка держателя карты	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Список транзакций	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Список авторизаций	`/issuing/authorizations`

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

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

Контекст в списке и в карточке

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

Рекомендуемые вьюпорты для интеграции Tajo с Brevo

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

Доступность вьюпортов

Не все вьюпорты доступны во всех режимах Stripe Dashboard:

Режим	Доступные вьюпорты
Живой режим	Все вьюпорты
Тестовый режим	Все вьюпорты (на тестовых данных)
Sandbox	Все вьюпорты (если задано `sandbox_install_compatible: true`)

Caution

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