Les secrets d'un tunnel de conversion B2B automatisé via Webhooks

#webdev #nextjs #devops #startup

Le tunnel de conversion classique a un trou : tu apprends qu'un lead a cliqué,
ou qu'une vente est passée, des heures plus tard — en consultant un tableau de
bord que tu as oublié d'ouvrir. Les webhooks ferment ce trou. Voici les trois
qui comptent, et comment les sécuriser.

Webhook 1 — le signal de clic

L'utilisateur tape sur un CTA de paiement. Avant même la redirection, le client
envoie un signal :

fetch("/api/track-click", {
  method: "POST",
  keepalive: true, // la requête survit à la navigation
  body: JSON.stringify({ offer, price }),
});
window.location.href = checkoutUrl; // redirection immédiate

keepalive est la clé : la requête part, la redirection se fait dans la
foulée, zéro friction pour l'acheteur. Côté serveur, un Route Handler pousse
un embed Discord (ou Slack). Tu es notifié en temps réel, sans dashboard.

Webhook 2 — la confirmation de paiement

Le prestataire (Stripe, Revolut…) appelle ton endpoint quand la commande est
complète. Ne fais jamais confiance au payload brut.

const raw = await request.text(); // corps BRUT, avant JSON.parse
const expected = hmacSha256(secret, `${timestamp}.${raw}`);
if (!timingSafeEqual(signature, expected)) return new Response(null, { status: 401 });

Vérifie la signature HMAC sur le corps brut, avec une fenêtre anti-rejeu (rejette
un événement daté de plus de 5 minutes). Sans ça, n'importe qui peut simuler une
vente.

Webhook 3 — la livraison

Sur order.completed, tu déclenches la livraison : génération d'un magic link
(JWT signé, expirant), envoi d'un e-mail transactionnel, ouverture d'un accès.
Tout ça sans intervention humaine.

Les deux pièges à éviter

L'idempotence. Un webhook est rejoué (timeout réseau, retry du prestataire). Déduplique sur l'order_id avant d'envoyer un e-mail ou de créer un accès — sinon le client reçoit trois fois sa commande.
Les endpoints publics. /api/track-click n'a pas de secret partagé : il est exposé. Valide strictement l'entrée (n'accepte que les couples offre/prix connus), limite le débit, et ne fais rien de coûteux si l'entrée est douteuse.

Le pattern « thin webhook »

Un endpoint de webhook a un budget de temps serré : le prestataire considère
l'appel échoué s'il n'a pas de réponse en quelques secondes, et il rejoue. La
règle : acquitter vite, traiter après. Vérifie la signature, écris
l'événement quelque part (file, log structuré), renvoie 200, et laisse le
traitement lourd (e-mail, appel API tiers) se faire hors du cycle
requête/réponse. Sur Vercel, waitUntil() prolonge la fonction après la
réponse ; sinon, une file légère fait l'affaire.

Pour le debug : tous les prestataires sérieux fournissent un rejeu manuel des
événements et un historique des tentatives. Regarde-le avant de soupçonner ton
code.

Le résultat

Un tunnel où chaque étape se déclenche toute seule : clic → notif temps réel,
paiement → livraison automatique, le tout tracé. Tu n'ouvres un outil que quand
il y a une décision humaine à prendre. Le reste tourne.

🎯 Le tunnel automatisé, packagé : l'écosystème Securium Labs

⚡ Boilerplate Next.js Ultime — 149 € — Route Handlers de tracking et de webhook (signature HMAC, idempotence) déjà en place.
🧠 Pack Prompts & Workflows IA — 39 € — les workflows de qualification et de relance qui alimentent le tunnel.
⚙️ Setup Machine B2B — 490 € — le tunnel complet déployé sur ton infrastructure, livré en 48 h.

→ www.securium-labs.app/offres

DEV Community