# Stripe

> Découvrez comment configurer le composant Stripe, constituer un panier et lancer un parcours de paiement fiable dans PandaSuite.

https://docs.pandasuite.com/fr/essentials/components/stripe/

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

> **Note**
>
> Le composant Stripe nécessite un compte Stripe - vous pouvez [créer un compte
> gratuitement](https://dashboard.stripe.com/register/).

## 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](https://dashboard.stripe.com/).

[Image : Propriétés du composant Stripe dans PandaSuite Studio, avec les champs Clé publique et Clé secrète remplis par des clés de test]

[Image : Page API keys du dashboard Stripe en mode test, avec la clé publique et la clé secrète masquée à copier dans PandaSuite]

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.

> **Info**
>
> 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.

[Image : Éditeur du composant Stripe : le bouton Enregistrer et Get the products sont encadrés, au-dessus du produit Artic Fox à 250 €]

## 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**

> **Attention**
>
> **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**

[Image : Bouton Buy avec une interaction au clic qui lance Définir produit (ID de prix, quantité 1) puis Acheter sur le composant Stripe]

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

[Image : Page Stripe Checkout sur smartphone pour Artic Fox à 250,00 €, avec les champs e-mail, informations de carte et nom du titulaire]

## 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](https://stripe.com/docs/billing/subscriptions/webhooks).

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

[Image : Bouton Open Portal de la pop-up de paiement réussi, qui lance Ouvrir le portail client avec l'ID client lié à la donnée id]

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

[Image : Application sur smartphone listant les produits Stripe et leur quantité, Artic Fox (1) et Persian Cat (0), avec les boutons Buy et Reset]

Exemple de configuration :

[Image : Composant Collection / Liste dont la Source est liée à la propriété prices du composant Stripe, un tableau de 2 produits]

Besoin d’un rappel sur les liaisons ? Consultez [Liaison de données](https://docs.pandasuite.com/fr/essentials/data/data-binding/).