# Démarrer avec les applications Stripe

Apprenez les bases du développement d'une application en construisant la vôtre dans le Dashboard Stripe.

Créez un exemple d’application « 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 de détails du client dans le Dashboard Stripe.

## Utiliser un agent de codage

Le skill Stripe Apps aide votre agent de codage à générer la structure, créer, prévisualiser et tester une application Stripe en suivant les dernières recommandations de Stripe. [Installez les skills d’agent de Stripe](https://docs.stripe.com/skills.md), puis démarrez une nouvelle session d’agent dans le répertoire où vous souhaitez créer votre application et utilisez ce prompt :

```bash
Use the Stripe Apps skill to build a "Hello, world!" Stripe app that displays a UI extension on the Customer details page. Guide me through previewing and testing it.
```

Vous pouvez également suivre le guide pas à pas ci-dessous.

## Avant de commencer

> **Développement d’une application à partir de votre extension Stripe existante**
> 
> Si vous avez 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) existante, consultez [Migrer vers Stripe Apps](https://docs.stripe.com/stripe-apps/migrate-connect-extension.md).

1. [Connectez-vous au Dashboard Stripe](https://dashboard.stripe.com), ou [créez un compte](https://dashboard.stripe.com/register/stripe_apps).
2. [Installez la CLI Stripe](https://docs.stripe.com/cli/install). Si vous l’avez déjà installée, vérifiez que vous utilisez la version 1.52.0 ou une version ultérieure en exécutant ce qui suit :
   ```bash
   stripe version
   ```
Si votre version est antérieure à la 1.52.0, [mettez la CLI Stripe à niveau](https://docs.stripe.com/cli/upgrade).
3. Connectez-vous à Stripe CLI en exécutant ce qui suit :
   ```bash
   stripe login
   ```
Suivez les instructions pour sélectionner le même compte Stripe que celui que vous utilisez dans le Dashboard.
4. Vérifiez que [Node.js](https://nodejs.org/) est installé en exécutant :
   ```bash
   node -v
   ```
Stripe Apps nécessite la version `>=22` de Node.js. Nous vous recommandons d’utiliser une [version LTS active](https://nodejs.org/en/about/previous-releases) (22 ou ultérieure). Si vous n’avez pas Node.js, [téléchargez-le et installez-le](https://nodejs.org/en/download/).
5. Installez [pnpm](https://pnpm.io/installation). Stripe Apps utilise pnpm comme gestionnaire de paquets :
   ```bash
   brew install pnpm
   ```
Vérifiez l’installation :
   ```bash
   pnpm --version
   ```

Si vous prévoyez de [publier votre application sur l’App Marketplace](https://docs.stripe.com/stripe-apps/publish-app.md), il existe des restrictions supplémentaires :

- Vous devez disposer d’un [compte Stripe actif](https://docs.stripe.com/get-started/account/set-up.md), dont l’adresse e-mail et les informations d’entreprise ont été vérifiées.
- Un [compte de plateforme Connect](https://docs.stripe.com/connect.md) ne peut pas publier d’application sur la marketplace Stripe.

Si vous créez une [extension](https://docs.stripe.com/extensions/how-extensions-work.md), assurez-vous d’avoir :

| Prérequis | Configuration |
| --- | --- |
| [Compte Stripe](https://docs.stripe.com/get-started/account/set-up.md) avec accès aux extensions en version bêta privée | Si vous n’y avez pas accès, [inscrivez-vous](https://docs.stripe.com/stripe-apps/create-app.md#signup) pour obtenir un accès anticipé. |
| [CLI Stripe](https://docs.stripe.com/cli.md) v1.52.0 ou ultérieure, connecté à votre compte | `stripe version` à vérifier. [Installez](https://docs.stripe.com/cli/install) ou [mettez à niveau](https://docs.stripe.com/cli/upgrade) si nécessaire. |
| Un [environnement de test](https://docs.stripe.com/sandboxes.md) (recommandé pour une première configuration) | Créez-en un dans le Dashboard si vous n’en avez pas. |
| [Node.js](https://nodejs.org) v22 ou ultérieure | `node --version` |
| [pnpm](https://github.com/pnpm/pnpm/releases) v10 (la v11 n’est pas prise en charge) | `pnpm --version` |
| [Plugin CLI Stripe Apps](https://docs.stripe.com/stripe-apps/create-app.md#install-stripe-apps-cli) v1.19.0 ou ultérieure | `stripe plugin install apps` puis confirmez avec `stripe apps -v` |
| Plugin Generate v0.11.5 ou ultérieure | Confirmez avec `stripe generate --version` |

## 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 le plugin `apps` est déjà installé, vérifiez que vous utilisez bien la version `1.19.0` ou une version ultérieure.

```bash
stripe apps -v
# apps version 1.19.0
```

Si vous avez déjà installé le plugin `apps`, nous vous recommandons d’effectuer une mise à niveau vers la dernière version en exécutant :

```bash
stripe plugin upgrade apps
```

## Vérifier la version du plugin Generate CLI

Le plugin Generate ajoute des commandes de génération de code à l’outil Stripe CLI. Utilisez `stripe generate app` pour créer le projet initial et la configuration de votre application. Le plugin Apps fournit des commandes pour développer, prévisualiser et charger votre application.

Le plugin Generate s’installe automatiquement la première fois que vous exécutez une commande `stripe generate`. Vérifiez que vous utilisez la version `0.11.5` ou une version ultérieure :

```bash
stripe generate --version
# generate version 0.11.5
```

Si vous avez déjà installé le plugin `generate`, nous vous recommandons d’effectuer une mise à niveau vers la dernière version en exécutant :

```bash
stripe plugin upgrade generate
```

## Créer une application

1. Concevez la structure de base de votre application « Hello, world! » :

   ```bash
   stripe generate app helloworld
   cd helloworld
   ```

2. 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
   ```

2. Pour afficher un aperçu de votre application, démarrez votre serveur de développement en local :

   ```bash
   stripe apps start
   ```

3. 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).

4. 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.

2. Dans le même fichier, supprimez `>` de la balise de fermeture `</ContextView>` et enregistrez le fichier pour afficher l’erreur&nbsp;:
![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.

3. 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)

### Vous souhaitez accéder à la version bêta des nouveaux composants et fonctionnalités de l'application&nbsp;?

Enter your email to request access.

```bash
curl https://docs.stripe.com/preview/register \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Referer: https://docs.stripe.com/stripe-apps/create-app" \
  -d '{"email": "EMAIL", "preview": "stripe_apps_private_preview"}'
```