Ajoutez les paiements Stripe à votre app Coderblock

Ce que vous allez créer

Avec Coderblock, vous pouvez ajouter des paiements Stripe à une app existante sans avoir à écrire manuellement des endpoints de paiement, des webhooks ou du code de gestion des paiements. Il vous suffit de décrire dans le chat ce que vous souhaitez obtenir : l’agent relie le frontend, le backend, la base de données et la configuration Stripe nécessaires pour finaliser l’intégration.

Dans ce tutoriel, vous apprendrez à ajouter :

• un abonnement récurrent ;
• un paiement unique.

Vous commencerez en mode test Stripe, vérifierez l’ensemble du parcours client puis, lorsque tout fonctionnera correctement, vous passerez aux paiements réels et publierez l’app. Avant de commencer, définissez :

• ce que vos clients achèteront ;
• si le paiement sera unique ou récurrent ;
• le prix et la devise ;
• les fonctionnalités ou contenus qui seront accessibles après le paiement ;
• si vous souhaitez utiliser un compte Stripe géré par Coderblock ou votre propre compte Stripe.

---

Étape 1 : ouvrez ou créez votre app

Ouvrez le projet Coderblock auquel vous souhaitez ajouter des paiements. Si vous partez de zéro, vous pouvez décrire l’app en langage naturel ou choisir l’un des modèles de produit disponibles. Par exemple :

Crée un site sur abonnement proposant des cours de cuisine en ligne. Les visiteurs peuvent parcourir les cours, mais seuls les abonnés payants peuvent regarder les vidéos complètes.

Coderblock génère le frontend avec React, Vite, TypeScript et Tailwind, ainsi qu’un véritable backend et une base de données Postgres dédiée au projet. Pendant le développement, vous pouvez prévisualiser l’app à l’adresse <app>.coderblock.dev. Les modifications sont appliquées à mesure que vous poursuivez votre travail avec l’agent dans le chat. Si l’app nécessite des comptes clients, il est recommandé de les ajouter avant de configurer les paiements :

Ajoute l’inscription et la connexion pour les clients. Protège l’espace membre afin qu’il soit accessible uniquement aux utilisateurs authentifiés.

L’agent utilise Supabase Auth au lieu de créer une table personnalisée pour les mots de passe. Il configure également la gestion des sessions, les routes protégées et la Row Level Security de Postgres associée à chaque utilisateur authentifié.

---

Étape 2 : décrivez le modèle de paiement

Décrivez maintenant à l’agent ce que vous souhaitez vendre. Indiquez le nom du produit, le prix, la devise, la fréquence de facturation et ce qui doit se passer après le paiement.

Pour un abonnement

Vous pouvez écrire :

Ajoute un abonnement Cooking Club à 9,99 € par mois. Les clients authentifiés doivent pouvoir s’abonner depuis la page des tarifs. Après le paiement, donne-leur accès à l’espace membre protégé.

Pour un paiement unique

Ou bien :

Ajoute un paiement unique de 49 € pour le Cours avancé de pâtisserie. Après le paiement, indique que le client a accès au cours.

L’agent créera le produit et le tarif réels dans Stripe, configurera l’expérience de paiement, l’associera au client authentifié et ajoutera la logique backend nécessaire pour enregistrer le statut du paiement. Il prendra également en charge l’intégration du webhook Stripe. À ce stade, vérifiez l’aperçu en direct. Assurez-vous que :

• le nom du produit ;
• le prix ;
• la fréquence de facturation ;
• l’appel à l’action ;
• l’expérience après le paiement

correspondent à ce que vous souhaitez. Si vous voulez modifier un élément, il vous suffit de le demander dans le chat :

Remplace le texte du bouton par « Commencer mon abonnement » et affiche une courte liste des avantages au-dessus.

---

Étape 3 : choisissez comment connecter Stripe

Coderblock propose deux façons de se connecter à Stripe. L’option gérée est sélectionnée par défaut et ne nécessite aucune clé API.

Option A : utilisez un compte Stripe géré

Demandez à l’agent de poursuivre avec la configuration gérée par défaut. Il vous posera quelques questions simples, comme le pays et le nom de l’entreprise, puis créera le compte Stripe du projet. Vous n’avez pas besoin de copier de clés API ni de configurer manuellement les webhooks : Coderblock gère le webhook de paiement et connecte automatiquement le projet. Vous pourrez terminer ultérieurement la vérification d’identité et la configuration des versements grâce au lien d’onboarding Stripe fourni par l’agent. Lorsque vous serez prêt à recevoir de véritables paiements, ouvrez ce lien et renseignez les informations professionnelles demandées par Stripe.

Option B : utilisez votre propre compte Stripe

Si vous possédez déjà un compte Stripe et souhaitez le connecter au projet, écrivez :

Connecte ce projet à mon compte Stripe existant.

L’agent vous demandera STRIPE_SECRET_KEY dans un champ sécurisé réservé aux variables d’environnement. Saisissez la clé uniquement dans ce champ. Coderblock conserve les secrets dans l’espace de stockage côté serveur du projet, ce qui évite que la clé soit ajoutée au code généré ou affichée dans le chat. Après avoir reçu la clé, l’agent enregistre automatiquement le webhook nécessaire et termine l’intégration. N’ajoutez jamais manuellement de secrets aux fichiers frontend et ne demandez pas à l’app de les exposer dans le code exécuté par le navigateur.

---

Étape 4 : testez l’ensemble du parcours de paiement

Conservez l’intégration en mode test jusqu’à ce que vous ayez vérifié le bon fonctionnement de l’ensemble du parcours. Ouvrez l’aperçu en direct et testez l’expérience comme le ferait un client :

1. Créez un compte utilisateur de test ou connectez-vous avec un compte existant.
2. Ouvrez la page des tarifs ou du produit.
3. Sélectionnez le produit payant.
4. Effectuez le paiement de test Stripe.
5. Revenez dans l’app après le paiement de test.
6. Vérifiez que le contenu, la fonctionnalité ou le statut de compte approprié est bien débloqué.
7. Actualisez la page ou reconnectez-vous pour vérifier que l’accès reste actif.

Ne testez pas uniquement le parcours nominal. Essayez également avec un compte qui n’a pas effectué de paiement et vérifiez qu’il ne peut pas accéder aux fonctionnalités payantes protégées.

Vérifiez également le backend

Depuis l’onglet Backend de l’éditeur Coderblock, vous pouvez examiner :

• les tables ;
• les utilisateurs authentifiés ;
• le stockage ;
• les fonctions de l’app.

Vérifiez que les informations relatives au paiement ou à l’abonnement sont associées au bon utilisateur authentifié. La Row Level Security doit également empêcher un client de consulter ou de modifier les données privées d’un autre client. Si un élément ne fonctionne pas comme prévu, décrivez à l’agent le comportement observé au lieu d’essayer de modifier manuellement le code de paiement. Par exemple :

Le paiement aboutit, mais le tableau de bord de l’espace membre reste verrouillé. Mets à jour l’accès après la confirmation du paiement Stripe et assure-toi qu’il reste fonctionnel après une nouvelle connexion.

L’agent peut alors intervenir sur le frontend, le schéma de la base de données, les règles de sécurité et le comportement du backend.

Étape 5 : ajoutez des vues pour les clients et les administrateurs

Un bon parcours de paiement doit permettre au client de comprendre clairement le statut de son compte après le paiement. Vous pouvez, par exemple, demander à l’agent :

Ajoute à la page du compte client une section de facturation qui affiche l’offre actuelle et le statut du paiement.

Vous pouvez également créer une vue réservée aux administrateurs :

Ajoute une page d’administration protégée qui répertorie les clients, le produit choisi et le statut actuel du paiement. Seuls les utilisateurs ayant le rôle d’administrateur peuvent l’ouvrir.

Les apps Coderblock incluent déjà une table de profils et une structure de base pour les rôles. L’agent peut donc associer l’accès administrateur aux rôles authentifiés et appliquer les politiques appropriées dans la base de données.

Étape 6 : passez aux paiements réels et publiez

Après avoir vérifié le bon fonctionnement du paiement, des comptes et des routes protégées, indiquez à l’agent que vous êtes prêt à passer aux paiements réels. Avant de continuer :

• confirmez les prix définitifs ;
• vérifiez la devise ;
• contrôlez les intervalles de facturation ;
• terminez les éventuelles procédures Stripe nécessaires aux versements ;
• effectuez la vérification d’identité si elle est demandée.

Effectuez ensuite une dernière vérification de la configuration en mode live. Assurez-vous que le produit en production, le prix, la devise, l’intervalle de facturation, le comportement après le paiement et les fonctionnalités réservées sont tous correctement configurés. Lorsque tout est prêt, cliquez sur Publier. L’app sera déployée sur <app>.coderblock.app, avec SSL inclus.

Si vous préférez utiliser un domaine personnalisé, ouvrez Paramètres → Domaines. Vous pouvez connecter un domaine que vous possédez déjà en suivant la procédure DNS guidée, ou en acheter un directement dans Coderblock avec une configuration automatique du DNS et du SSL.

Un dernier test en production

Après la publication, testez de nouveau le paiement dans l’environnement de production. Le passage du mode test au mode live mérite une vérification spécifique : assurez-vous que le bon produit peut être acheté, que le paiement met correctement à jour le compte et que les contenus réservés sont accessibles uniquement aux utilisateurs autorisés. Si vous devez apporter des modifications, vous pouvez continuer à travailler dans le chat, les vérifier dans l’aperçu en direct et les publier dans une nouvelle mise à jour.

---

Checklist finale

Avant d’accepter de vrais clients, vérifiez que :

• Les noms des produits, les prix, les devises et les intervalles de facturation sont corrects.
• La connexion est obligatoire lorsque les paiements doivent être associés à un utilisateur.
• Les paiements réussis débloquent uniquement les fonctionnalités prévues.
• Les utilisateurs non payants ne peuvent pas accéder aux contenus protégés.
• Les données de paiement sont associées au bon compte.
• La Row Level Security protège les données des clients.
• Les secrets ont été fournis uniquement dans les champs sécurisés.
• L’onboarding Stripe est terminé afin de recevoir de véritables paiements.
• Le domaine de production et le parcours de retour après le paiement fonctionnent correctement.

Terminé. Votre app Coderblock dispose désormais d’un véritable parcours de paiement Stripe, relié au frontend, au backend, à l’authentification et à la base de données Postgres. Et surtout, vous pouvez continuer à le modifier simplement en décrivant dans le chat ce que vous souhaitez changer.