Intégration Stripe

Comment configurer les paiements dans ton app grâce à notre intégration Stripe

Lovable te permet désormais de configurer Stripe entièrement via le chat.

Configuration automatique pilotée par chat (recommandée)
Après avoir connecté Supabase et enregistré ta Stripe Secret Key via Add API Key, décris simplement ce dont tu as besoin :

• « Ajoute trois paliers d’abonnement… »
• « Crée un paiement unique pour mon e‑book à $29 »
  Lovable génère les Edge Functions de checkout / portail, les tables de base de données avec RLS, et les boutons d’interface — aucun code manuel ni webhook, sauf si tu en demandes.

• Pour les ventes ponctuelles, assure-toi que ton panier ou ta page produit fonctionne déjà.
• Pour les abonnements, vérifie que Supabase Auth est en place pour que Lovable puisse lier les clients Stripe à l’ID de chaque utilisateur.

​

Points clés à retenir

• Utilisez le flux piloté par le chat pour les abonnements comme pour les paiements ponctuels.
• Ne collez jamais votre Stripe Secret Key dans le chat. Configurez-la via le formulaire Add API Key dans le chat.
• Les webhooks sont activés sur demande (opt‑in). Lovable s’appuie sur un polling via des Edge Functions, sauf si vous demandez des webhooks.
• Déboguez dans Browser Console → Network/Errors, Supabase → Edge Functions → Journaux, et Stripe Dashboard → Journaux.
• Testez toujours en Stripe Test Mode, puis déployez.

​

Prérequis

Avant d’intégrer Stripe, assurez-vous que les prérequis suivants sont réunis :

• Le projet doit être connecté à Supabase. En savoir plus sur Supabase
• Un compte Stripe avec des produits correctement configurés.
• Un frontend et un backend fonctionnels :
  • Pour la vente de produits individuels, assurez-vous qu’un panier et une page de paiement soient opérationnels.
  • Pour les abonnements, configurez les fonctionnalités de connexion et différents paliers de tarification.

Veuillez noter L’intégration Stripe ne fonctionne pas dans l’Aperçu. Pour tester l’intégration, vous devez Déployer. Assurez-vous également d’être en mode test dans Stripe lorsque vous essayez la fonctionnalité. Lors des tests de paiement, le numéro de carte 4242 4242 4242 4242, n’importe quels trois chiffres pour le CVC et n’importe quelle date future seront acceptés comme carte.

​

Configuration des paiements Stripe (flux de chat no-code)

Lovable génère désormais toute la logique Stripe pour vous. Une fois que votre Stripe Secret Key est configurée via le formulaire intégré au chat Add API Key et que votre projet est connecté à Supabase, il vous suffit d’indiquer dans le chat à Lovable ce dont vous avez besoin — plus besoin de créer manuellement des Payment Links.

1. Étape 1

   Préparez votre projet

   • Supabase connecté
   • Stripe Secret Key ajoutée via le formulaire intégré au chat Add API Key
   • (Facultatif) Tarifs ou IDs de produits disponibles
2. Étape 2

   Exemples :

   • Créer un paiement unique pour mon « Digital Course » à $29
   • Configurer une formule Premium annuelle à $99, liée à l’ID de chaque utilisateur
3. Étape 3

   Vérifiez et appliquez Lovable génère automatiquement la structure des Fonctions Edge, des tables de base de données et des composants d’interface (tous liés à l’id de l’utilisateur dans Supabase). Vérifiez l’aperçu, puis cliquez sur Apply pour déployer.

• Les abonnements doivent toujours être liés à l’id de l’utilisateur authentifié dans Supabase pour un accès sécurisé basé sur les rôles.

​

Intégration avancée : Webhooks & Supabase

Pour des structures de paiement complexes comme les abonnements et l’accès basé sur les rôles, Lovable recommande d’utiliser Supabase pour gérer en toute sécurité l’intégration Stripe. Cela permet une gestion correcte des webhooks, de la gestion des abonnements et du contrôle d’accès basé sur les rôles en fonction des niveaux de paiement.

La Fonction Edge qui gère les modifications nécessaires du compte utilisateur doit être configurée automatiquement par l’IA.

1. Connecter Supabase à votre projet

   C’est très simple de commencer. Lovable facilite la connexion à Supabase grâce à une intégration native :

   1. Cliquez sur le bouton Supabase dans le coin supérieur droit de Lovable.
   2. Suivez les instructions pour lier votre projet.
   3. Une fois connecté, Supabase permet le traitement sécurisé des paiements, la gestion des abonnements, la gestion des webhooks, le stockage des données clients et la gestion des erreurs.
2. Traitement sécurisé des paiements

   Lancez le processus en envoyant un Prompt à Lovable :

   Connectons Stripe à mon projet. Nous allons commencer par le traitement sécurisé des paiements.

   Lovable générera le schéma SQL nécessaire pour gérer les paiements. Cela inclut des tables de base de données pour les utilisateurs, les abonnements et les paiements. Vous pouvez examiner et personnaliser ces tables pour les adapter aux besoins spécifiques de votre produit avant d’appliquer les modifications.

3. Mettre en place des Edge Functions pour les webhooks

   Les Edge Functions dans Supabase agissent comme de petites fonctions serverless haute performance qui s’exécutent au plus près de l’utilisateur, garantissant des réponses rapides. Elles aident à traiter les événements de webhook, tels que les confirmations de paiement, avant la mise à jour de la base de données.
4. Ajouter des clés API de manière sécurisée

   Pour intégrer Stripe en toute sécurité, évitez de partager votre clé API directement dans le chat. À la place :

   
5. Tester votre intégration

   • Utilisez le mode Test de Stripe pour tester les paiements en toute sécurité.
   • Détails de carte de test :
     • Numéro de carte : 4242 4242 4242 4242
     • N’importe quelle date d’expiration future
     • N’importe quel CVC à 3 chiffres
   • Déployez votre app — l’intégration Stripe ne fonctionne pas en mode Aperçu.

​

Débogage & résolution des problèmes

Vérifier les journaux de la console

1. Étape 1

   Ouvre les Outils de développement (clic droit > Inspecter > Console dans Chrome).

2. Étape 2

   Repère les erreurs et examine les journaux d’événements de webhook.

3. Étape 3

   Copie les messages d’erreur et demande l’aide de Lovable pour le débogage.

Examiner les journaux Supabase

1. Étape 1

   Va sur le tableau de bord Supabase

2. Étape 2

   Edge Functions

3. Étape 3

   Consulte les journaux pour vérifier s’il y a des erreurs de webhook.

Vérifier les événements webhook dans Stripe

1. Étape 1

   Accède au tableau de bord Stripe

2. Étape 2

   Journaux des webhooks

3. Étape 3

   Vérifie que Stripe envoie les données correctement.

Utiliser le Chat Mode de Lovable

1. Étape 1

   Passe en chat mode et pose des questions complémentaires à Lovable.

2. Étape 2

   Pose des questions complémentaires à Lovable.

3. Étape 3

   Utilise la Rubber Duck Method : explique ton problème étape par étape pour clarifier la situation.