Wajub.js

@wajub/js place le checkout et les champs de paiement Wajub sur n'importe quelle page. Cette page présente son installation, la Content Security Policy qu'il demande et les trois façons de l'appeler.

Aucun build hors ligne

Que vous installiez le package npm ou utilisiez la balise script, Wajub.js se charge depuis https://js.wajub.com. Il n'existe aucun build hors ligne ni auto-hébergé : un navigateur qui ne peut pas accéder à js.wajub.com ne dispose d'aucun checkout. Prenez cette origine en compte comme vous le faites pour l'API.

Content Security Policy

Une page qui applique une Content-Security-Policy stricte doit autoriser ces hôtes. Sans eux, le navigateur bloque le checkout et signale la violation dans la console.

script-src https://js.wajub.com;
frame-src https://pay.wajub.com;
connect-src https://pay.wajub.com https://api.wajub.com;
img-src https://pay.wajub.com;

Si vous servez le checkout depuis votre propre domaine vérifié, utilisez cet hôte partout où pay.wajub.com apparaît. La page du checkout définit elle-même sa politique ; la vôtre ne régit que la page qui l'entoure.

Un champ de paiement dont le paiement se poursuit sur la page du prestataire, un paiement en crypto par exemple, y emmène toute votre page, parfois avec un formulaire envoyé en POST. Si votre politique définit form-action, elle doit autoriser cet envoi.

Un champ de paiement avec loader: 'skeleton' ajoute un élément <style> pour sa pulsation, avec le nonce des scripts ou styles en ligne de votre page. Un style-src qui n'a ni ce nonce ni 'unsafe-inline' arrête seulement la pulsation : le squelette s'affiche toujours.

Trois points d'entrée

Ils fournissent la même API. Choisissez selon le moment où Wajub.js doit se charger et selon que vous utilisez un bundler ou non.

Installez le package avec votre gestionnaire habituel. Il est uniquement distribué comme module ES. Un appel CommonJS require() ne peut donc pas le résoudre.

npm install @wajub/js

Sans bundler, la balise script ajoute wajub, Wajub et WajubError à window. Le module .mjs fournit les mêmes objets en exports nommés.

<script src="https://js.wajub.com"></script>

<!-- or, as a module -->
<script type="module">
  import { mount } from 'https://js.wajub.com/wajub.mjs';
</script>

Trois façons d'appeler la même API

Chaque méthode ci-dessous existe sous les trois formes. Choisissez-en une par projet et conservez-la. Leur mélange rend l'ordre de chargement difficile à comprendre.

Les helpers nommés constituent la solution la plus courte, sans étape de chargement à écrire.

import { mount, open, checkout, fetchSession, confirmPayment } from '@wajub/js';

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

loadWajub() vous remet plutôt l'environnement d'exécution, chargé au moment que vous choisissez. Il renvoie null en l'absence de window, ce qui sécurise le rendu serveur.

import { loadWajub } from '@wajub/js/pure';

const rt = await loadWajub();
if (rt) {
  const instance = await rt.wajub.mount('#checkout', { sessionId });
}

Depuis le CDN, les mêmes objets se trouvent sur window et rien ne doit être attendu.

const instance = await wajub.mount('#checkout', { sessionId });

Éléments exportés par le package

Chaque export, avec ce qu'il renvoie, est listé dans la Référence du SDK.

Retenez surtout preload() : appelez cette fonction lorsque le client atteint le panier, et le checkout s'ouvre plus vite au moment du paiement.

Le client Wajub()

Les méthodes de l'environnement d'exécution nécessitent un sessionId à chaque appel. Le client le conserve plutôt une seule fois. Il constitue aussi le seul moyen de créer un paiement depuis le navigateur. Wajub() accepte une clé publique, de sandbox ou live, un jeton de session, ou les deux.

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

const client = Wajub.session(sessionId);

const client = Wajub({ publishableKey: 'pk_test.xxxxxxxxxxxxxxxx…', sessionId });

initCheckout couvre tout le flux sans backend. Il nécessite une clé publique, car la page définit le montant.

await Wajub('pk_test.xxxxxxxxxxxxxxxx…').initCheckout({
  mode: 'inline',
  container: '#checkout',
  payment: { amount: 35000, currency: 'XOF', customer: { email: 'buyer@example.com' } },
  onSuccess: (transaction) => console.log('paid', transaction),
});

Sur le serveur

loadWajub() et chaque helper renvoient null en l'absence de window. Le rendu serveur ne génère donc jamais d'erreur. La différence concerne l'importation : @wajub/js charge Wajub.js dès son importation, @wajub/js/pure seulement quand vous appelez loadWajub().

import { loadWajub } from '@wajub/js/pure';

payButton.addEventListener('click', async () => {
  const rt = await loadWajub();
  await rt?.wajub.open({ sessionId });
});

Avec un package de framework, vous n'avez rien à faire : ce point ne compte que si vous intégrez vous-même @wajub/js.

Où chaque sujet est documenté

Cette page se limite au package. Chaque sujet possède sa propre page.