# Ajouter une page des paramètres pour votre application Créez une page où les utilisateurs pourront configurer leurs paramètres pour votre application Stripe. Lorsque vous chargez votre application dans Stripe, nous lui créons une page de paramètres dédiée dans le Dashboard Stripe. Vous pouvez agencer librement le reste de la page et créer une vue des paramètres personnalisée. ## Comment utiliser les paramètres de l’application Un administrateur de compte qui installe votre application peut utiliser la page des paramètres pour : - **Configurer votre application pour son cas d’usage** : par exemple, imaginons qu’une entreprise utilisant Stripe souhaite synchroniser les données de paiement des sept derniers jours avec une autre application. Votre page de paramètres peut proposer un menu déroulant permettant aux administrateurs de sélectionner une période d’une semaine. La configuration s’applique de manière globale sur le compte, ce qui signifie que tous les utilisateurs de ce compte Stripe peuvent désormais voir les données de la semaine passée dans votre application. - **Authentifier des utilisateurs** : si votre application se connecte à une application externe à Stripe, vous devez permettre aux utilisateurs de Stripe de se connecter à l’autre application, transmettre leurs identifiants et gérer l’authentification. Pour cela, nous vous conseillons fortement d’utiliser la page des paramètres. Par exemple, une application qui utilise une API tierce comme Zendesk nécessite une `SettingsView` pour authentifier un utilisateur avec son compte Zendesk. - **Désinstaller une application** : la page des paramètres est le seul emplacement qui permet de désinstaller une application. Vous ne pouvez pas supprimer le bouton Désinstaller de la page des paramètres. Les utilisateurs peuvent également cliquer sur des boutons pour signaler votre application et afficher son référencement sur les places de marché, le cas échéant. ## Fonctionnalités Par défaut, la page de paramètres comporte des boutons permettant de désinstaller et signaler votre application, en plus de fournir des information diverses sur celle-ci. Utilisez un composant `SettingsView` pour remplir la page avec des paramètres personnalisés. Il s’agit d’un composant racine de la vue qui s’affiche dans la page des paramètres. Ajoutez des composants d’interface utilisateur, comme des onglets et des champs de formulaire, pour créer votre propre expérience utilisateur. ![SettingsView dans le Dashboard Stripe](https://b.stripecdn.com/docs-statics-srv/assets/settingsview.ca0e43bcc311ea9819da61b2949e6ed1.png) Exemple de SettingsView dans le Dashboard Stripe ## Personnaliser la page des paramètres Remplissez la page vide des paramètres de votre application en définissant une vue des paramètres et en élaborant une interface utilisateur afin de permettre à vos utilisateurs de configurer votre application. Vous pouvez personnaliser la page des paramètres de votre application à votre guise. En mode aperçu, la page des paramètres est plus petite. En mode production, elle s’affiche en plein écran. ## Ajouter une vue des paramètres Définissez une vue des paramètres avec la CLI : ```bash stripe apps add settings ``` Donnez le nom de votre choix à votre composant. La vue des paramètres générée est disponible dans le répertoire `src/views`. Dans le [manifeste de l’application](https://docs.stripe.com/stripe-apps/reference/app-manifest.md), votre nouvelle vue est liée à la fenêtre d’affichage `settings` dans un champ `ui_extension` : ```json { ..., "ui_extension": { "views": [ ..., { "viewport": "settings", "component": "AppSettings" } ] } } ``` Dans cet extrait de code, vous pouvez constater par vous-même qu’une vue est en réalité l’association d’un composant React et d’une fenêtre d’affichage donnée. Ici, le composant racine de la vue `AppSettings` apparaît dans la page des paramètres du Dashboard Stripe, à savoir la fenêtre d’affichage `settings`. Le composant racine de la vue `SettingsView` n’est pas lié à un objet spécifique, mais à la fenêtre d’affichage `settings`, laquelle mappe vers des emplacements prédéfinis dans le Dashboard en dehors du volet d’applications. ## Afficher un aperçu de votre page des paramètres Lors de la prévisualisation de votre application en local, testez votre `SettingsView` à l’adresse pour voir à quoi ressemblent les paramètres. Une fois votre application chargée, votre `SettingsView` s’affiche sur la page des paramètres de l’application du Dashboard. Pour la voir en mode production, accédez à `https://dashboard.stripe.com/settings/apps/YOUR_APPLICATION_ID` et remplacez `YOUR_APPLICATION_ID` par l’ID que vous avez indiqué lors de la création de votre application. ## Enregistrer les valeurs Lorsqu’un utilisateur configure ses paramètres, votre application doit ensuite appliquer les modifications. Fournissez une fonction pour transmettre le composant `SettingsView` et gérer l’événement d’enregistrement. Un clic sur le bouton **Enregistrer** déclenche cet événement d’enregistrement. La fonction de rappel `onSave` reçoit un objet de `values`. Cet objet transforme les éléments du formulaire en paires clé-valeur, dans lesquelles l’attribut `name` de l’élément est la clé et l’attribut `value` est la valeur : ```jsx /** * An example app settings view that provides two settings fields of first & last name. * The fields are combined into a single string value and passed to an external API. */ import {SettingsView, TextField} from "@stripe/ui-extension-sdk/ui"; const ExampleAppSettings = () => { // Define a callback function to pass to the onSave event. const saveSettings = async (values: any) => { try { // Extract our fields from the values object. The key is the name attribute of the form element. const { firstname, lastname } = values; // Make a POST request to an external API const result = await fetch( 'https://www.my-api.com/', { method: 'POST', body: JSON.stringify({ fullName: `${firstname} ${lastname}`, }), } ); await result.text(); } catch (error) { console.error(error); } }; return ( /* Assign our callback function to the onSave property */ { /* A name attribute for each field is required to handle the form data in the onSave callback */ } ); }; export default ExampleAppSettings; ``` Pour en savoir plus, consultez la [documentation consacrée à `SettingsView`](https://docs.stripe.com/stripe-apps/components/settingsview.md). ## Enregistrer et récupérer des paramètres Pour gérer le stockage et la récupération des valeurs des paramètres, connectez le composant `SettingsView` à un [back-end d’application](https://docs.stripe.com/stripe-apps/build-backend.md) ou à un service tiers qui inclut les paramètres d’application. Consultez un [exemple d’interface utilisateur des paramètres](https://github.com/stripe/stripe-apps/tree/master/examples/settings-view). ## Afficher un message de confirmation Vérifiez que votre interface utilisateur avertit les utilisateurs que leur configuration a été enregistrée. Utilisez la propriété `statusMessage` pour afficher un message de confirmation lorsqu’un utilisateur clique sur le bouton d’enregistrement. ![Exemple de SettingsView affichant un message d'état](https://b.stripecdn.com/docs-statics-srv/assets/settingsview-statusmessage.372f7befb8b2104ab42f2cc35ac021d3.png) Exemple de SettingsView affichant un message d’état. Voici le code correspondant à cet exemple dans lequel une `SettingsView` génère un message d’état à gauche du bouton d’enregistrement : ```jsx import {useState} from 'react'; import {SettingsView, TextField} from "@stripe/ui-extension-sdk/ui"; /** * An example app settings view that provides two settings fields of first & last name. * The fields are combined into a single string value and passed to an external API. * The user is notified of the status of their settings form through the statusMessage property. */ const ExampleAppSettings = () => { // useState to track the status of the form. Changing the status value triggers a rerender. const [status, setStatus] = useState(''); // Define a callback function to pass to the onSave event. const saveSettings = async (values: any) => { // Update the form status with a loading message. setStatus('Saving...'); try { const { firstname, lastname } = values; const result = await fetch( 'https://www.my-api.com/', { method: 'POST', body: JSON.stringify({ fullName: `${firstname} ${lastname}`, }), } ); await result.text(); // Update the form status with a success message. setStatus('Saved!'); } catch (error) { console.error(error); // Update the form status with an error message. setStatus('There was an error saving your settings.'); } }; return ( // Assign our callback function to the onSave property & pass the current value of statusMessage ); }; export default ExampleAppSettings; ``` Vous pouvez également créer vos propres conceptions pour communiquer des états aux utilisateurs de votre application à l’aide des [composants d’interface utilisateur](https://docs.stripe.com/stripe-apps/components.md). ## See also - [Documentation de l’API Extension SDK](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md) - [Composants d’interface utilisateur](https://docs.stripe.com/stripe-apps/components.md) - [Créer une interface utilisateur](https://docs.stripe.com/stripe-apps/build-ui.md)