Wajub Components
Des packages pour navigateur qui intègrent le checkout Wajub ou permettent de composer vos propres champs de paiement.
Quatre packages npm intègrent l'interface de paiement Wajub à votre site. @wajub/js contient toutes
les fonctionnalités. Les packages React, Vue et Svelte sont de simples enveloppes. Tous les quatre
sont publiés en version 1.4.0, distribués uniquement sous forme de modules ES et chargent leur
environnement d'exécution depuis https://js.wajub.com.
Quatre façons d'encaisser un paiement
Ils se distinguent par une question : qui affiche le bouton de paiement ?
| Mode | Appel | Qui affiche le bouton de paiement | Résultat |
|---|---|---|---|
| Redirection | checkout() | Wajub | La page hébergée sur une URL Wajub |
| Intégration en ligne | mount() | Wajub | La page hébergée dans votre propre mise en page |
| Superposition | open() | Wajub | La même page dans une fenêtre modale au-dessus de votre page |
| Champs de paiement | components() | Vous | Des champs individuels que vous placez vous-même, puis confirmPayment() |
Les trois premiers modes gèrent tout le checkout, y compris les coupons, la livraison, les OTP et 3D Secure. Les champs de paiement vous laissent gérer la mise en page et confient à Wajub les parties qui doivent lui appartenir, avec les limites correspondantes.
Commencez par l'intégration en ligne
mount() garde le client sur votre page sans limiter les fonctionnalités : le checkout gère toujours
tous les moyens de paiement, toutes les vérifications et tous les cas particuliers. Passez aux champs
de paiement lorsque la mise en page constitue votre exigence principale.
Il existe cinq types de champs : card, mobileMoney, wallet, payment et address.
Une session est nécessaire avant tout
Rien ne s'affiche sans jeton de session. Vous pouvez en obtenir un de deux façons, mais elles n'offrent pas le même niveau de sécurité.
| Lieu de création | Avec | Conséquence |
|---|---|---|
| Votre serveur | Une clé secrète, sk. | Le montant est défini par du code auquel le client n'a pas accès |
| Le navigateur | Une clé publique, pk. | Un seul appel, sans backend, et le montant provient de la page |
POST /payments renvoie authorization_url, authorization_token et transaction. Le jeton est
une valeur tok_ que le navigateur utilise comme sessionId.
Une clé secrète dans un navigateur est refusée et signalée
Toute requête qui contient sk. ou sk_test. avec un en-tête Origin ou Referer reçoit une
réponse 403. Le propriétaire de la clé reçoit également une alerte par e-mail. Ce blocage est
volontaire. Utilisez pk. dans le navigateur, ou créez la session sur votre serveur et envoyez
uniquement le jeton.
Packages
Le package principal contient le chargeur et les types. Tous les autres reposent sur lui. Le
comportement de @wajub/js est décrit dans sa propre documentation.
npm install @wajub/jsUne enveloppe de framework doit être installée avec le package principal, car @wajub/js est une
dépendance homologue et non intégrée. Les trois proposent la même interface dans la syntaxe de leur
framework : un WajubProvider, un CheckoutEmbed et un composant par type de champ.
npm install @wajub/react @wajub/jsInstallation, configuration et liste des props
Sans bundler, chargez directement le script. La version ESM utilise le même environnement d'exécution avec des 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>La plus petite intégration fonctionnelle
Créez la session sur votre serveur, transmettez le jeton à la page, puis montez le checkout.
curl https://api.wajub.com/payments \
-H "Authorization: sk.kZ3qP8mWvL2xR7tB5nY4hC6dF9jS1aG0eU3i…" \
-H "Content-Type: application/json" \
-d '{"amount": 25000, "currency": "XAF", "callback": "https://shop.example.com/return"}'Envoyez authorization_token au navigateur, et rien d'autre. Le jeton est limité à ce paiement,
vous pouvez donc l'utiliser en toute sécurité dans le navigateur.
import { mount } from '@wajub/js';
await mount('#checkout', {
sessionId: authorizationToken,
onSuccess: () => (window.location.href = '/thanks'),
onError: (error) => showRetry(error),
});Les helpers importés chargent eux-mêmes l'environnement d'exécution. Si vous préférez le conserver,
loadWajub() renvoie { wajub, Wajub, WajubError }. Appelez ensuite rt.wajub.mount(…) dessus.
Tout renvoie null sur le serveur
loadWajub() et les helpers renvoient null en l'absence de window. Le rendu serveur ne génère
donc jamais d'erreur. L'importation de @wajub/js charge tout de même le script comme effet de bord.
Si cela pose problème à votre framework, importez @wajub/js/pure et chargez le script au moment voulu.
Où trouver le reste de la documentation
| Votre objectif | Documentation à lire |
|---|---|
| Voir une intégration fonctionner de bout en bout | Démarrage rapide |
| Créer et sécuriser la session | Sessions et sécurité |
| Monter, ouvrir ou rediriger avec tous les callbacks | Checkout hébergé |
| Créer votre propre mise en page autour des champs | Champs de paiement |
| Modifier les couleurs, le thème et la locale depuis la page | Apparence |
| Modifier le logo et la palette pour toutes les sessions | Image de marque et thème |
| Consulter la liste complète des méthodes et des types | Référence API |
| Utiliser les bons types | TypeScript |
| Copier une structure complète | Cas d'utilisation |
| Comprendre pourquoi rien ne s'affiche | Dépannage de Wajub Components |
Pages associées