Demandez un accès anticipé

Indiquez votre prénom ainsi qu’une adresse e-mail ou un numéro de téléphone. Nous vous recontacterons pour vous communiquer les modalités d’accès à Tajo.

Référence des viewports

Les viewports définissent l’endroit où les composants d’interface de votre Stripe App apparaissent dans le tableau de bord Stripe. Chaque viewport correspond à une page ou à un emplacement précis du tableau de bord où votre app peut afficher une vue.

Comment fonctionnent les viewports

Lorsque vous déclarez une vue dans le manifest de votre app, vous associez un composant React à un viewport :

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

Le composant s’affiche dans le tiroir de l’app (panneau latéral) lorsqu’un utilisateur ouvre votre app depuis la page correspondante du tableau de bord.

Viewports globaux et viewports propres à une page

Viewports globaux du tableau de bord

Ces viewports sont disponibles sur toutes les pages du tableau de bord Stripe :

ID de viewport	Description
`stripe.dashboard.drawer.default`	Vue par défaut du tiroir, accessible depuis n’importe quelle page du tableau de bord via l’icône de l’app
`stripe.dashboard.home.overview`	Vue d’ensemble de la page d’accueil, affichée sur la page d’atterrissage du tableau de bord
`stripe.dashboard.settings`	Page de paramètres de l’app, accessible depuis le menu des paramètres de l’app
`stripe.dashboard.onboarding`	Parcours d’onboarding, affiché après l’installation de l’app

Tip

Le viewport drawer.default sert de solution de repli. Si un utilisateur ouvre votre app sur une page pour laquelle vous n’avez déclaré aucun viewport spécifique, c’est la vue drawer.default qui s’affiche.

Viewports propres à une page

Ces viewports ne s’affichent que lorsque l’utilisateur se trouve sur la page correspondante du tableau de bord :

Paiements

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.payment.list`	Liste des paiements	`/payments`
`stripe.dashboard.payment.detail`	Détail d’un paiement	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Détail d’une charge	`/payments/:id` (ancien)	Charge

Clients

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.customer.list`	Liste des clients	`/customers`
`stripe.dashboard.customer.detail`	Détail d’un client	`/customers/:id`	Customer

Produits et prix

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.product.list`	Liste des produits	`/products`
`stripe.dashboard.product.detail`	Détail d’un produit	`/products/:id`	Product
`stripe.dashboard.price.detail`	Détail d’un prix	`/prices/:id`	Price

Factures

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.invoice.list`	Liste des factures	`/invoices`
`stripe.dashboard.invoice.detail`	Détail d’une facture	`/invoices/:id`	Invoice

Abonnements

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.subscription.list`	Liste des abonnements	`/subscriptions`
`stripe.dashboard.subscription.detail`	Détail d’un abonnement	`/subscriptions/:id`	Subscription

Checkout

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.checkout.session.list`	Liste des Checkout Sessions	`/checkout/sessions`
`stripe.dashboard.checkout.session.detail`	Détail d’une Checkout Session	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Liste des Payment Links	`/payment-links`
`stripe.dashboard.payment-link.detail`	Détail d’un Payment Link	`/payment-links/:id`	PaymentLink

Connect

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.connect.account.list`	Liste des comptes connectés	`/connect/accounts`
`stripe.dashboard.connect.account.detail`	Détail d’un compte connecté	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Liste des transferts	`/connect/transfers`
`stripe.dashboard.transfer.detail`	Détail d’un transfert	`/connect/transfers/:id`	Transfer

Facturation

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.coupon.list`	Liste des coupons	`/coupons`
`stripe.dashboard.coupon.detail`	Détail d’un coupon	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Liste des devis	`/quotes`
`stripe.dashboard.quote.detail`	Détail d’un devis	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Détail d’un avoir	`/credit-notes/:id`	CreditNote

Versements

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.payout.list`	Liste des versements	`/payouts`
`stripe.dashboard.payout.detail`	Détail d’un versement	`/payouts/:id`	Payout

Litiges

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.dispute.list`	Liste des litiges	`/disputes`
`stripe.dashboard.dispute.detail`	Détail d’un litige	`/disputes/:id`	Dispute

Terminal

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.terminal.reader.list`	Liste des lecteurs	`/terminal/readers`
`stripe.dashboard.terminal.reader.detail`	Détail d’un lecteur	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Liste des emplacements	`/terminal/locations`
`stripe.dashboard.terminal.location.detail`	Détail d’un emplacement	`/terminal/locations/:id`	TerminalLocation

Issuing

ID de viewport	Page	Motif d’URL	Type d’objet
`stripe.dashboard.issuing.card.list`	Liste des cartes	`/issuing/cards`
`stripe.dashboard.issuing.card.detail`	Détail d’une carte	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	Liste des titulaires de carte	`/issuing/cardholders`
`stripe.dashboard.issuing.cardholder.detail`	Détail d’un titulaire de carte	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	Liste des transactions	`/issuing/transactions`
`stripe.dashboard.issuing.authorization.list`	Liste des autorisations	`/issuing/authorizations`

Accéder au contexte de l’objet

Lorsque votre app s’affiche dans un viewport de détail, elle reçoit l’objet Stripe correspondant comme contexte :

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

Contexte des vues liste et détail

Type de viewport	Contexte de l’objet	Cas d’usage
Liste (par exemple `customer.list`)	Indisponible, aucun objet précis n’est sélectionné	Afficher des données agrégées, des vues de synthèse ou des actions par lot
Détail (par exemple `customer.detail`)	Objet Stripe complet de la page en cours	Afficher des données, des actions et des intégrations propres à l’objet

Viewports recommandés pour l’intégration Tajo Brevo

Pour l’app d’intégration Tajo Brevo, ce sont ces viewports qui apportent le plus de valeur :

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

Composant	Rôle
CustomerDetailView	Afficher les informations de contact Brevo, l’état de synchronisation et les données d’engagement d’un client précis
CustomerListView	Afficher les commandes de synchronisation par lot et les statistiques agrégées de synchronisation Brevo
PaymentDetailView	Afficher les événements Brevo déclenchés par ce paiement
SubscriptionDetailView	Afficher l’état des automations Brevo pour cet abonnement
OverviewView	Widget d’accueil du tableau de bord avec la santé de la synchronisation et les métriques Brevo clés
DrawerView	Tiroir général de l’app avec les actions rapides et une vue d’ensemble de l’état
SettingsView	Configurer la clé API Brevo, les préférences de synchronisation et les correspondances de champs
OnboardingView	Guider les nouveaux utilisateurs dans la connexion de leur compte Brevo

Disponibilité des viewports

Tous les viewports ne sont pas disponibles dans tous les modes du tableau de bord Stripe :

Mode	Viewports disponibles
Mode live	Tous les viewports
Mode test	Tous les viewports (avec des données de test)
Sandbox	Tous les viewports (si `sandbox_install_compatible: true`)

Caution

Si votre manifest déclare un viewport qui n’existe pas, l’envoi de l’app échouera à la validation. Vérifiez toujours les ID de viewport avec cette référence.