Aller au contenu principal

Guide : Notifications de Paiement

Ce guide vous explique comment configurer les notifications push qui se déclenchent automatiquement lorsqu'un paiement est reçu via Stripe.

📋 Architecture​

Quand un client paie via Stripe :

  1. Stripe envoie un webhook à votre fonction Supabase Edge
  2. La fonction Edge met à jour la commande et envoie une notification via Firebase Cloud Messaging (FCM)
  3. L'application mobile reçoit et affiche la notification

🚀 Étape 1 : Configuration Firebase​

1.1 Créer un projet Firebase​

  1. Allez sur Firebase Console
  2. Cliquez sur "Ajouter un projet"
  3. Nommez votre projet : kazacalendar (ou autre)
  4. Acceptez les conditions et créez le projet

1.2 Ajouter l'application Android​

  1. Dans Firebase Console, cliquez sur l'icône Android
  2. Package name : com.devkazit.kazacalendar (doit correspondre à votre build.gradle.kts)
  3. Téléchargez le fichier google-services.json
  4. Placez-le dans : android/app/google-services.json

1.3 Ajouter l'application iOS​

  1. Dans Firebase Console, cliquez sur l'icône iOS
  2. Bundle ID : vérifiez dans Xcode (généralement com.devkazit.kazacalendar)
  3. Téléchargez le fichier GoogleService-Info.plist
  4. Placez-le dans : ios/Runner/GoogleService-Info.plist

1.4 Configurer Firebase pour Android​

Ajoutez dans android/build.gradle :

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.4.0'
    }
}

Ajoutez dans android/app/build.gradle.kts (à la fin du fichier) :

apply(plugin = "com.google.gms.google-services")

1.5 Récupérer la clé serveur FCM​

  1. Dans Firebase Console, allez dans Paramètres du projet (⚙️)
  2. Onglet Cloud Messaging
  3. Copiez la Server Key (commence par AAAA...)
  4. Gardez cette clé précieusement !

🗄️ Étape 2 : Configuration Supabase​

2.1 Créer la table des tokens FCM​

Exécutez ce SQL dans votre dashboard Supabase (SQL Editor) :

-- Copiez le contenu de supabase/migrations/create_fcm_tokens_table.sql

Ou utilisez la migration :

# Si vous utilisez Supabase CLI
supabase db push

2.2 Configurer les secrets Supabase​

Ajoutez la clé serveur FCM dans les secrets Supabase :

supabase secrets set FCM_SERVER_KEY=AAAA...votre_clé_serveur

Vérifiez que ces secrets sont aussi configurés :

supabase secrets list

# Vous devriez voir :
# - STRIPE_API_KEY
# - STRIPE_WEBHOOK_SECRET
# - SUPABASE_URL
# - SUPABASE_SERVICE_ROLE_KEY
# - FCM_SERVER_KEY (nouveau)

2.3 Déployer la fonction webhook mise à jour​

supabase functions deploy stripe-webhook

Vérifiez les logs :

supabase functions logs stripe-webhook --follow

📱 Étape 3 : Configuration de l'application​

3.1 Installer les dépendances​

flutter pub get

3.2 Configuration iOS supplémentaire​

Ouvrez ios/Runner.xcworkspace dans Xcode et :

  1. Activez Push Notifications dans Capabilities
  2. Activez Background Modes et cochez :
    • ✅ Remote notifications
    • ✅ Background fetch

3.3 Générer le fichier firebase_options.dart​

# Installez FlutterFire CLI si pas déjà fait
dart pub global activate flutterfire_cli

# Configurez Firebase
flutterfire configure

Sélectionnez votre projet Firebase et les plateformes (iOS, Android).

✅ Étape 4 : Test​

4.1 Test en développement​

  1. Lancez l'application :

    flutter run

  2. Vérifiez les logs pour voir le token FCM :

    📱 FCM Token: fXxxx...
    ✅ Token FCM sauvegardé pour l'utilisateur xxx

  3. Créez une commande avec paiement :

    • Créez une commande
    • Passez au statut "Payée"
    • Sélectionnez "Carte bancaire"
    • Créez et partagez le lien de paiement

  4. Effectuez un paiement test :

    • Utilisez la carte de test Stripe : 4242 4242 4242 4242
    • Date d'expiration : n'importe quelle date future
    • CVC : n'importe quel code à 3 chiffres

  5. Vérifiez la notification :

    • Vous devriez recevoir : "💰 Paiement reçu ! [Client] a réglé [Montant] EUR"

4.2 Test avec Stripe CLI​

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

# Déclencher un événement de test
stripe trigger checkout.session.completed

4.3 Vérification dans les logs​

Logs Supabase :

supabase functions logs stripe-webhook

# Vous devriez voir :
# ✅ Commande updated successfully: [id]
# ✅ Notification sent successfully for token: fXxxx...

Logs Flutter :

📬 Notification reçue en premier plan
Titre: 💰 Paiement reçu !
Corps: Jean Dupont a réglé 50.00 EUR

🔧 Dépannage​

Problème : Pas de notification reçue​

Vérifications :

  1. Token FCM sauvegardé ?

    SELECT * FROM user_fcm_tokens WHERE active = true;

  2. FCM_SERVER_KEY configuré ?

    supabase secrets list | grep FCM_SERVER_KEY

  3. Permissions accordées ?

    • Vérifiez que vous avez accepté les notifications

  4. Logs du webhook ?

    supabase functions logs stripe-webhook

Problème : Erreur "FCM_SERVER_KEY not configured"​

Solution :

# Ajoutez la clé serveur FCM
supabase secrets set FCM_SERVER_KEY=AAAA...votre_clé

# Redéployez la fonction
supabase functions deploy stripe-webhook

Problème : Token non trouvé​

Solution :

  1. Déconnectez-vous de l'app
  2. Reconnectez-vous
  3. Vérifiez les logs : ✅ Token FCM sauvegardé

Problème : Notifications sur iOS uniquement en foreground​

Solution : Vérifiez que dans Xcode :

  • Push Notifications est activé
  • Background Modes > Remote notifications est coché

📊 Monitoring​

Vérifier les tokens actifs​

SELECT
    u.email,
    t.fcm_token,
    t.platform,
    t.active,
    t.updated_at
FROM user_fcm_tokens t
JOIN auth.users u ON u.id = t.user_id
WHERE t.active = true;

Nettoyer les tokens inactifs​

SELECT cleanup_inactive_fcm_tokens();

Statistiques de notifications​

Dans Firebase Console :

  1. Allez dans Cloud Messaging
  2. Consultez les statistiques d'envoi

🎯 Personnalisation​

Modifier le message de notification​

Éditez supabase/functions/stripe-webhook/index.ts ligne 130-141 :

notification: {
    title: '💰 Nouveau paiement !', // Personnalisez ici
    body: `Vous avez reçu ${amount} ${currency} de ${clientName}`,
    sound: 'default',
    badge: '1',
}

Redéployez :

supabase functions deploy stripe-webhook

Ajouter une navigation au clic​

Éditez lib/core/services/notification_service.dart ligne 115 :

void _handleNotificationTap(RemoteMessage message) {
  final commandeId = message.data['commande_id'];
  if (commandeId != null) {
    // Naviguez vers la page de la commande
    navigatorKey.currentState?.pushNamed(
      '/commande-details',
      arguments: commandeId,
    );
  }
}

📝 Checklist complète​

  • Projet Firebase créé
  • Applications Android/iOS ajoutées à Firebase
  • Fichiers google-services.json et GoogleService-Info.plist en place
  • FCM Server Key récupérée
  • Table user_fcm_tokens créée dans Supabase
  • Secret FCM_SERVER_KEY configuré dans Supabase
  • Fonction webhook redéployée
  • firebase_options.dart généré
  • Dépendances installées (flutter pub get)
  • Permissions notifications accordées
  • Test de paiement effectué avec succès
  • Notification reçue et affichée

🎉 Félicitations !​

Votre système de notifications de paiement est maintenant opérationnel ! Chaque fois qu'un client paiera, vous recevrez une notification instantanée.

📚 Ressources​