Comment intégrer Stripe à votre app Lovable
Pour intégrer Stripe à votre app Lovable : rangez vos clés d’API dans les Secrets de Lovable, créez une Edge Function Supabase qui ouvre les sessions Checkout, et traitez les webhooks qui tiennent à jour le statut des abonnements. Cette checklist reprend chaque étape, pour la stack Lovable + Supabase + Vercel précisément.
Dix ans CTO d’un SaaS à 10 M$ d’ARR à San Francisco, au service d’entreprises du Fortune 500, dans l’IA réglementée et les données personnelles. Un passé dans la cyberdéfense. Aujourd’hui CEO de BWorlds, il aide créateurs d’apps et entreprises à faire de leurs apps nées du vibe coding de vrais produits.
À corriger en priorité
6 vérificationsCompte Stripe créé et vérifié
Créez un compte sur stripe.com. Faites vérifier votre identité et ajoutez votre compte bancaire. La validation complète prend 1 à 2 jours ouvrés : commencez tôt.
Clé secrète Stripe rangée dans les Secrets de Lovable
Copiez votre clé secrète Stripe (elle commence par sk_test_ ou sk_live_) depuis le tableau de bord Stripe. Rangez-la dans les Secrets de Lovable, jamais dans le code du frontend, et n’y accédez que depuis des Edge Functions.
Clé publiable Stripe ajoutée à la configuration du frontend
La clé publiable (elle commence par pk_) peut figurer sans risque dans le code du frontend. Ajoutez-la à votre configuration d’environnement : elle sert à initialiser Stripe.js côté navigateur.
Edge Function de paiement Checkout créée
Créez une Edge Function Supabase qui ouvre une session Stripe Checkout. La fonction lit la clé secrète dans les variables d’environnement, crée la session avec vos tarifs et renvoie l’URL de la session au navigateur.
Edge Function des webhooks créée
Créez une seconde Edge Function pour traiter les webhooks de Stripe. Elle reçoit des événements comme checkout.session.completed et customer.subscription.updated, puis met à jour votre base en conséquence.
Secret de signature du webhook rangé dans les Secrets de Lovable
Copiez le secret de signature dans la configuration de votre webhook côté Stripe, et rangez-le dans les Secrets de Lovable. Il sert à vérifier que les webhooks reçus viennent bien de Stripe.
Important
4 vérificationsProduits et prix créés dans Stripe
Créez votre produit et ses tarifs dans le tableau de bord Stripe, avec des prix récurrents pour les abonnements. Copiez l’identifiant du prix (il commence par price_) : vous en aurez besoin pour créer la session Checkout.
Colonne de statut d’abonnement ajoutée à la table des utilisateurs
Ajoutez une colonne subscription_status à votre table users ou profiles dans Supabase, et mettez-la à jour à partir des événements reçus par webhook. Valeurs possibles : active, past_due, canceled, ou null (jamais abonné).
L’accès aux fonctionnalités payantes vérifie le statut d’abonnement
Ajoutez, dans les contrôles d’accès de vos routes et dans vos policies RLS, une vérification de subscription_status = active avant d’ouvrir l’accès aux fonctionnalités payantes.
Mode test vérifié de bout en bout
Faites tout le parcours avec les cartes de test de Stripe (4242 4242 4242 4242). Vérifiez que le paiement passe, que le webhook se déclenche, que la base se met à jour et que l’accès s’ouvre.
Recommandé
2 vérificationsLien vers le portail client ajouté
Ajoutez un lien vers le portail client de Stripe (Customer Portal) pour que vos utilisateurs puissent gérer leur abonnement, changer de moyen de paiement et résilier. Générez ce lien depuis une Edge Function.
Passage aux clés live
Une fois les tests faits, remplacez les clés de test par les clés live dans les Secrets de Lovable. Vérifiez que le webhook est bien configuré pour les événements du mode live, puis faites une vraie transaction pour confirmer.
Vérifier votre intégration de paiement avant la mise en ligne
- Des vérifications qui contrôlent votre intégration Stripe de bout en bout
- Une analyse de sécurité qui s’assure que vos clés d’API sont bien protégées
- Un badge public qui montre que votre app traite les paiements en toute sécurité
Questions fréquentes.
Oui, à tout moment. L’intégration passe par des Edge Functions Supabase, que vous pouvez ajouter à n’importe quel projet existant : une Edge Function pour Stripe Checkout, une autre pour les webhooks. Le reste du code de l’app ne change pas.
Aux États-Unis, Stripe prélève 2,9 % + 0,30 $ par paiement par carte réussi. Les cartes internationales coûtent 1,5 % de plus. Pas d’abonnement mensuel, pas de frais de mise en place, pas de volume minimum : vous ne payez que lorsqu’un paiement client aboutit. Stripe propose aussi des remises sur volume aux entreprises qui traitent plus de 100 000 $ par mois.
Pour la plupart des apps Lovable, Stripe classique suffit. Ne passez par Stripe Connect que si votre app est une marketplace qui doit reverser de l’argent à plusieurs vendeurs.
Stripe renvoie les webhooks en échec pendant 3 jours au maximum, en espaçant de plus en plus les tentatives. Votre Edge Function doit répondre vite avec un statut 200, et traiter l’événement en différé si nécessaire. Si votre fonction échoue systématiquement, Stripe désactive le webhook et vous prévient par e-mail.
Oui. En créant la session Stripe Checkout, ajoutez le paramètre trial_period_days à votre tarif d’abonnement. L’utilisateur enregistre sa carte au moment du paiement, mais il n’est débité qu’à la fin de l’essai. Traitez l’événement trial_end dans votre webhook pour adapter ce que voit l’utilisateur.
Les remboursements se font depuis le tableau de bord ou l’API de Stripe. Créez une Edge Function de remboursement qui appelle l’API Refunds de Stripe. Une fois le remboursement effectué, Stripe envoie un événement charge.refunded : votre webhook doit s’en servir pour mettre à jour le statut d’abonnement de l’utilisateur dans votre base.