# Démarrer avec les applications Stripe Apprenez les bases du développement d'une application en construisant la vôtre dans le Dashboard Stripe. Dans ce guide, vous allez vous pencher sur la création d’une application test « Hello, world! » avec une *extension d’interface utilisateur* (A set of APIs that allow you to inject user interface elements into the Stripe Dashboard using TypeScript and React) sur la page détaillée d’un client dans le Dashboard Stripe : ## Avant de commencer 1. Si vous possédez déjà une extension *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients), reportez-vous à la section consacrée à la [migration des extensions vers Stripe Apps](https://docs.stripe.com/stripe-apps/migrate-extension.md). 1. Accédez au [Dashboard Stripe](https://dashboard.stripe.com) pour vous connecter ou créer un compte. 1. Si ce n’est pas déjà fait, installez la [Stripe CLI](https://docs.stripe.com/stripe-cli.md) et connectez-vous avec le même compte.Pour davantage d’options d’installation, consultez la page consacrée à l’[interface de ligne de commande Stripe](https://docs.stripe.com/stripe-cli.md). 1. Vérifiez que vous utilisez la version 1.12.4 de la CLI ou une version plus récente. Pour ce faire, exécutez la commande suivante : ```bash stripe version ``` Si la version de votre CLI Stripe est antérieure à la 1.12.4, [mettez à jour votre CLI Stripe vers la dernière version](https://docs.stripe.com/stripe-cli/upgrade.md). 1. Vérifiez que [Node.js](https://nodejs.org/) est installé en exécutant : ```bash node -v ``` Stripe Apps nécessite Node.js version `>=14`. Nous recommandons d’utiliser une version [Active LTS](https://nodejs.org/en/about/previous-releases) (18 ou ultérieure). Si Node.js n’est pas installé, [téléchargez-le et installez-le](https://nodejs.org/en/download/). Vous pouvez gérer les dépendances de votre application avec NPM ou Yarn. Si vous prévoyez de [publier votre application sur l’App Marketplace](https://docs.stripe.com/stripe-apps/publish-app.md), des restrictions supplémentaires s’appliquent : - Votre compte doit être [activé](https://docs.stripe.com/get-started/account/set-up.md), avec une adresse e-mail vérifiée et des informations d’entreprise validées. - Un compte plateforme Connect ne peut pas publier d’application sur la Stripe Marketplace. ## Installer le plugin CLI des applications Stripe Pour créer une application Stripe, vous devez en premier lieu installer le plugin CLI Stripe Apps : ```bash stripe plugin install apps ``` Si vous avez déjà installé le plugin `apps`, vérifiez que vous utilisez bien la version `1.5.12` ou une version ultérieure. ```bash stripe apps -v # apps version 1.5.12 ``` Si vous devez mettre à niveau le plugin `apps`, exécutez : ```bash stripe plugin upgrade apps ``` ## Créer une application 1. Concevez la structure de base de votre application « Hello, world! » : ```bash stripe generate app helloworld cd helloworld ``` 1. Saisissez les informations suivantes : - **ID** : vous pouvez accepter l’ID de l’application généré automatiquement ou en personnaliser un. C’est ainsi que Stripe identifie votre application. Votre [ID d’application](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#schema) doit être globalement unique. - **Nom affiché** : saisissez un nom d’affichage, à savoir le nom affiché par le Dashboard pour désigner votre application. Vous pourrez toujours le changer plus tard. ### Structure des fichiers du répertoire de l’application | Chemin d’accès au fichier | Description | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `src/views/` | Répertoire pour vos fichiers TypeScript qui crée les éléments d’interface utilisateur dans le Dashboard Stripe, également appelés *vues* (A view is a React component that creates UI extensions in the Stripe Dashboard). | | `src/views/App.tsx` | L’exemple de *vue* (A view is a React component that creates UI extensions in the Stripe Dashboard) que la page des détails du client affiche dans le Dashboard Stripe. | | `src/views/App.test.tsx` | Le fichier test pour le fonctionnalité de la vue `App.tsx`. | | `stripe-app.json` | Le fichier *manifeste d’application* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties) qui décrit la manière dont votre application s’intègre à la plateforme Stripe. | | `package.json` | Le fichier contenant des métadonnées spécifiquement destinées à la gestion des dépendances de l’application. | | `yarn.lock` | Le fichier auto-généré qui répertorie les versions actuelles des dépendances de l’application. | | `jest.config.ts` | Le fichier de configuration pour exécuter des fichiers test. | | `images.d.ts` | La déclaration de type pour la prise en charge des fichiers d’image dans votre application Stripe. | | `tsconfig.json` | Le fichier de configuration pour la compilation des fichiers TypeScript. | | `.eslintrc.json` | Le fichier de configuration pour l’analyse syntaxique des fichiers TypeScript. | | `.vscode/extensions.json` | Le fichier contenant les extensions VS Code recommandées. | | `.gitignore` | Le fichier qui indique à Git d’ignorer certains fichiers ou dossiers. | Stripe Apps prend uniquement en charge React 17. Assurez-vous que les dépendances que vous installez sont compatibles avec cette version. Pour plus d’informations, découvrez [comment fonctionnent les extensions d’interface utilisateur](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#apps-cant-control-the-react-version). ## Afficher un aperçu de votre application Dans le Dashboard, vous pouvez exécuter votre application en local, y apporter des modifications et afficher un aperçu de ces dernières : 1. Accédez au répertoire `helloworld` : ```bash cd helloworld ``` 1. Pour afficher un aperçu de votre application, démarrez votre serveur de développement en local : ```bash stripe apps start ``` 1. Appuyez sur **Entrée** pour ouvrir votre navigateur. > Utilisez un [navigateur qui prend en charge le Dashboard Stripe](https://docs.stripe.com/dashboard/basics.md). Safari ne prend pas en charge le Dashboard. Pour plus d’informations actualisées, consultez le [support de navigation GitHub pour le suivi des problèmes](https://github.com/stripe/stripe-apps/issues/146). 1. Cliquez sur **Continuer** pour afficher un aperçu de l’application sur votre compte Stripe ![Capture d'écran de l'activation du mode aperçu](https://b.stripecdn.com/docs-statics-srv/assets/enable_app_preview.7d71712d107d581e0a25a4ebaf71484e.png) Activer l’aperçu de l’application ![Application Hello World](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_app.7b1588ce22f93f72ab2ecd07c44dd041.png) Votre application dans le Dashboard [Activez l’accès au réseau local](https://docs.stripe.com/stripe-apps/enable-local-network-access.md) avant d’afficher votre application. ## Développer votre application Lorsque vous prévisualisez votre application dans le Dashboard, le serveur de développement en local active les mises à jour en temps réel sur votre application : 1. Dans votre fichier `Home.tsx`, modifiez le titre tout en gardant la page du Dashboard Stripe ouverte et votre serveur de développement en cours d’exécution. Enregistrez le fichier pour voir vos modifications dans votre application. 1. Dans le même fichier, supprimez `>` de la balise de fermeture `` et enregistrez le fichier pour afficher l’erreur : ![Erreur Hello World](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_error.ee7aeea9d33b54f1e17b108f61741e97.png) Vous pouvez résoudre l’erreur via le Dashboard Stripe, les outils de développement de votre navigateur ou la CLI Stripe. 1. Pour arrêter le serveur de développement, saisissez **Ctrl+C** dans la ligne de commande. Votre application test est terminée. Vous pouvez désormais ajouter plus de fonctionnalités à votre application Stripe. ## See also - [Développer une extension d’interface utilisateur](https://docs.stripe.com/stripe-apps/build-ui.md) - [Ajouter une logique côté serveur](https://docs.stripe.com/stripe-apps/build-backend.md) - [Options de distribution](https://docs.stripe.com/stripe-apps/distribution-options.md)