Intégration Frontend

Intégrez ZYKAY avec le loader v4 (QR desktop + deep link mobile).

Installation

<script src="https://widget-app.zykay.com/v4/loader.min.js"
        data-partner-id="pk_live_xxx"
        data-success-path="/verified"></script>

Deux attributs sont obligatoires: data-partner-id et data-success-path.

Ce que fait le loader

Crée une requête de vérification (POST /api/w/verify-request)
Affiche QR code sur desktop
Ouvre l'app ZYKAY sur mobile (deep link)
Poll le statut (GET /api/w/verify-status/:requestId?pt=...)
Redirige vers data-success-path avec #grant_code=...

Attributs disponibles

Attribut	Requis	Défaut	Description
`data-partner-id`	Oui	-	Votre Partner ID (`pk_live_xxx`)
`data-success-path`	Oui	-	URL de retour après succès
`data-scopes`	Non	`isAdult`	Scopes séparés par virgules
`data-locale`	Non	`fr`	`fr` ou `en`
`data-theme`	Non	`dark`	`dark` ou `light`
`data-container`	Non	`zykay-widget`	ID d'un conteneur existant
`data-debug`	Non	`false`	Logs console
`data-client-proof-mode`	Non	`false`	Active la vérification par Portefeuille EUDI
`data-server-verify`	Non	`false`	Active le mode confirmation serveur
`data-server-verify-endpoint`	Non	-	Endpoint `GET` partenaire retournant `{"verified": true/false}`
`data-server-verify-timeout`	Non	`30`	Timeout (secondes)

Lecture du `grant_code`

Le loader utilise le fragment URL (#grant_code=...) pour éviter la fuite Referer.

<script>
(function () {
  const hash = new URLSearchParams(window.location.hash.slice(1));
  const grantCode = hash.get('grant_code');
  if (!grantCode) return;
 
  fetch('/api/zykay/exchange', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ grant_code: grantCode })
  }).then(() => {
    // Nettoie le hash après traitement
    history.replaceState({}, '', window.location.pathname + window.location.search);
  });
})();
</script>

Mode Portefeuille EUDI

Ajoutez data-client-proof-mode="true" pour activer la vérification via Portefeuille EUDI :

<script src="https://widget-app.zykay.com/v4/loader.min.js"
        data-partner-id="pk_live_xxx"
        data-success-path="/verified"
        data-scopes="isAdult,isFrench,isUnique"
        data-client-proof-mode="true"></script>

⚠️

Les scopes isMale, isFemale, revealNationality et revealBirthYear ne sont pas disponibles avec le Portefeuille EUDI. Consultez la documentation Portefeuille EUDI pour les détails.

Mode Server-Verify (optionnel)

Le mode server-verify attend une confirmation backend avant succès UI.

<script src="https://widget-app.zykay.com/v4/loader.min.js"
        data-partner-id="pk_live_a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4"
        data-success-path="/verified"
        data-server-verify="true"
        data-server-verify-endpoint="/api/zykay/server-verify"
        data-server-verify-timeout="30"></script>

Contrat complet (events, polling, timeout, endpoint attendu): → Mode Server-Verify

Exemple complet

<div id="zykay-slot"></div>
 
<script src="https://widget-app.zykay.com/v4/loader.min.js"
        data-partner-id="pk_live_a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4"
        data-success-path="/verified"
        data-scopes="isAdult,isFrench"
        data-container="zykay-slot"
        data-locale="fr"></script>

Prochaine étape

Implémentez l'échange backend du grant_code:

→ Backend (Exchange API)

Overview Server-Verify mode