Be om tidlig tilgang

Skriv inn fornavnet ditt og en e-postadresse eller et telefonnummer. Vi kontakter deg med informasjon om tilgang til Tajo.

Referanse for viewporter

Viewporter bestemmer hvor UI-komponentene i Stripe-appen din vises inne i Stripe-dashboardet. Hver viewport svarer til en bestemt side eller plassering i dashboardet der appen din kan vise en visning.

Slik fungerer viewporter

Når du erklærer en visning i app-manifestet ditt, knytter du en React-komponent til en viewport:

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

Komponenten vises i appskuffen (sidepanelet) når brukeren går til den tilhørende siden i dashboardet og åpner appen din.

Viewporter for hele dashboardet kontra sidespesifikke viewporter

Viewporter for hele dashboardet

Disse viewportene er tilgjengelige på alle sider i Stripe-dashboardet:

Viewport-ID	Beskrivelse
`stripe.dashboard.drawer.default`	Standard skuffvisning, tilgjengelig fra alle sider i dashboardet via appikonet
`stripe.dashboard.home.overview`	Oversikt på hjemmesiden, vises på landingssiden i dashboardet
`stripe.dashboard.settings`	Innstillingssiden for appen, tilgjengelig fra appens innstillingsmeny
`stripe.dashboard.onboarding`	Oppstartsflyten, vises etter at appen er installert

Tip

Viewporten drawer.default fungerer som reserveløsning. Åpner brukeren appen din på en side der du ikke har erklært en egen viewport, vises drawer.default i stedet.

Sidespesifikke viewporter

Disse viewportene vises bare når brukeren er på den tilhørende siden i dashboardet:

Betalinger

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.payment.list`	Liste over betalinger	`/payments`
`stripe.dashboard.payment.detail`	Detaljer om betaling	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Detaljer om belastning	`/payments/:id` (eldre)	Charge

Kunder

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.customer.list`	Liste over kunder	`/customers`
`stripe.dashboard.customer.detail`	Detaljer om kunde	`/customers/:id`	Customer

Produkter og priser

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.product.list`	Liste over produkter	`/products`
`stripe.dashboard.product.detail`	Detaljer om produkt	`/products/:id`	Product
`stripe.dashboard.price.detail`	Detaljer om pris	`/prices/:id`	Price

Fakturaer

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.invoice.list`	Liste over fakturaer	`/invoices`
`stripe.dashboard.invoice.detail`	Detaljer om faktura	`/invoices/:id`	Invoice

Abonnementer

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.subscription.list`	Liste over abonnementer	`/subscriptions`
`stripe.dashboard.subscription.detail`	Detaljer om abonnement	`/subscriptions/:id`	Subscription

Checkout

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.checkout.session.list`	Liste over Checkout Sessions	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detaljer om Checkout Session	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Liste over Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detaljer om Payment Link	`/payment-links/:id`	PaymentLink

Connect

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.connect.account.list`	Liste over tilkoblede kontoer	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detaljer om tilkoblet konto	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Liste over overføringer	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Detaljer om overføring	`/connect/transfers/:id`	Transfer

Fakturering

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.coupon.list`	Liste over rabattkoder	`/coupons`
`stripe.dashboard.coupon.detail`	Detaljer om rabattkode	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Liste over tilbud	`/quotes`
`stripe.dashboard.quote.detail`	Detaljer om tilbud	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Detaljer om kreditnota	`/credit-notes/:id`	CreditNote

Utbetalinger

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.payout.list`	Liste over utbetalinger	`/payouts`
`stripe.dashboard.payout.detail`	Detaljer om utbetaling	`/payouts/:id`	Payout

Innsigelser

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.dispute.list`	Liste over innsigelser	`/disputes`
`stripe.dashboard.dispute.detail`	Detaljer om innsigelse	`/disputes/:id`	Dispute

Terminal

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.terminal.reader.list`	Liste over kortlesere	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detaljer om kortleser	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Liste over lokasjoner	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Detaljer om lokasjon	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.issuing.card.list`	Liste over kort	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Detaljer om kort	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Liste over kortholdere	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detaljer om kortholder	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Liste over transaksjoner	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Liste over autorisasjoner	`/issuing/authorizations`

Hent objektkonteksten

Når appen din vises i en detaljvisning, får den det aktuelle Stripe-objektet som 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 i lister kontra detaljvisninger

Type viewport	Objektkontekst	Brukstilfelle
Liste (for eksempel `customer.list`)	Ikke tilgjengelig, ingen bestemt objekt er valgt	Vis samlede tall, oversikter eller handlinger på flere objekter
Detalj (for eksempel `customer.detail`)	Hele Stripe-objektet for den aktuelle siden	Vis data, handlinger og integrasjoner knyttet til objektet

Anbefalte viewporter for Tajos Brevo-integrasjon

For appen med Tajos Brevo-integrasjon gir disse viewportene mest verdi:

{
  "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	Formål
CustomerDetailView	Viser Brevo-kontaktinfo, synkroniseringsstatus og engasjementsdata for en bestemt kunde
CustomerListView	Viser kontroller for synkronisering i bulk og samlet statistikk for Brevo-synkroniseringen
PaymentDetailView	Viser hvilke Brevo-hendelser denne betalingen utløste
SubscriptionDetailView	Viser status for Brevo-automatiseringen for dette abonnementet
OverviewView	Widget på dashboardets hjemmeside med synkroniseringsstatus og nøkkeltall fra Brevo
DrawerView	Generell appskuff med hurtighandlinger og statusoversikt
SettingsView	Konfigurer API-nøkkel for Brevo, innstillinger for synkronisering og feltkoblinger
OnboardingView	Veileder nye brukere gjennom å koble til Brevo-kontoen sin

Tilgjengelighet for viewporter

Ikke alle viewporter er tilgjengelige i alle modusene i Stripe-dashboardet:

Modus	Tilgjengelige viewporter
Live-modus	Alle viewporter
Testmodus	Alle viewporter (bruker testdata)
Sandkasse	Alle viewporter (hvis `sandbox_install_compatible: true`)

Caution

Erklærer manifestet ditt en viewport som ikke finnes, feiler valideringen når appen lastes opp. Kontroller alltid viewport-ID-ene mot denne referansen.