Zatražite rani pristup

Unesite ime i imejl adresu ili broj telefona. Poslaćemo vam detalje o pristupu platformi Tajo.

Referenca viewport-a

Viewport-i određuju gde se UI komponente vaše Stripe App pojavljuju unutar Stripe Dashboard-a. Svaki viewport odgovara određenoj stranici ili lokaciji u Dashboard-u na kojoj vaša aplikacija može da prikaže pogled.

Kako viewport-i rade

Kada deklarišete pogled u manifestu aplikacije, mapirate React komponentu na viewport:

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

Komponenta se prikazuje u fioci aplikacije (bočni panel) kada korisnik ode na odgovarajuću stranicu Dashboard-a i otvori vašu aplikaciju.

Viewport-i za ceo Dashboard naspram viewport-a za pojedinačne stranice

Viewport-i za ceo Dashboard

Ovi viewport-i su dostupni na svakoj stranici Stripe Dashboard-a:

Viewport ID	Opis
`stripe.dashboard.drawer.default`	Podrazumevani pogled fioke, dostupan sa bilo koje stranice Dashboard-a preko ikonice aplikacije
`stripe.dashboard.home.overview`	Pregled na početnoj stranici, prikazuje se na uvodnoj stranici Dashboard-a
`stripe.dashboard.settings`	Stranica sa podešavanjima aplikacije, dostupna iz menija podešavanja aplikacije
`stripe.dashboard.onboarding`	Uvodni proces, prikazuje se nakon instalacije aplikacije

Tip

Viewport drawer.default služi kao rezervna opcija. Ako korisnik otvori vašu aplikaciju na stranici za koju niste deklarisali poseban viewport, umesto toga se prikazuje pogled drawer.default.

Viewport-i za pojedinačne stranice

Ovi viewport-i se prikazuju samo kada je korisnik na odgovarajućoj stranici Dashboard-a:

Plaćanja

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.payment.list`	Lista plaćanja	`/payments`
`stripe.dashboard.payment.detail`	Detalji plaćanja	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Detalji naplate	`/payments/:id` (zastarelo)	Charge

Kupci

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.customer.list`	Lista kupaca	`/customers`
`stripe.dashboard.customer.detail`	Detalji kupca	`/customers/:id`	Customer

Proizvodi i cene

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.product.list`	Lista proizvoda	`/products`
`stripe.dashboard.product.detail`	Detalji proizvoda	`/products/:id`	Product
`stripe.dashboard.price.detail`	Detalji cene	`/prices/:id`	Price

Fakture

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.invoice.list`	Lista faktura	`/invoices`
`stripe.dashboard.invoice.detail`	Detalji fakture	`/invoices/:id`	Invoice

Pretplate

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.subscription.list`	Lista pretplata	`/subscriptions`
`stripe.dashboard.subscription.detail`	Detalji pretplate	`/subscriptions/:id`	Subscription

Checkout

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.checkout.session.list`	Lista Checkout sesija	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detalji Checkout sesije	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Lista Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detalji Payment Link-a	`/payment-links/:id`	PaymentLink

Connect

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.connect.account.list`	Lista povezanih naloga	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detalji povezanog naloga	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Lista transfera	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Detalji transfera	`/connect/transfers/:id`	Transfer

Billing

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.coupon.list`	Lista kupona	`/coupons`
`stripe.dashboard.coupon.detail`	Detalji kupona	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Lista ponuda	`/quotes`
`stripe.dashboard.quote.detail`	Detalji ponude	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Detalji knjižnog odobrenja	`/credit-notes/:id`	CreditNote

Isplate

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.payout.list`	Lista isplata	`/payouts`
`stripe.dashboard.payout.detail`	Detalji isplate	`/payouts/:id`	Payout

Sporovi

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.dispute.list`	Lista sporova	`/disputes`
`stripe.dashboard.dispute.detail`	Detalji spora	`/disputes/:id`	Dispute

Terminal

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.terminal.reader.list`	Lista čitača	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detalji čitača	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Lista lokacija	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Detalji lokacije	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport ID	Stranica	URL obrazac	Tip objekta
`stripe.dashboard.issuing.card.list`	Lista kartica	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Detalji kartice	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Lista vlasnika kartica	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detalji vlasnika kartice	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Lista transakcija	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Lista autorizacija	`/issuing/authorizations`

Pristup kontekstu objekta

Kada se vaša aplikacija prikazuje u viewport-u sa detaljima, ona kao kontekst dobija odgovarajući Stripe objekat:

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 liste naspram konteksta detalja

Tip viewport-a	Kontekst objekta	Način upotrebe
Lista (npr. `customer.list`)	Nije dostupan, nijedan konkretan objekat nije izabran	Prikažite zbirne podatke, sažete preglede ili grupne akcije
Detalji (npr. `customer.detail`)	Kompletan Stripe objekat za trenutnu stranicu	Prikažite podatke, akcije i integracije vezane za taj objekat

Preporučeni viewport-i za Tajo Brevo integraciju

Za Tajo Brevo integracionu aplikaciju ovi viewport-i donose najviše vrednosti:

{
  "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	Namena
CustomerDetailView	Prikazuje Brevo podatke o kontaktu, status sinhronizacije i podatke o angažovanju za određenog kupca
CustomerListView	Prikazuje kontrole za grupnu sinhronizaciju i zbirnu statistiku Brevo sinhronizacije
PaymentDetailView	Prikazuje koji su Brevo događaji pokrenuti ovim plaćanjem
SubscriptionDetailView	Prikazuje status Brevo automatizacije za ovu pretplatu
OverviewView	Vidžet na početnoj strani Dashboard-a sa stanjem sinhronizacije i ključnim Brevo metrikama
DrawerView	Opšta fioka aplikacije sa brzim akcijama i pregledom statusa
SettingsView	Podešavanje Brevo API ključa, željenih opcija sinhronizacije i mapiranja polja
OnboardingView	Vodi nove korisnike kroz povezivanje njihovog Brevo naloga

Dostupnost viewport-a

Nisu svi viewport-i dostupni u svim režimima Stripe Dashboard-a:

Režim	Dostupni viewport-i
Live režim	Svi viewport-i
Test režim	Svi viewport-i (koristi test podatke)
Sandbox	Svi viewport-i (ako je `sandbox_install_compatible: true`)

Caution

Ako vaš manifest deklariše viewport koji ne postoji, otpremanje aplikacije neće proći validaciju. Uvek proverite ID-jeve viewport-a prema ovoj referenci.