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

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

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

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

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

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

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

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

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

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

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

Плащания

Клиенти

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

Фактури

Абонаменти

Checkout

Connect

Таксуване

Изплащания

Спорове

Terminal

Issuing

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

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

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

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

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

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

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

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