Branche Kauri à ton site en environ 10 minutes
Kauri te dit d’où viennent les clients qui paient : TikTok, WhatsApp, Google… Pour ça, il a besoin de deux choses : savoir qui visite ton site, et être prévenu quand KkiaPay encaisse un paiement.
À la fin de ce guide, tu verras ton paiement de test dans Kauri avec sa source. Aucun argent réel n’est utilisé.
Durée visée : environ 10 minutes. C’est un objectif, pas une promesse.
Côté paiement, il te faudra une seule ligne de code : le champ partnerId du widget KkiaPay, où tu passes le numéro du visiteur.
Sommaire
Les valeurs en majuscules sont des exemples. Connecte-toi pour un guide pré-rempli avec ta clé de site et tes URL.
Tu cherches une référence complète ? Ouvre la documentation de référence.
Ce qu’il te faut avant de commencer
Ton site est fait avec Lovable, Bolt, Vite ou en simple HTML : tu n’as rien à installer côté serveur. Il te faut une ligne de code dans le widget KkiaPay, et c’est tout.
Étape 1 · Installe la balise Kauri sur ton site (2 minutes)
Une balise est une ligne de code qui dit à ton site : « à chaque visite, préviens Kauri ». Tu la colles une seule fois.
Où la coller ? Choisis ton cas.
- Mon site est en HTML, Vite, Lovable ou Bolt : ouvre le fichier
index.htmlet colle la ligne juste avant</head>. - Mon site est en Next.js : ouvre le fichier du layout, ajoute la ligne d’import, puis le composant dans
<body>, après{children}.
<script defer src="https://kauridata.app/k.js" data-site="ks_TA_CLE_DE_SITE"></script>
import Script from "next/script";
// Dans <body>, après {children} :
<Script src="https://kauridata.app/k.js" data-site="ks_TA_CLE_DE_SITE" {...(process.env.NODE_ENV === "development" && { "data-debug": "" })} strategy="afterInteractive" />Tu codes avec un assistant IA ?
Copie ce prompt : il fait ce changement pour toi et te montre le résultat avant de l’appliquer.
Ajoute l’analytics Kauri à mon site monsaas.com.
Avant toute modification, cherche « k.js » et « data-site » dans le projet : si la balise Kauri est déjà présente, ne l’ajoute pas une seconde fois.
1. Ajoute la balise sur toutes les pages :
- Vite ou HTML statique : dans le <head> d’index.html, juste avant </head> :
<script defer src="https://kauridata.app/k.js" data-site="ks_TA_CLE_DE_SITE"></script>
- Next.js (App Router) : dans app/layout.tsx, ajoute
import Script from "next/script";
puis, dans <body>, après {children} :
<Script src="https://kauridata.app/k.js" data-site="ks_TA_CLE_DE_SITE" {...(process.env.NODE_ENV === "development" && { "data-debug": "" })} strategy="afterInteractive" />
Pour passer du local à la production sans modifier le code, lis l’origine de Kauri (https://kauridata.app) dans une variable d’environnement (NEXT_PUBLIC_KAURI_URL ou VITE_KAURI_URL) au lieu de l’écrire en dur dans src :
--- a/index.html
+++ b/index.html
@@ <head> @@
- <script defer src="<origine de Kauri>/k.js" …></script>
+ <script defer src="%VITE_KAURI_URL%/k.js" …></script>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ <body> @@
- <Script src="<origine de Kauri>/k.js" … />
+ <Script src={`${process.env.NEXT_PUBLIC_KAURI_URL}/k.js`} … />
Sans ces variables, l’app se comporte comme avant.
2. Pour que mes visites de développement arrivent (la balise ignore localhost sinon), ajoute l’attribut data-debug en développement seulement, jamais en production, et jamais d’après l’URL de Kauri :
- Next.js : c’est la partie {...(process.env.NODE_ENV === "development" && { "data-debug": "" })} de la balise ci-dessus.
- Vite : ajoute l’attribut data-debug uniquement quand le serveur de développement tourne (pas au build), par exemple avec ce plugin :
--- a/vite.config.ts
+++ b/vite.config.ts
@@ plugins @@
+ {
+ name: "kauri-debug",
+ transformIndexHtml: (html, ctx) =>
+ ctx.server ? html.replace(/<script\b(?=[^>]*\bdata-site=)/, "<script data-debug") : html,
+ },
3. Si le projet a une CSP (en-tête ou balise Content-Security-Policy), ajoute https://kauridata.app à script-src (chargement de k.js) et à connect-src (envoi des pages vues), seulement quand l’origine de Kauri est configurée :
--- a/<fichier de la CSP>
+++ b/<fichier de la CSP>
@@ Content-Security-Policy @@
- script-src 'self';
- connect-src 'self';
+ script-src 'self' https://kauridata.app;
+ connect-src 'self' https://kauridata.app;
Sans CSP, n’en crée pas.
4. Là où le widget de paiement est ouvert, passe l’identifiant visiteur dans le champ de référence (partnerId pour KkiaPay) :
partnerId: window.kauri?.visitorId?.() ?? ""
Si partnerId sert déjà à autre chose (identifiant de commande, par exemple), ne le modifie pas : mes abonnements payés doivent continuer d’être livrés. Passe à l’étape 5.
5. Chemin de secours, seulement si partnerId est déjà pris : attribue le paiement par l’API d’attribution de Kauri.
- À la création de commande, envoie l’identifiant visiteur (window.kauri?.visitorId?.() ?? null) avec la commande. Côté serveur, ne le stocke que s’il respecte /^kv_[0-9A-Za-z]{22}$/, sinon null. Un identifiant absent ou invalide ne doit jamais faire échouer la création de la commande :
--- a/<code client qui crée la commande>
+++ b/<code client qui crée la commande>
@@ corps de la requête @@
+ visitorId: window.kauri?.visitorId?.() ?? null,
--- a/<route de création de commande>
+++ b/<route de création de commande>
@@ création de commande @@
+ const kauriVisitorId = /^kv_[0-9A-Za-z]{22}$/.test(body.visitorId) ? body.visitorId : null;
await db.order.create({ data: { ...order,
+ kauriVisitorId,
} });
- Dans le webhook de paiement, après la vérification de signature (inchangée), appelle POST https://kauridata.app/api/v1/attribution avec l’en-tête authorization: Bearer <KAURI_SITE_SECRET> et le corps { visitorId, transactionId }. Appel non bloquant (after() ou équivalent), AbortSignal.timeout(3000), erreurs avalées et journalisées sans le secret. Un paiement échoué est attribué lui aussi, mais réponds 200 sans livrer : le webhook ne doit pas traiter l’échec comme une livraison, pour qu’un client qui réessaie soit encore activé :
--- a/<route du webhook de paiement>
+++ b/<route du webhook de paiement>
@@ après la vérification de signature @@
+ if (process.env.KAURI_URL && process.env.KAURI_SITE_SECRET && order?.kauriVisitorId) {
+ after(() =>
+ fetch(`${process.env.KAURI_URL}/api/v1/attribution`, {
+ method: "POST",
+ headers: { "content-type": "application/json", authorization: `Bearer ${process.env.KAURI_SITE_SECRET}` },
+ body: JSON.stringify({ visitorId: order.kauriVisitorId, transactionId }),
+ signal: AbortSignal.timeout(3000),
+ }).catch((e) => console.error("kauri attribution", e?.name)),
+ );
+ }
+ if (paiementEchoue) return new Response(null, { status: 200 }); // attribué, mais sans livrer
await fulfillOrder(order);
- Variables : KAURI_URL=https://kauridata.app, KAURI_SITE_ID=<demande-le-moi : je le copie depuis Kauri, Réglages > Agrégateur de paiement>, et KAURI_SITE_SECRET (secret serveur du site, côté serveur uniquement : jamais dans une variable NEXT_PUBLIC_ ou VITE_, jamais journalisé). Tu ne connais pas le secret : demande-moi KAURI_SITE_SECRET ; je le copie depuis Kauri (Réglages > Agrégateur de paiement) et je le mets moi-même dans le .env, sans le coller dans cette conversation. Sans ces variables, l’app se comporte comme avant.
6. Tester un paiement en local : KkiaPay ne peut pas joindre localhost. Expose ton serveur local par un tunnel (ngrok, cloudflared) pour recevoir le webhook de KkiaPay, puis fais-le suivre à Kauri en mode relais (relaie le corps brut avec l’en-tête x-kkiapay-secret) : voir « Ton webhook KkiaPay est déjà utilisé par ton serveur ? » à l’étape 3 de l’installation Kauri.
7. Ne modifie rien d’autre. Montre-moi le diff avant d’appliquer.
8. Après le déploiement, vérifie : ouvre https://monsaas.com puis exécute window.kauri.visitorId() dans la console du navigateur. Il doit renvoyer un identifiant qui commence par kv_ (null en local sans l’attribut data-debug).Comment savoir que ça marche ?
- Ouvre ton site dans ton navigateur.
- Ouvre la console : touche
F12(ou clic droit, « Inspecter »), onglet Console. - Tape
window.kauri.visitorId()puis Entrée.
Tu dois voir…
Un texte qui commence par kv_. C’est le numéro de ton visiteur : Kauri l’utilisera pour le suivre jusqu’au paiement.
Rien ne s’affiche ?
- Tu vois
nullet ton site tourne sur ton ordinateur (localhost) : c’est normal. Ajoutedata-debugà la balise pour essayer en local, en développement seulement : jamais en production. Si ton agent installe la balise avec le prompt, il le fait pour toi. - La balise ne se charge pas et ton projet a une CSP : ajoute l’origine de Kauri à
script-src(chargement dek.js) et àconnect-src(envoi des pages vues). Sans CSP, ne fais rien. - Tu vois
window.kauri is undefined(ou « n’est pas défini ») : la ligne n’est pas dans la page. Vérifie le fichier et recharge. Un bloqueur de publicité peut aussi la couper : désactive-le pour l’essai. - Tu vois
origin_mismatchdans la console du navigateur : La page n’est ni sur le domaine du site, ni sur l’un de ses sous-domaines, ni sur un domaine supplémentaire. Corrige le domaine ou ajoute ce domaine dans les Réglages. - Tu vois
unknown_site_keydans la console du navigateur : La clé data-site ne correspond à aucun site. Recopie la balise depuis Kauri, sans la modifier.
Étape 2 · Branche le webhook KkiaPay (3 minutes)
Un webhook est un message que KkiaPay envoie automatiquement à Kauri quand un paiement est fait. Sans lui, Kauri ne saurait jamais qu’un client a payé. Tu dis une fois à KkiaPay où envoyer ce message.
- Ouvre ton tableau de bord KkiaPay, en mode sandbox, puis l’onglet
Webhook. - Colle l’URL ci-dessous dans le champ d’adresse du webhook.
- Dans
Secret hash, colle le secret serveur de ton site, que tu trouves, masqué, dans les Réglages. Garde-le côté serveur : ne le mets jamais dans le code de ton site. - Coche les événements « Successful transactions » et « Failed transactions », puis enregistre.
- Envoie un test depuis KkiaPay avec le bouton d’essai de l’onglet Webhook.
https://kauridata.app/api/webhooks/kkiapay/ID_DU_SITE/sandboxTu dois voir…
Dans Kauri, ouvre les Réglages de ton site, puis le journal des webhooks : une ligne Traité apparaît pour ton test.
Rien ne s’affiche ?
- Tu vois
secret_mismatchdans le journal des webhooks (Réglages de ton site) : Le secret reçu n’est pas le secret serveur du site. Recopie-le dans le champ « Secret hash » du webhook KkiaPay, ou dans l’en-tête x-kkiapay-secret de ton relais. - Tu vois
unknown_sitedans le journal des webhooks (Réglages de ton site) : Aucun site ne correspond à cette URL. Recopie l’URL de webhook depuis Kauri. - Tu vois
env_mismatchdans le journal des webhooks (Réglages de ton site) : Le paiement ne vient pas de l’environnement de cette URL. Colle l’URL live dans KkiaPay live et l’URL sandbox dans KkiaPay sandbox.
Étape 3 · Relie ton paiement au widget (2 minutes)
Le widget KkiaPay a un champ libre, le partnerId. Tu y mets le numéro du visiteur : ainsi, quand il paie, Kauri sait d’où il vient.
Trouve l’endroit de ton site où le widget KkiaPay s’ouvre (le code qui contient openKkiapayWidget). Ajoute-y cette ligne : elle donne au widget le numéro du visiteur.
openKkiapayWidget({
amount: 15000,
key: "…",
partnerId: window.kauri?.visitorId?.() ?? "",
});Les autres lignes (amount, key…) sont les tiennes : ne les change pas. Colle le partnerId tel quel, sans rien ajouter devant. Aucun serveur n’est nécessaire.
Tu dois voir…
Rien de nouveau à l’écran : ton bouton de paiement s’ouvre comme avant. Le résultat se voit à l’étape 4, quand ton paiement de test arrive dans Kauri avec sa source.
Rien ne s’affiche ?
- Le paiement arrive dans Kauri, mais avec la source « Direct » (ou sans source) : le
partnerIdn’est pas passé au widget, ou la balise de l’étape 1 n’est pas chargée sur la page de paiement. Vérifie que la ligne est bien dans le widget qui s’ouvre. - Ton widget a déjà un
partnerIdpour autre chose : ne le remplace pas. Choisis « Avec serveur » en haut de la page : ton serveur relie le paiement lui-même. Si tu utilises le prompt, ton agent applique ce chemin de secours : il stocke le numéro du visiteur sur ta commande, puis ton webhook appelle l’API d’attribution de Kauri après le paiement. - Tu veux tester un paiement depuis ton ordinateur : KkiaPay ne peut pas joindre
localhost. Utilise un tunnel (ngrok, cloudflared) pour recevoir son webhook, puis fais-le suivre à Kauri en mode relais.
Étape 4 · Fais un paiement test en sandbox (3 minutes)
Tu paies en sandbox depuis un lien qui porte une source, et tu vois ce paiement arriver dans Kauri avec cette source. C’est ton premier succès.
Ouvre ton site avec ce lien (la source « tiktok » est dans l’adresse), puis paie avec le widget en mode sandbox.
https://monsaas.com/?utm_source=tiktok
Un lien ouvert depuis WhatsApp arrive sans source : ajoute ?utm_source=whatsapp à ceux que tu partages.
Tu dois voir…
Dans Kauri, une ligne de paiement avec la source TikTok. Si elle apparaît, la balise, le webhook et la ligne du widget travaillent ensemble.
Rien ne s’affiche ?
- Le paiement apparaît, mais sa source est « Direct » : tu as ouvert ton site sans
?utm_source=tiktok, ou une redirection l’a retiré. Rouvre le lien ci-dessus tel quel et paie à nouveau. - Aucun paiement n’apparaît dans Kauri : reviens à l’étape 2 et vérifie que le test KkiaPay donne une ligne « Traité ». Vérifie aussi que le widget utilise bien les clés sandbox.
C’est branché
Bravo : Kauri sait maintenant d’où viennent tes clients. Chaque paiement KkiaPay arrivera dans Kauri avec sa source.
Ton serveur reçoit déjà les webhooks KkiaPay ? Lis le guide Relais pour y brancher Kauri sans rien casser. Pour tous les autres cas, la documentation de référence décrit chaque détail.