---
title: "Référence des viewports | Tajo"
description: "Référence complète des viewports du tableau de bord Stripe où l’interface de votre Stripe App peut s’afficher"
url: https://tajo.io/fr/docs/stripe-apps/viewports/
markdown: https://tajo.io/fr/docs/stripe-apps/viewports.md
lang: fr-FR
author: "Set Noa"
author_url: https://tajo.io/fr/set-noa/
robots: noindex
---

Demandez un accès anticipé

Indiquez votre prénom et votre adresse e-mail professionnelle. Nous vous enverrons un lien pour confirmer votre demande d’accès à Tajo.

# Référence des viewports

[Set Noa](https://tajo.io/fr/set-noa/)

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.

Caution

**Statut : prévue, non construite.** Tajo n’a pas d’app Stripe, donc rien dans cette section ne peut être installé aujourd’hui. Les identifiants d’app, URL et informations d’authentification présents sur cette page sont des exemples illustratifs, pas des endpoints actifs.

## Comment fonctionnent les viewports

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

```json
{
  "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 :

```typescript
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 :

```json
{
  "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.