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 sur la page détaillée d’un client dans le Dashboard Stripe :

Avant de commencer

Si vous possédez déjà une extension Connect, reportez-vous à la section consacrée à la migration des extensions vers Stripe Apps.
Accédez au Dashboard Stripe pour vous connecter ou créer un compte.
Si ce n’est pas déjà fait, installez la Stripe CLI et connectez-vous avec le même compte.
Command Line
Sélectionner une langue
homebrew
Installer à partir d'une source
No results
# Install Homebrew to run this command: https://brew.sh/ brew install stripe/stripe-cli/stripe # Connect the CLI to your dashboard stripe login
Pour davantage d’options d’installation, consultez la page consacrée à l’interface de ligne de commande Stripe.
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 :
Command Line
```
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.
Vérifiez que Node.js est installé en exécutant :
Command Line
```
node -v
```
Stripe Apps nécessite Node.js version >=14. Nous recommandons d’utiliser une version Active LTS (18 ou ultérieure). Si Node.js n’est pas installé, téléchargez-le et installez-le. 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, des restrictions supplémentaires s’appliquent :

Votre compte doit être activé, 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 :

Command Line
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.

Command Line
stripe apps -v
# apps version 1.5.12

Si vous devez mettre à niveau le plugin apps, vous pouvez exécuter :

Command Line

stripe plugin upgrade apps

Créer une application

Concevez la structure de base de votre application « Hello, world! » :
Command Line
```
stripe apps create helloworld
```
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 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.

La structure de fichiers de votre répertoire se présente désormais ainsi :

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.
- App.tsx : l’exemple de vue affichée sur la page détaillée d’un client dans le Dashboard Stripe.
- App.test.tsx : le fichier de test pour tester le fonctionnement de la vue App.tsx.
stripe-app.json : le fichier du manifeste de l’application décrivant la façon dont votre application s’intègre à la plateforme Stripe.
package.json : le fichier contenant des métadonnées pour gérer les dépendances de l’application.
yarn.lock : le fichier auto-généré répertoriant les versions actuelles des dépendances de l’application.
jest.config.ts : le fichier de configuration pour exécuter des fichiers de 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 le linting 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.

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 :

Accédez au répertoire helloworld :
Command Line
```
cd helloworld
```
Pour afficher un aperçu de votre application, démarrez votre serveur de développement en local :
Command Line
```
stripe apps start
```
Appuyez sur Entrée pour ouvrir votre navigateur.
Remarque
Utilisez un navigateur qui prend en charge le Dashboard Stripe. 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.
Cliquez sur Continuer pour afficher un aperçu de l’application sur votre compte Stripe
Activer l’aperçu de l’application
Votre application dans le Dashboard

Activez l’accès au réseau local 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 :

Modifiez le titre de votre fichier App.tsx tout en gardant la page Stripe Dashboard ouverte et votre serveur de développement en cours d’exécution. Enregistrez le fichier pour voir vos modifications dans votre application.
Dans le même fichier, supprimez > de la balise de fermeture </ContextView> et enregistrez le fichier pour afficher l’erreur :
Vous pouvez résoudre l’erreur via le Dashboard Stripe, les outils de développement de votre navigateur ou la CLI Stripe.
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.