Aller au contenu

Stripe

Le composant Stripe vous permet de gérer des paiements web dans PandaSuite avec Stripe Checkout.

Le composant Stripe nécessite un compte Stripe - vous pouvez créer un compte gratuitement.

Insérer et configurer Stripe

Cliquez sur Composants et ajoutez le composant Stripe.

Dans le panneau Propriétés, renseignez :

  • Clé publique
  • Clé secrète

Vous trouverez ces deux clés dans votre dashboard Stripe.

Configuration des clés API Stripe dans PandaSuite
Interface Stripe avec les clés API

Cliquez ensuite sur Obtenir les produits pour importer vos prix Stripe dans le composant.

Vos produits et vos prix doivent d’abord être créés dans Stripe (dans le dashboard Stripe) avant de pouvoir les importer ici.

Pour des raisons de sécurité, sauvegardez votre projet au moins une fois avant la récupération des produits, puis sauvegardez à nouveau après chaque modification de clés API.

Sauvegarde du projet pour sécuriser Stripe

Caractéristiques du composant

Actions

Utilisez Agir sur le composant sur Stripe pour accéder à :

  • Acheter : Ouvre Stripe Checkout avec le panier courant
  • Définir produit : Définit la quantité pour un ID de prix
  • Incrémenter produit : Ajoute une quantité pour un ID de prix
  • Décrémenter produit : Retire une quantité pour un ID de prix
  • Retirer tous les produits : Réinitialise toutes les quantités du panier
  • Ouvrir le portail client : Ouvre le portail client Stripe pour un ID client existant

Déclencheurs

Sélectionnez Stripe et ouvrez le panneau Interactivités pour utiliser :

  • Paiement effectué
  • Paiement annulé
  • Paiement échoué

Ces déclencheurs vous permettent de gérer les états visuels, les messages et la navigation après paiement.

Propriétés exposées

Après chargement des produits et paiements, le composant expose :

  • prices (produits/prix avec quantités sélectionnées)
  • customer (disponible après un paiement réussi)

Constituer le panier avant Acheter

L’action Acheter nécessite un panier non vide. Le checkout est construit à partir des produits dont la quantité est supérieure à 0. Si aucun produit n’est défini, la session checkout ne peut pas être créée.

Pour constituer un panier valide :

  1. Utilisez Définir produit (ou Incrémenter produit) avec un ID de prix Stripe
  2. Conservez une quantité supérieure à 0
  3. Déclenchez Acheter
Configuration du panier Stripe avant achat

Cette action ouvre Stripe Checkout afin que l’utilisateur renseigne ses informations de paiement de manière sécurisée.

Formulaire de paiement sécurisé Stripe

Gérer les résultats de transaction

Utilisez les déclencheurs Stripe pour piloter l’expérience :

  • Paiement effectué : débloquer du contenu, afficher un message de succès, stocker l’ID client
  • Paiement annulé : revenir au panier ou proposer une relance
  • Paiement échoué : afficher une erreur et garder le panier éditable

Pour une logique métier avancée (mise à jour de stock, CRM/email, automatisation externe), utilisez les webhooks Stripe.

Utiliser le portail client

Après Paiement effectué, réutilisez customer.id avec Ouvrir le portail client pour laisser l’utilisateur gérer ses abonnements directement dans Stripe.

Portail client Stripe ouvert depuis PandaSuite

Afficher les données Stripe dans votre interface

Vous pouvez afficher dynamiquement les produits et les données client dans PandaSuite avec la liaison de données et des collections.

Affichage dynamique des produits Stripe dans une collection

Exemple de configuration :

Configuration de la liaison de données Stripe

Besoin d’un rappel sur les liaisons ? Consultez Liaison de données.