Aller au contenu principal

Configuration du Webhook Stripe

🎯 Objectif​

Configurer le webhook Stripe pour confirmer automatiquement les paiements et mettre à jour le statut des commandes dans votre base de données.

📋 Prérequis​

  1. Supabase CLI installé : npm install -g supabase
  2. Projet Supabase initialisé : supabase init
  3. Connecté à Supabase : supabase login
  4. Clés Stripe configurées dans stripe_config.dart

🚀 Déploiement du Webhook​

Étape 1 : Déployer la Fonction​

# Utiliser le script de déploiement
./deploy_webhook_improved.sh

# Ou manuellement
supabase functions deploy stripe-webhook

Étape 2 : Récupérer l'URL du Webhook​

# Lister les fonctions déployées
supabase functions list

# L'URL sera quelque chose comme :
# https://[votre-projet-id].supabase.co/functions/v1/stripe-webhook

🔧 Configuration dans Stripe​

Étape 1 : Accéder aux Webhooks​

  1. Allez sur dashboard.stripe.com
  2. Cliquez sur "Developers" dans le menu
  3. Cliquez sur "Webhooks"
  4. Cliquez sur "Add endpoint"

Étape 2 : Configurer l'Endpoint​

  1. URL du webhook : https://[votre-projet-id].supabase.co/functions/v1/stripe-webhook
  2. Description : "Kazalendar - Confirmation des paiements"
  3. Événements à écouter :
    • ✅ checkout.session.completed
    • ✅ payment_intent.succeeded

Étape 3 : Récupérer la Clé Secrète​

  1. Après avoir créé le webhook, cliquez dessus
  2. Copiez la "Signing secret" (commence par whsec_...)
  3. Gardez cette clé précieusement !

🔐 Configuration des Variables d'Environnement​

Étape 1 : Ajouter les Variables dans Supabase​

# Ajouter la clé secrète du webhook
supabase secrets set STRIPE_WEBHOOK_SECRET=whsec_...

# Ajouter l'URL de votre projet Supabase
supabase secrets set SUPABASE_URL=https://[votre-projet-id].supabase.co

# Ajouter la clé de service Supabase
supabase secrets set SUPABASE_SERVICE_ROLE_KEY=eyJ...

Étape 2 : Vérifier les Variables​

# Lister les secrets configurés
supabase secrets list

🧪 Test du Webhook​

Étape 1 : Tester avec Stripe CLI (Recommandé)​

# Installer Stripe CLI
# macOS
brew install stripe/stripe-cli/stripe

# Se connecter
stripe login

# Écouter les webhooks en local
stripe listen --forward-to https://[votre-projet-id].supabase.co/functions/v1/stripe-webhook

Étape 2 : Tester avec l'Application​

  1. Créez une commande avec un prix
  2. Passez au statut "Payée"
  3. Sélectionnez "Carte bancaire"
  4. Cliquez sur "Créer et partager"
  5. Utilisez la carte de test : 4242 4242 4242 4242

Étape 3 : Vérifier les Logs​

# Voir les logs de la fonction
supabase functions logs stripe-webhook

# Vous devriez voir :
# Processing checkout.session.completed: cs_test_...
# Payment confirmed successfully for session: cs_test_...
# Commande updated: [commande-id]

🔍 Vérification du Fonctionnement​

Dans l'Application​

  1. La commande devrait passer automatiquement au statut "Payée"
  2. Le champ payment_confirmed devrait être true
  3. La date de paiement devrait être mise à jour

Dans la Base de Données​

-- Vérifier les liens de paiement
SELECT * FROM payment_links WHERE is_paid = true;

-- Vérifier les commandes payées
SELECT * FROM commandes WHERE payment_confirmed = true;

🚨 Dépannage​

Problème : Webhook non reçu​

Vérifications :

  1. L'URL du webhook est correcte
  2. Les événements sont bien sélectionnés
  3. Le webhook est actif dans Stripe

Solution :

# Vérifier les logs
supabase functions logs stripe-webhook

# Redéployer si nécessaire
supabase functions deploy stripe-webhook

Problème : Erreur 404 - Payment link not found​

Cause : Le lien de paiement n'existe pas en base

Solution :

  1. Vérifier que le lien est bien créé avant le paiement
  2. Vérifier que l'ID de session correspond

Problème : Erreur 500 - Database error​

Cause : Problème de permissions ou de structure de base

Solution :

  1. Vérifier les RLS policies
  2. Vérifier que la clé de service a les bonnes permissions
  3. Vérifier la structure des tables

📊 Événements Gérés​

checkout.session.completed​

  • Déclencheur : Session de paiement terminée avec succès
  • Action : Met à jour le statut de la commande
  • Champs mis à jour :
    • payment_links.is_paid = true
    • payment_links.paid_at = now()
    • commandes.status = 'paid'
    • commandes.payment_confirmed = true

payment_intent.succeeded (Fallback)​

  • Déclencheur : Paiement confirmé (fallback)
  • Action : Même traitement que checkout.session.completed

🔒 Sécurité​

Vérification de la Signature (Production)​

Pour la production, ajoutez la vérification de signature :

// Dans index.ts
import { createHmac } from 'https://deno.land/std@0.168.0/crypto/mod.ts'

const webhookSecret = Deno.env.get('STRIPE_WEBHOOK_SECRET')
const signature = req.headers.get('stripe-signature')

// Vérifier la signature
const expectedSignature = createHmac('sha256', webhookSecret)
  .update(body)
  .digest('hex')

if (signature !== expectedSignature) {
  return new Response('Invalid signature', { status: 400 })
}

📈 Monitoring​

Logs Supabase​

# Voir les logs en temps réel
supabase functions logs stripe-webhook --follow

# Voir les logs d'une période spécifique
supabase functions logs stripe-webhook --since 1h

Dashboard Stripe​

  1. Allez sur "Webhooks" dans Stripe
  2. Cliquez sur votre webhook
  3. Vérifiez les "Recent deliveries"
  4. Regardez les codes de statut (200 = succès)

✅ Checklist de Configuration​

  • Fonction webhook déployée
  • URL du webhook récupérée
  • Webhook configuré dans Stripe
  • Événements sélectionnés
  • Clé secrète récupérée
  • Variables d'environnement configurées
  • Test avec carte de test réussi
  • Vérification des logs
  • Commande mise à jour automatiquement

Une fois toutes ces étapes terminées, votre système de paiement sera entièrement automatisé ! 🎉