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.
Connectez-vous au Dashboard Stripe.
Si vous ne l’avez pas encore fait, installez la CLI Stripe et connectez-vous avec le même compte.
Command Line
homebrew
# 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 le node est installé et à jour.
Command Line
```
node -v
```
Vous pouvez gérer les dépendances de votre application avec NPM ou Yarn. Utilisez la dernière version stable pour une meilleure expérience de développement. Si vous envisagez de publier votre application sur App Marketplace, il existe des restrictions supplémentaires :

Votre compte doit être activé.
Actuellement, pour publier une application sur la place de marché Stripe, vous ne pouvez pas être un compte de plateforme.

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 :

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

La vue App s’affiche uniquement sur la page détaillée d’un client dans le Dashboard. Si vous ne voyez pas votre application, créez un client dans le Dashboard.

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.