Concevoir votre application
Démarrer avec le concept, les instructions et les outils de conception.
Stripe Apps vous permet de créer votre propre application sur la plateforme de Stripe. Vous pouvez attribuer à votre application une interface utilisateur dans le Dashboard de Stripe en développant une extension d’interface utilisateur. Si vous créez une interface utilisateur pour votre application, appuyez-vous sur les outils et les instructions proposés pour simplifier le processus de conception.
Outils disponibles
Stripe Apps met à disposition des composants d’interface utilisateur, des modèles de conception courants et un kit d’outils d’interface utilisateur Figma.
Expression de la marque et personnalisation du style
Personnaliser le style
La personnalisation du style des éléments d’interface utilisateur est volontairement limitée. Le but est de conserver la cohérence de la plateforme avec les principaux éléments d’interface utilisateur et de mettre à disposition une barre d’outils très accessible. Nous limitons particulièrement les couleurs que vous pouvez adopter pour chaque élément car le contraste des couleurs est un aspect important pour garder une interface utilisateur accessible.
Éléments représentant la marque
Pour que votre application se démarque visuellement, utilisez l’indicateur d’application, une barre et une icône colorées en haut de l’application qui permettront aux utilisateurs d’identifier rapidement dans quelle application ils se trouvent. Contrairement à d’autres éléments d’interface utilisateur, vous pouvez choisir n’importe quelle couleur pour l’indicateur d’application.
Choisissez la couleur primaire de votre marque et une icône ou un logo simple pour l’accompagner. Spécifiez la couleur et l’icône avec les propriétés brandIcon et brandColor du composant ContextView de votre application.
Comment les choix de couleurs et d’icônes de votre marque apparaissent aux utilisateurs
Composants et modèles
Stripe Apps propose une gamme de composants d’interface utilisateur, que vous pouvez combiner afin de créer des interfaces utilisateur plus complexes.
Les modèles sont des combinaisons de composants qui indiquent comment utiliser efficacement les derniers composants de l’interface utilisateur. L’utilisation des modèles recommandés pour la création de votre application est le moyen le plus rapide de s’assurer de la bonne qualité et de la cohérence de l’expérience proposée aux utilisateurs. Cela permet aussi d’accélérer le processus de vérification de l’application.
Kit d’outils d’interface utilisateur Figma
Le kit d’outils d’interface utilisateur Figma contient tous les composants, modèles et quelques exemples d’application. Il est disponible à l’adresse @stripedesign sur Figma Community.
Voir le kit d’outils d’interface utilisateur
Le kit d’outils d’interface utilisateur Figma
Composants d’interface utilisateur
Les utilisateurs de Stripe souhaitent que l’apparence et l’expérience de Stripe Apps soient similaires à celles du Dashboard. Stripe Apps fournit des composants d’Interface utilisateur pour vous aider. Ces composants se trouvent dans un tiroir extensible pour Stripe Apps dans le Dashboard.
Les utilisateurs voient l’extension d’interface utilisateur de votre application dans le Dashboard Stripe
Lorsque les utilisateurs installent une application qui utilise des extensions d’interface utilisateur, l’application apparaît dans un dock. Lorsqu’ils cliquent sur le dock, un volet s’ouvre, donnant des informations sur votre application en affichant les actions que les utilisateurs peuvent entreprendre.
Surfaces disponibles
Le volet des applications sert de point d’entrée à toutes les applications installées par un utilisateur. Vous pouvez l’afficher sur plusieurs surfaces. Une surface est une fenêtre d’affichage correspondant à une page du Dashboard Stripe.
Pages de détails
Les pages d’informations donnent un aperçu détaillé d’un objet Stripe spécifique. Vous pouvez avoir, par exemple, une page d’informations pour un paiement, une facture, un abonnement, un client ou un produit. Sur une page d’informations, votre application peut avoir accès à des informations concernant l’objet qui utilise actuellement le SDK de l’extension d’interface utilisateur. Pour des raisons de sécurité, une autorisation est nécessaire. Consultez la documentation relative aux autorisations pour en savoir plus.
Réfléchissez aux objets Stripe qui correspondent le mieux à votre produit et créez des applications pertinentes pour chacun d’entre eux. Les applications Stripe offrent la possibilité de créer une application contextuelle qui s’intègre dans les workflows existants des utilisateurs.
Pages de listes
Les pages de listes offrent un aperçu de l’activité sur votre compte : par exemple, la page Clients liste tous les clients et la page Paiements répertorie tous les paiements.
Vous n’êtes pas systématiquement obligé de créer des pages de listes si celles-ci ne sont pas utiles à votre application. Ne créez une vue pour les pages de listes que si vous proposez des fonctionnalités qui ne se rapportent pas à un objet spécifique.
Accueil
La page d’accueil du Dashboard Stripe donne aux utilisateurs un aperçu rapide de leur entreprise et les dirige vers les principaux workflows. Envisagez de créer des applications pour la surface d’accueil si vous pouvez présenter un aperçu pertinent de l’activité de l’utilisateur, correspondant à votre produit et à son intersection avec Stripe.
Toutes les applications n’ont pas besoin d’avoir une vue pour la surface d’accueil. Ne créez une vue pour la surface d’accueil que si vous avez des informations pertinentes à montrer aux futurs utilisateurs.
Anatomie d’une application
Les parties d’une application Stripe
L’indicateur d’application permet aux utilisateurs d’identifier dans quelle application ils se trouvent. Il s’affiche contextuellement sur les pages de votre application. L’icône d’application permet aux utilisateurs d’identifier votre application et de l’ouvrir en cliquant dessus.
L’en-tête contient le nom de votre application, le nom de la vue, le lien externe vers votre produit et quelques actions de niveau supérieur que l’utilisateur peut effectuer sur votre application.
Le contenu constitue le canevas vierge de votre application. Vous pouvez le composer à l’aide de l’ensemble des composants d’interface utilisateur disponibles.
Le point d’entrée de l’App Marketplace permet de découvrir et d’ajouter de nouvelles applications. Lorsqu’un utilisateur ajoute une nouvelle application depuis l’App Marketplace, le dock est mis à jour afin d’afficher l’icône de cette nouvelle application.
L’icône d’application active est une icône représentant l’application sélectionnée actuellement. Si l’utilisateur a d’autres applications installées, ses icônes d’application apparaissent au-dessus ou en dessous dans le dock des applications. Pour définir l’icône de votre application, utilisez la documentation consacrée au manifeste de l’application.
Types de vues
Une application peut être créée à partir de trois types d’affichages différents :
La vue détermine ce que l’utilisateur voit à différents moments pour interagir avec votre application. Les vues sont semblables aux différentes pages HTML d’un site Web.
ContextView est la vue par défaut de votre application, SettingsView celle de la page des paramètres. Ces deux vues sont des composants racines de vues, ce qui signifie qu’elles servent de conteneurs de base destinés à être remplis par d’autres composants. Chaque composant doit disposer d’un composant racine de vue.
ContextView
Apparence d’une ContextView
La première vue de l’application doit être une ContextView.
ContextView permet aux applications de s’afficher dans un volet à côté du contenu de Stripe, et aux utilisateurs de les afficher côte à côte et de partager le contexte entre votre application et le contenu de Stripe.
Ces modules en contexte permettent à l’application d’intégrer les workflows existants des utilisateurs et de leur fournir des informations et des actions contextuelles.
L’interaction d’un utilisateur avec une application commence toujours par une ContextView. Chaque application doit avoir au moins une ContextView (par fenêtre d’affichage), qui fait office de vue par défaut lors du chargement (similaire à la page index. d’un site web).
FocusView
Apparence d’une FocusView
Un composant FocusView est conçu pour des flux plus complexes ou plus longs et se déclenche depuis une ContextView.
En mode FocusView, une toile de fond de blocage est appliquée au reste de la page afin d’attirer l’attention de l’utilisateur sur la vue actuelle, renforçant ainsi son objectif pour une tâche spécifique, du début à la fin.
La toile de fond ne permet pas à l’utilisateur d’interagir avec le contenu de la page située derrière le volet.
ChoisissezFocusView dans les cas suivants :
- Votre utilisateur remplit un formulaire ou exécute un workflow qui n’a pas besoin du contexte immédiat de la page Stripe et ne doit pas être interrompu facilement
- Vous avez besoin d’un canevas plus large pour afficher une vue plus complexe (par exemple, pour afficher un aperçu d’un objet étranger, comme un ticket de support).
Vous ne savez pas quelle vue choisir ?
Lorsque vous choisissez entre ContextView et FocusView, choisissez par défaut ContextView. Cette vue permet aux utilisateurs d’afficher côte à côte le contenu de Stripe et celui de votre application.
Choisissez FocusView lorsqu’il est important pour l’utilisateur d’accomplir une tâche spécifique, de A à Z, ou lorsque vous avez besoin d’un canevas plus large pour afficher une vue plus complexe.
SettingsView
Voici à quoi ressemble SettingsView
Une SettingsView s’affiche sur la page de configuration de votre application afin de vous permettre de fournir des paramètres personnalisés. Découvrez comment ajouter une page des paramètres pour votre application.