Connexion Stripe

Prérequis

Avant d'intégrer Stripe, assurez-vous d'avoir :

• Une application MGX fonctionnelle.
• Le projet MGX est déjà connecté à un projet Supabase. (En savoir plus sur Supabase.)
• Créé des produits et les prix correspondants dans votre dashboard Stripe.

Remarque : Le mode Preview ne peut pas être utilisé pour tester la fonctionnalité de paiement. Déployez votre app MGX et passez Stripe en mode Test pour vérifier l'intégration.

Carte de test :

• Numéro de carte : 4242 4242 4242 4242
• Date d'expiration : N'importe quelle date future
• CVC : N'importe quel numéro à 3 chiffres

Configuration du paiement Stripe

1. Connectez Supabase

   • Cliquez sur le bouton Supabase en haut à droite de MGX
   • Suivez les guides de Connexion Supabase pour sélectionner votre projet Supabase cible
   • Une fois connecté, vous pouvez configurer les paramètres de paiement via Supabase

2. Décrivez vos exigences d'abonnement en langage naturel

   • Exemple : Créez un système de paiement prenant en charge trois forfaits d'abonnement à 4,99 $ par semaine, 14,99 $ par mois et 149,99 $ par an.

   Après l'envoi, l'Agent MGX générera des boutons de configuration. Vous devrez remplir au moins deux champs.

3. Cliquez sur le bouton Add Stripe Secret Key

   

   • Saisissez votre clé secrète Stripe dans le champ STRIPE_SECRET_KEY.
   • Pour chaque forfait, saisissez son ID de prix Stripe correspondant dans le champ se terminant par PRICE_ID.

   

   Vous pouvez récupérer votre clé secrète Stripe ici : https://dashboard.stripe.com/test/apikeys

   Accédez à Product Catalog > Products, obtenez l'ID du prix à l'aide de l'une des méthodes suivantes :

   • Dans la liste "Pricing", cliquez sur le bouton “More” à droite du prix correspondant, puis cliquez sur "Copy Price ID".

   

   Vous pouvez cliquer directement sur le nom du prix pour ouvrir la page de détails, puis copier l'ID du prix affiché dans le coin supérieur droit.

   

   Enfin, collez précisément chaque ID de prix dans le champ de saisie correspondant.

   

   Remarque : Pour des raisons de confidentialité et de sécurité, ne collez jamais votre clé secrète directement dans le chat MGX. Son exposition peut permettre un accès non autorisé à votre compte Stripe. Utilisez plutôt le bouton "Add API Key" de MGX pour la stocker en toute sécurité.

4. Cliquez sur le bouton Add Stripe Webhook Secret Key

   

   • Saisissez votre clé secrète Webhook

5. Comment trouver la clé secrète Webhook :

   Dans Stripe, cliquez sur “Developers” dans le coin inférieur gauche, puis sélectionnez l'option Webhooks.

   

   Sur la page Webhooks, cliquez sur le bouton "Add destination".

   

   Sélectionnez les événements webhook correspondant aux besoins de votre projet :

   • checkout.session.async_payment_failed
   • checkout.session.async_payment_succeeded
   • checkout.session.completed
   • checkout.session.expired

   

   Après avoir cliqué sur "Continue", sélectionnez "Webhook endpoint."

   

   Saisissez l'URL de l'endpoint depuis Supabase.

   

6. Comment trouver l'URL de votre endpoint Supabase :

   Cliquez sur View Edge Function dans MGX.

   

   • Cliquez pour sélectionner l'edge function avec le suffixe _webhook correspondant.

     

   • Dans le panneau Details de l'edge function correspondante, copiez l'URL de l'Endpoint et collez-la dans la destination d'événement Stripe.

     

7. Testez votre Intégration

   Utilisez le mode Test de Stripe pour tester les paiements.

   Détails de la carte de test :

   • Numéro de carte : 4242 4242 4242 4242
   • N'importe quelle date d'expiration future
   • N'importe quel CVC à 3 chiffres

FAQ

Pourquoi ne puis-je pas tester les paiements en mode Preview ?

Le mode Preview s'exécute dans un environnement local, qui ne fournit pas d'URL Webhook accessible publiquement. Vous devez déployer votre app pour recevoir les événements Stripe.

Comment passer en mode Production ?

Vous pouvez désactiver le mode Test dans le Dashboard Stripe et utiliser votre clé secrète live ainsi que votre secret Webhook live.

Comment puis-je vérifier si un paiement de test a réussi ?

Après avoir effectué un paiement de test, accédez à la page Payments dans Stripe pour consulter les enregistrements de vos transactions de test.