Zaprosite za zgodnji dostop

Vnesite ime ter e-poštni naslov ali telefonsko številko. Poslali vam bomo podrobnosti o dostopu do platforme Tajo.

Referenca viewportov

Viewporti določajo, kje v vmesniku Stripe Dashboard se prikažejo komponente uporabniškega vmesnika vaše aplikacije Stripe App. Vsak viewport ustreza določeni strani ali mestu v Dashboardu, kjer lahko vaša aplikacija izriše pogled.

Kako viewporti delujejo

Ko v manifestu aplikacije napoveste pogled, komponento React preslikate na viewport:

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

Komponenta se izriše v predalu aplikacije (stranski plošči), ko uporabnik odpre ustrezno stran Dashboarda in zažene vašo aplikacijo.

Viewporti za celoten Dashboard v primerjavi z viewporti posameznih strani

Viewporti za celoten Dashboard

Ti viewporti so na voljo na vsaki strani vmesnika Stripe Dashboard:

ID viewporta	Opis
`stripe.dashboard.drawer.default`	Privzeti pogled v predalu, dosegljiv z ikono aplikacije s katere koli strani Dashboarda
`stripe.dashboard.home.overview`	Pregled na domači strani, prikazan na vstopni strani Dashboarda
`stripe.dashboard.settings`	Stran z nastavitvami aplikacije, dosegljiva iz menija nastavitev aplikacije
`stripe.dashboard.onboarding`	Uvajalni proces, prikazan po namestitvi aplikacije

Tip

Viewport drawer.default deluje kot nadomestna možnost. Če uporabnik odpre vašo aplikacijo na strani, za katero niste napovedali posebnega viewporta, se namesto tega izriše pogled drawer.default.

Viewporti posameznih strani

Ti viewporti se izrišejo samo, kadar je uporabnik na ustrezni strani Dashboarda:

Plačila

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.payment.list`	Seznam plačil	`/payments`
`stripe.dashboard.payment.detail`	Podrobnosti plačila	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Podrobnosti bremenitve	`/payments/:id` (opuščeno)	Charge

Stranke

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.customer.list`	Seznam strank	`/customers`
`stripe.dashboard.customer.detail`	Podrobnosti stranke	`/customers/:id`	Customer

Izdelki in cene

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.product.list`	Seznam izdelkov	`/products`
`stripe.dashboard.product.detail`	Podrobnosti izdelka	`/products/:id`	Product
`stripe.dashboard.price.detail`	Podrobnosti cene	`/prices/:id`	Price

Računi

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.invoice.list`	Seznam računov	`/invoices`
`stripe.dashboard.invoice.detail`	Podrobnosti računa	`/invoices/:id`	Invoice

Naročnine

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.subscription.list`	Seznam naročnin	`/subscriptions`
`stripe.dashboard.subscription.detail`	Podrobnosti naročnine	`/subscriptions/:id`	Subscription

Checkout

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.checkout.session.list`	Seznam sej Checkout	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Podrobnosti seje Checkout	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Seznam povezav Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Podrobnosti povezave Payment Link	`/payment-links/:id`	PaymentLink

Connect

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.connect.account.list`	Seznam povezanih računov	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Podrobnosti povezanega računa	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Seznam prenosov	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Podrobnosti prenosa	`/connect/transfers/:id`	Transfer

Obračunavanje

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.coupon.list`	Seznam kuponov	`/coupons`
`stripe.dashboard.coupon.detail`	Podrobnosti kupona	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Seznam ponudb	`/quotes`
`stripe.dashboard.quote.detail`	Podrobnosti ponudbe	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Podrobnosti dobropisa	`/credit-notes/:id`	CreditNote

Izplačila

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.payout.list`	Seznam izplačil	`/payouts`
`stripe.dashboard.payout.detail`	Podrobnosti izplačila	`/payouts/:id`	Payout

Spori

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.dispute.list`	Seznam sporov	`/disputes`
`stripe.dashboard.dispute.detail`	Podrobnosti spora	`/disputes/:id`	Dispute

Terminal

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.terminal.reader.list`	Seznam čitalnikov	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Podrobnosti čitalnika	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Seznam lokacij	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Podrobnosti lokacije	`/terminal/locations/:id`	TerminalLocation

Issuing

ID viewporta	Stran	Vzorec naslova URL	Tip objekta
`stripe.dashboard.issuing.card.list`	Seznam kartic	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Podrobnosti kartice	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Seznam imetnikov kartic	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Podrobnosti imetnika kartice	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Seznam transakcij	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Seznam avtorizacij	`/issuing/authorizations`

Dostop do konteksta objekta

Ko se vaša aplikacija izriše v viewportu s podrobnostmi, prejme ustrezni objekt Stripe kot 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 seznama v primerjavi s kontekstom podrobnosti

Tip viewporta	Kontekst objekta	Primer uporabe
Seznam (npr. `customer.list`)	Ni na voljo, izbran ni noben posamezen objekt	Prikaz skupnih podatkov, zbirnih pogledov ali paketnih dejanj
Podrobnosti (npr. `customer.detail`)	Celoten objekt Stripe za trenutno stran	Prikaz podatkov, dejanj in integracij za posamezen objekt

Priporočeni viewporti za integracijo Tajo z Brevom

Za aplikacijo za integracijo Tajo z Brevom so najbolj uporabni ti viewporti:

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

Komponenta	Namen
CustomerDetailView	Prikaže podatke o stiku v Brevu, stanje sinhronizacije in podatke o sodelovanju za posamezno stranko
CustomerListView	Prikaže kontrolnike za paketno sinhronizacijo in skupno statistiko sinhronizacije z Brevom
PaymentDetailView	Prikaže, katere dogodke v Brevu je sprožilo to plačilo
SubscriptionDetailView	Prikaže stanje avtomatizacije v Brevu za to naročnino
OverviewView	Pripomoček na domači strani Dashboarda s stanjem sinhronizacije in ključnimi meritvami Brevo
DrawerView	Splošni predal aplikacije s hitrimi dejanji in pregledom stanja
SettingsView	Nastavitev ključa API za Brevo, nastavitev sinhronizacije in preslikav polj
OnboardingView	Vodi nove uporabnike skozi povezovanje njihovega računa Brevo

Razpoložljivost viewportov

Vsi viewporti niso na voljo v vseh načinih vmesnika Stripe Dashboard:

Način	Razpoložljivi viewporti
Način v živo	Vsi viewporti
Preizkusni način	Vsi viewporti (uporablja preizkusne podatke)
Peskovnik	Vsi viewporti (če velja `sandbox_install_compatible: true`)

Caution

Če vaš manifest napove viewport, ki ne obstaja, nalaganje aplikacije ne bo prestalo preverjanja. ID-je viewportov vedno preverite v tej referenci.