Kérj korai hozzáférést

Add meg a keresztnevedet, valamint egy e-mail-címet vagy telefonszámot. Hamarosan elküldjük a Tajo eléréséhez szükséges információkat.

Viewport referencia

A viewportok határozzák meg, hol jelennek meg a Stripe Appod felületi komponensei a Stripe Dashboardon belül. Minden viewport a Dashboard egy konkrét oldalához vagy helyéhez tartozik, ahol az alkalmazásod nézetet jeleníthet meg.

Hogyan működnek a viewportok?

Amikor nézetet deklarálsz az alkalmazás manifestjében, egy React komponenst rendelsz egy viewporthoz:

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

A komponens az alkalmazásfiókban (oldalsó panelen) jelenik meg, amikor a felhasználó a megfelelő Dashboard oldalra navigál, és megnyitja az alkalmazásodat.

Dashboard-szintű és oldalspecifikus viewportok

Dashboard-szintű viewportok

Ezek a viewportok a Stripe Dashboard minden oldalán elérhetők:

Viewport azonosító	Leírás
`stripe.dashboard.drawer.default`	Alapértelmezett fiók nézet, bármelyik Dashboard oldalról elérhető az alkalmazás ikonjával
`stripe.dashboard.home.overview`	Kezdőoldali áttekintés, a Dashboard nyitóoldalán jelenik meg
`stripe.dashboard.settings`	Az alkalmazás beállítási oldala, az alkalmazás beállítás menüjéből érhető el
`stripe.dashboard.onboarding`	Bevezető folyamat, a telepítés után jelenik meg

Tip

A drawer.default viewport tartalékként működik. Ha a felhasználó olyan oldalon nyitja meg az alkalmazásodat, amelyhez nem deklaráltál külön viewportot, a drawer.default nézet jelenik meg helyette.

Oldalspecifikus viewportok

Ezek a viewportok csak akkor jelennek meg, ha a felhasználó a megfelelő Dashboard oldalon van:

Fizetések

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.payment.list`	Fizetések listája	`/payments`
`stripe.dashboard.payment.detail`	Fizetés részletei	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Terhelés részletei	`/payments/:id` (elavult)	Charge

Vásárlók

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.customer.list`	Vásárlók listája	`/customers`
`stripe.dashboard.customer.detail`	Vásárló részletei	`/customers/:id`	Customer

Termékek és árak

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.product.list`	Termékek listája	`/products`
`stripe.dashboard.product.detail`	Termék részletei	`/products/:id`	Product
`stripe.dashboard.price.detail`	Ár részletei	`/prices/:id`	Price

Számlák

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.invoice.list`	Számlák listája	`/invoices`
`stripe.dashboard.invoice.detail`	Számla részletei	`/invoices/:id`	Invoice

Előfizetések

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.subscription.list`	Előfizetések listája	`/subscriptions`
`stripe.dashboard.subscription.detail`	Előfizetés részletei	`/subscriptions/:id`	Subscription

Pénztár

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.checkout.session.list`	Checkout Session lista	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Checkout Session részletei	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Payment Link lista	`/payment-links`
`stripe.dashboard.payment-link.detail`	Payment Link részletei	`/payment-links/:id`	PaymentLink

Connect

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.connect.account.list`	Kapcsolt fiókok listája	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Kapcsolt fiók részletei	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Átutalások listája	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Átutalás részletei	`/connect/transfers/:id`	Transfer

Számlázás

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.coupon.list`	Kuponok listája	`/coupons`
`stripe.dashboard.coupon.detail`	Kupon részletei	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Árajánlatok listája	`/quotes`
`stripe.dashboard.quote.detail`	Árajánlat részletei	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Jóváíró számla részletei	`/credit-notes/:id`	CreditNote

Kifizetések

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.payout.list`	Kifizetések listája	`/payouts`
`stripe.dashboard.payout.detail`	Kifizetés részletei	`/payouts/:id`	Payout

Vitatott tranzakciók

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.dispute.list`	Vitatott tranzakciók listája	`/disputes`
`stripe.dashboard.dispute.detail`	Vitatott tranzakció részletei	`/disputes/:id`	Dispute

Terminal

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.terminal.reader.list`	Olvasók listája	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Olvasó részletei	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Helyszínek listája	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Helyszín részletei	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport azonosító	Oldal	URL-minta	Objektumtípus
`stripe.dashboard.issuing.card.list`	Kártyák listája	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Kártya részletei	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Kártyabirtokosok listája	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Kártyabirtokos részletei	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Tranzakciók listája	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Engedélyezések listája	`/issuing/authorizations`

Az objektumkontextus elérése

Amikor az alkalmazásod egy részletező viewportban jelenik meg, kontextusként megkapja a hozzá tartozó Stripe objektumot:

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

Lista és részletező kontextus

Viewport típusa	Objektumkontextus	Felhasználási eset
Lista (például `customer.list`)	Nem elérhető, nincs kiválasztott objektum	Összesített adatok, összefoglaló nézetek vagy kötegelt műveletek megjelenítése
Részletező (például `customer.detail`)	Az aktuális oldalhoz tartozó teljes Stripe objektum	Objektumspecifikus adatok, műveletek és integrációk megjelenítése

Ajánlott viewportok a Tajo Brevo integrációhoz

A Tajo Brevo integrációs alkalmazásnál ezek a viewportok adják a legtöbb értéket:

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

Komponens	Cél
CustomerDetailView	Az adott vásárló Brevo kapcsolatadatainak, szinkronizálási állapotának és aktivitási adatainak megjelenítése
CustomerListView	Kötegelt szinkronizálási vezérlők és összesített Brevo szinkronizálási statisztikák megjelenítése
PaymentDetailView	Annak megjelenítése, hogy ez a fizetés mely Brevo eseményeket indította el
SubscriptionDetailView	Az előfizetéshez tartozó Brevo automatizálások állapotának megjelenítése
OverviewView	Kezdőoldali widget a szinkronizálás állapotával és a legfontosabb Brevo metrikákkal
DrawerView	Általános alkalmazásfiók gyors műveletekkel és állapot-áttekintéssel
SettingsView	A Brevo API-kulcs, a szinkronizálási beállítások és a mezőleképezések konfigurálása
OnboardingView	Az új felhasználók végigvezetése a Brevo fiókjuk összekapcsolásán

A viewportok elérhetősége

Nem minden viewport érhető el a Stripe Dashboard összes módjában:

Mód	Elérhető viewportok
Éles mód	Minden viewport
Teszt mód	Minden viewport (tesztadatokkal)
Sandbox	Minden viewport (ha `sandbox_install_compatible: true`)

Caution

Ha a manifested olyan viewportot deklarál, amely nem létezik, az alkalmazás feltöltése elbukik a validáción. Mindig ellenőrizd a viewport azonosítókat ebben a referenciában.