Vraag vroegtijdige toegang aan

Vul je voornaam en een e-mailadres of telefoonnummer in. We nemen daarna contact met je op en leggen uit hoe je toegang krijgt tot Tajo.

Naslag viewports

Viewports bepalen waar de UI-componenten van je Stripe App verschijnen binnen het Stripe Dashboard. Elke viewport hoort bij een specifieke Dashboard-pagina of plek waar je app een weergave kan renderen.

Hoe viewports werken

Als je een weergave declareert in je app-manifest, koppel je een React-component aan een viewport:

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

De component rendert in de app-lade (het zijpaneel) zodra een gebruiker naar de bijbehorende Dashboard-pagina navigeert en je app opent.

Dashboardbrede versus paginaspecifieke viewports

Dashboardbrede viewports

Deze viewports zijn op elke pagina van het Stripe Dashboard beschikbaar:

Viewport ID	Beschrijving
`stripe.dashboard.drawer.default`	Standaardweergave in de lade, vanaf elke Dashboard-pagina bereikbaar via het app-icoon
`stripe.dashboard.home.overview`	Overzicht op de homepagina, getoond op de startpagina van het Dashboard
`stripe.dashboard.settings`	Instellingenpagina van de app, bereikbaar via het instellingenmenu van de app
`stripe.dashboard.onboarding`	Onboardingstappen, getoond na installatie van de app

Tip

De viewport drawer.default fungeert als terugvaloptie. Opent een gebruiker je app op een pagina waarvoor je geen specifieke viewport hebt gedeclareerd, dan rendert de weergave drawer.default.

Paginaspecifieke viewports

Deze viewports renderen alleen wanneer de gebruiker zich op de bijbehorende Dashboard-pagina bevindt:

Betalingen

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.payment.list`	Lijst met betalingen	`/payments`
`stripe.dashboard.payment.detail`	Detail van een betaling	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Detail van een charge	`/payments/:id` (verouderd)	Charge

Klanten

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.customer.list`	Lijst met klanten	`/customers`
`stripe.dashboard.customer.detail`	Detail van een klant	`/customers/:id`	Customer

Producten en prijzen

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.product.list`	Lijst met producten	`/products`
`stripe.dashboard.product.detail`	Detail van een product	`/products/:id`	Product
`stripe.dashboard.price.detail`	Detail van een prijs	`/prices/:id`	Price

Facturen

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.invoice.list`	Lijst met facturen	`/invoices`
`stripe.dashboard.invoice.detail`	Detail van een factuur	`/invoices/:id`	Invoice

Abonnementen

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.subscription.list`	Lijst met abonnementen	`/subscriptions`
`stripe.dashboard.subscription.detail`	Detail van een abonnement	`/subscriptions/:id`	Subscription

Checkout

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.checkout.session.list`	Lijst met Checkout Sessions	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Detail van een Checkout Session	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Lijst met Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Detail van een Payment Link	`/payment-links/:id`	PaymentLink

Connect

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.connect.account.list`	Lijst met gekoppelde accounts	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Detail van een gekoppeld account	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Lijst met overboekingen	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Detail van een overboeking	`/connect/transfers/:id`	Transfer

Facturatie

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.coupon.list`	Lijst met coupons	`/coupons`
`stripe.dashboard.coupon.detail`	Detail van een coupon	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Lijst met offertes	`/quotes`
`stripe.dashboard.quote.detail`	Detail van een offerte	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Detail van een creditnota	`/credit-notes/:id`	CreditNote

Uitbetalingen

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.payout.list`	Lijst met uitbetalingen	`/payouts`
`stripe.dashboard.payout.detail`	Detail van een uitbetaling	`/payouts/:id`	Payout

Geschillen

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.dispute.list`	Lijst met geschillen	`/disputes`
`stripe.dashboard.dispute.detail`	Detail van een geschil	`/disputes/:id`	Dispute

Terminal

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.terminal.reader.list`	Lijst met readers	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Detail van een reader	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Lijst met locaties	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Detail van een locatie	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport ID	Pagina	URL-patroon	Objecttype
`stripe.dashboard.issuing.card.list`	Lijst met kaarten	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Detail van een kaart	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Lijst met kaarthouders	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Detail van een kaarthouder	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Lijst met transacties	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Lijst met autorisaties	`/issuing/authorizations`

De objectcontext gebruiken

Rendert je app in een detailviewport, dan ontvangt hij het bijbehorende Stripe-object als context:

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

Context bij lijst- versus detailweergaven

Type viewport	Objectcontext	Toepassing
Lijst (bijv. `customer.list`)	Niet beschikbaar, er is geen specifiek object geselecteerd	Toon geaggregeerde gegevens, samenvattingen of batchacties
Detail (bijv. `customer.detail`)	Het volledige Stripe-object van de huidige pagina	Toon objectspecifieke gegevens, acties en integraties

Aanbevolen viewports voor de Tajo Brevo-integratie

Voor de Tajo Brevo-integratieapp leveren deze viewports de meeste waarde op:

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

Component	Doel
CustomerDetailView	Toon de Brevo-contactgegevens, synchronisatiestatus en betrokkenheidsdata van een specifieke klant
CustomerListView	Toon de bediening voor batchsynchronisatie en geaggregeerde synchronisatiestatistieken van Brevo
PaymentDetailView	Toon welke Brevo-events door deze betaling zijn getriggerd
SubscriptionDetailView	Toon de status van de Brevo-automatisering voor dit abonnement
OverviewView	Widget op de Dashboard-homepagina met de gezondheid van de synchronisatie en de belangrijkste Brevo-cijfers
DrawerView	Algemene app-lade met snelle acties en een statusoverzicht
SettingsView	Stel de Brevo API-sleutel, synchronisatievoorkeuren en veldkoppelingen in
OnboardingView	Leid nieuwe gebruikers door het koppelen van hun Brevo-account

Beschikbaarheid van viewports

Niet alle viewports zijn in elke modus van het Stripe Dashboard beschikbaar:

Modus	Beschikbare viewports
Live-modus	Alle viewports
Testmodus	Alle viewports (met testgegevens)
Sandbox	Alle viewports (als `sandbox_install_compatible: true`)

Caution

Declareert je manifest een viewport die niet bestaat, dan mislukt de validatie bij het uploaden van de app. Controleer viewport-ID’s altijd aan de hand van dit overzicht.