Sessions et sécurité

Toutes les fonctionnalités Wajub côté navigateur reposent sur une chaîne à courte durée de vie : le jeton de session. Cette page explique son origine, ce qu'il remplace et pourquoi la clé qui le crée ne doit jamais quitter votre serveur.

Trois identifiants, trois emplacements

Une clé Wajub se compose d'un préfixe, d'un point, puis de 96 caractères. Le préfixe indique à lui seul où la clé peut être utilisée.

Grâce au jeton de session, les deux autres clés sont inutiles dans le navigateur. Il est limité à un seul paiement, ne donne aucun accès au compte et expire avec ce paiement.

Le flux correct

Respectez toujours ces deux étapes dans cet ordre.

1. Votre serveur appelle POST /payments avec la clé secrète et reçoit un authorization_token.
2. Votre navigateur reçoit uniquement ce jeton et le transmet comme sessionId.

curl https://api.wajub.com/payments \
-H "Authorization: sk_test.kZ3qP8mWvL2xR7tB5nY4hC6dF9jS1aG0eU3i…" \
-H "Content-Type: application/json" \
-d '{
  "amount": 35000,
  "currency": "XOF",
  "reference": "ORDER-123",
  "customer": { "email": "buyer@example.com" }
}'

La réponse contient trois éléments à conserver.

const { sessionId } = await fetch('/api/checkout/session', { method: 'POST' })
  .then((r) => r.json());

await mount('#checkout', { sessionId });

Créer une session depuis le navigateur

Wajub(publishableKey).createPayment() existe et fonctionne. Cet outil convient à un prototype ou à une page de démonstration dont le prix est fixe. Il ne convient pas à une boutique, car le montant serait alors défini par du code que le client contrôle.

const client = Wajub('pk_test.mT9xW2kQ7vB4nL6hR1cY8dF3jS5aG0eU2pA…');

const { sessionId } = await client.createPayment({
  amount: 35000,
  currency: 'XOF',
  customer: { email: 'buyer@example.com' },
});

await client.mount('#checkout');

Ce que le jeton permet de faire

Le jeton de session autorise exactement un paiement. L'environnement d'exécution applique cette limite.

• Il monte le checkout, ouvre la superposition ou pilote les composants de champs.
• Il lit l'aperçu de la session avec fetchSession(sessionId). Le même jeton sert d'identifiant bearer auprès de l'origine du checkout.
• Il reste valide tant que le paiement n'a pas atteint un état final, puis expire peu après succeeded, failed, expired ou cancelled.
• Il reste valide après un nouveau montage. Un composant démonté puis remonté réutilise donc le même jeton.

Un jeton arrivé à son état final déclenche onLoadError au lieu d'afficher une intégration vide. Configurez donc ce callback, même sur une page où vous pensez que ce cas ne peut pas se produire.

L'URL de callback

callback est une destination de redirection. Elle ne concerne donc que le flux avec redirection. Transmettez une URL HTTPS de base sans vos propres paramètres d'URL. Wajub ajoute les siens.

https://shop.example.com/order/complete?status=complete&reference=trx_CSUGajfv9xh0XQ5wu2lx&trxref=ORDER-123

Une intégration ne quitte jamais votre page, callback n'y a donc aucun effet. Utilisez onSuccess pour l'interface et le webhook comme source fiable.

Boutiques sur plusieurs domaines

Le SDK envoie l'origine de la page actuelle au checkout. Un domaine unique ne demande donc aucune configuration. Si votre checkout s'exécute sur un second domaine, indiquez explicitement le domaine canonique.

await mount('#checkout', { sessionId, embedOrigin: 'https://shop.example.com' });

const factory = await components(sessionId, {
  componentOrigin: 'https://shop.example.com',
});

Avant de passer en live