Poproś o wcześniejszy dostęp

Podaj imię oraz adres e-mail lub numer telefonu. Wyślemy Ci informacje o dostępie do Tajo.

Dokumentacja viewportów

Viewporty określają, gdzie w Stripe Dashboard pojawiają się komponenty interfejsu Twojej aplikacji Stripe. Każdy viewport odpowiada konkretnej stronie lub miejscu w Dashboardzie, w którym Twoja aplikacja może wyrenderować widok.

Jak działają viewporty

Kiedy deklarujesz widok w manifeście aplikacji, przypisujesz komponent React do viewportu:

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

Komponent renderuje się w szufladzie aplikacji (panelu bocznym), gdy użytkownik przejdzie na odpowiednią stronę Dashboardu i otworzy Twoją aplikację.

Viewporty globalne a viewporty stron

Viewporty globalne dla całego Dashboardu

Te viewporty są dostępne na każdej stronie Stripe Dashboard:

ID viewportu	Opis
`stripe.dashboard.drawer.default`	Domyślny widok szuflady, dostępny z dowolnej strony Dashboardu przez ikonę aplikacji
`stripe.dashboard.home.overview`	Podsumowanie na stronie głównej, wyświetlane na stronie startowej Dashboardu
`stripe.dashboard.settings`	Strona ustawień aplikacji, dostępna z menu ustawień aplikacji
`stripe.dashboard.onboarding`	Proces wdrożenia, pokazywany po instalacji aplikacji

Tip

Viewport drawer.default działa jako rozwiązanie zapasowe. Jeśli użytkownik otworzy Twoją aplikację na stronie, dla której nie zadeklarowałeś konkretnego viewportu, wyrenderuje się widok drawer.default.

Viewporty przypisane do stron

Te viewporty renderują się tylko wtedy, gdy użytkownik znajduje się na odpowiedniej stronie Dashboardu:

Płatności

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.payment.list`	Lista płatności	`/payments`
`stripe.dashboard.payment.detail`	Szczegóły płatności	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Szczegóły obciążenia	`/payments/:id` (starsza wersja)	Charge

Klienci

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.customer.list`	Lista klientów	`/customers`
`stripe.dashboard.customer.detail`	Szczegóły klienta	`/customers/:id`	Customer

Produkty i ceny

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.product.list`	Lista produktów	`/products`
`stripe.dashboard.product.detail`	Szczegóły produktu	`/products/:id`	Product
`stripe.dashboard.price.detail`	Szczegóły ceny	`/prices/:id`	Price

Faktury

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.invoice.list`	Lista faktur	`/invoices`
`stripe.dashboard.invoice.detail`	Szczegóły faktury	`/invoices/:id`	Invoice

Subskrypcje

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.subscription.list`	Lista subskrypcji	`/subscriptions`
`stripe.dashboard.subscription.detail`	Szczegóły subskrypcji	`/subscriptions/:id`	Subscription

Checkout

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.checkout.session.list`	Lista sesji Checkout	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Szczegóły sesji Checkout	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Lista linków płatności	`/payment-links`
`stripe.dashboard.payment-link.detail`	Szczegóły linku płatności	`/payment-links/:id`	PaymentLink

Connect

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.connect.account.list`	Lista połączonych kont	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Szczegóły połączonego konta	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Lista transferów	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Szczegóły transferu	`/connect/transfers/:id`	Transfer

Billing

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.coupon.list`	Lista kuponów	`/coupons`
`stripe.dashboard.coupon.detail`	Szczegóły kuponu	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Lista wycen	`/quotes`
`stripe.dashboard.quote.detail`	Szczegóły wyceny	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Szczegóły noty korygującej	`/credit-notes/:id`	CreditNote

Wypłaty

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.payout.list`	Lista wypłat	`/payouts`
`stripe.dashboard.payout.detail`	Szczegóły wypłaty	`/payouts/:id`	Payout

Spory

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.dispute.list`	Lista sporów	`/disputes`
`stripe.dashboard.dispute.detail`	Szczegóły sporu	`/disputes/:id`	Dispute

Terminal

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.terminal.reader.list`	Lista czytników	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Szczegóły czytnika	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Lista lokalizacji	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Szczegóły lokalizacji	`/terminal/locations/:id`	TerminalLocation

Issuing

ID viewportu	Strona	Wzorzec URL	Typ obiektu
`stripe.dashboard.issuing.card.list`	Lista kart	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Szczegóły karty	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Lista posiadaczy kart	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Szczegóły posiadacza karty	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Lista transakcji	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Lista autoryzacji	`/issuing/authorizations`

Dostęp do kontekstu obiektu

Gdy Twoja aplikacja renderuje się w viewporcie szczegółów, otrzymuje odpowiedni obiekt Stripe jako kontekst:

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>
  );
};

Kontekst listy a kontekst szczegółów

Typ viewportu	Kontekst obiektu	Zastosowanie
Lista (np. `customer.list`)	Niedostępny, żaden konkretny obiekt nie jest wybrany	Pokaż dane zbiorcze, widoki podsumowań lub akcje wsadowe
Szczegóły (np. `customer.detail`)	Pełny obiekt Stripe dla bieżącej strony	Pokaż dane, akcje i integracje właściwe dla obiektu

Rekomendowane viewporty dla integracji Tajo z Brevo

W aplikacji integracyjnej Tajo dla Brevo największą wartość dają te viewporty:

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

Komponent	Przeznaczenie
CustomerDetailView	Pokazuje dane kontaktu w Brevo, status synchronizacji i dane o zaangażowaniu konkretnego klienta
CustomerListView	Pokazuje sterowanie synchronizacją wsadową i zbiorcze statystyki synchronizacji z Brevo
PaymentDetailView	Pokazuje, które zdarzenia w Brevo wywołała ta płatność
SubscriptionDetailView	Pokazuje status automatyzacji Brevo dla tej subskrypcji
OverviewView	Widżet na stronie głównej Dashboardu z kondycją synchronizacji i kluczowymi metrykami Brevo
DrawerView	Ogólna szuflada aplikacji z szybkimi akcjami i przeglądem statusu
SettingsView	Konfiguruje klucz API Brevo, preferencje synchronizacji i mapowania pól
OnboardingView	Prowadzi nowych użytkowników przez połączenie ich konta Brevo

Dostępność viewportów

Nie wszystkie viewporty są dostępne we wszystkich trybach Stripe Dashboard:

Tryb	Dostępne viewporty
Tryb live	Wszystkie viewporty
Tryb testowy	Wszystkie viewporty (korzysta z danych testowych)
Sandbox	Wszystkie viewporty (jeśli `sandbox_install_compatible: true`)

Caution

Jeśli manifest deklaruje nieistniejący viewport, przesłanie aplikacji nie przejdzie walidacji. Zawsze weryfikuj identyfikatory viewportów według tej dokumentacji.