---
title: "Справочник по вьюпортам | Tajo"
description: "Полный справочник вьюпортов Stripe Dashboard, в которых может отображаться интерфейс Вашего Stripe App"
url: https://tajo.io/ru/docs/stripe-apps/viewports/
markdown: https://tajo.io/ru/docs/stripe-apps/viewports.md
lang: ru-RU
author: "Set Noa"
author_url: https://tajo.io/ru/set-noa/
robots: noindex
---

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

Укажите имя и рабочий адрес электронной почты. Мы отправим ссылку для подтверждения запроса на доступ к Tajo.

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

[Set Noa](https://tajo.io/ru/set-noa/)

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

Caution

**Статус: запланировано, не создано.** У Tajo нет приложения Stripe, поэтому ничего из этого раздела сегодня нельзя установить. Идентификаторы приложения, URL и учётные данные на этой странице являются иллюстративными заглушками, а не рабочими эндпоинтами.

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

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

```json
{
  "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 в качестве контекста:

```typescript
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 наибольшую пользу приносят эти вьюпорты:

```json
{
  "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

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