---
title: "Справочник за viewport-ите | Tajo"
description: "Пълен справочник на viewport-ите в таблото на Stripe, в които може да се рендерира интерфейсът на Вашето Stripe App"
url: https://tajo.io/bg/docs/stripe-apps/viewports/
markdown: https://tajo.io/bg/docs/stripe-apps/viewports.md
lang: bg-BG
author: "Set Noa"
author_url: https://tajo.io/bg/set-noa/
robots: noindex
---

Заявете ранен достъп

Въведете собственото си име и служебен имейл адрес. Ще ви изпратим връзка за потвърждение на заявката за достъп до Tajo.

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

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

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

Caution

**Статус: планирано, не е изградено.** Tajo няма приложение за Stripe, така че нищо в този раздел не може да бъде инсталирано днес. Идентификаторите на приложения, адресите и идентификационните данни на тази страница са илюстративни примери, а не действащи крайни точки.

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

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

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

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

## Viewport-и за цялото табло и за конкретна страница

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

Тези viewport-и са достъпни на всяка страница от таблото на Stripe:

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

Tip

Viewport-ът `drawer.default` действа като резервен вариант. Ако потребител отвори приложението Ви на страница, за която не сте декларирали конкретен viewport, вместо това се рендерира изгледът `drawer.default`.

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

Тези viewport-и се рендерират само когато потребителят е на съответната страница от таблото:

## Плащания

| ID на viewport | Страница | URL шаблон | Тип обект |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Списък с плащания | `/payments` |  |
| `stripe.dashboard.payment.detail` | Детайли за плащане | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Детайли за таксуване | `/payments/:id` (наследен) | Charge |

## Клиенти

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

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

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

## Фактури

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

## Абонаменти

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

## Checkout

| ID на viewport | Страница | URL шаблон | Тип обект |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Списък със сесии на Checkout | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Детайли за сесия на Checkout | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Списък с връзки за плащане | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Детайли за връзка за плащане | `/payment-links/:id` | PaymentLink |

## Connect

| ID на viewport | Страница | 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 на viewport | Страница | 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 на viewport | Страница | URL шаблон | Тип обект |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Списък с изплащания | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Детайли за изплащане | `/payouts/:id` | Payout |

## Спорове

| ID на viewport | Страница | URL шаблон | Тип обект |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Списък със спорове | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Детайли за спор | `/disputes/:id` | Dispute |

## Terminal

| ID на viewport | Страница | 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 на viewport | Страница | 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` |  |

## Достъп до контекста на обекта

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

### Контекст при списък и при детайли

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

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

За приложението за интеграция Tajo Brevo най-голяма стойност носят следните viewport-и:

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

## Наличност на viewport-ите

Не всички viewport-и са налични във всички режими на таблото на Stripe:

| Режим | Налични viewport-и |
| --- | --- |
| **Live режим** | Всички viewport-и |
| **Test режим** | Всички viewport-и (използват се тестови данни) |
| **Sandbox** | Всички viewport-и (ако `sandbox_install_compatible: true`) |

Caution

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