Wajub Components
Des packages pour navigateur qui intègrent le checkout Wajub ou permettent de composer vos propres champs de paiement.
Wajub Components intègrent l'interface de paiement Wajub à votre site : @wajub/js sur n'importe
quelle page, et @wajub/react, @wajub/vue, @wajub/svelte et @wajub/angular dans ces
frameworks. Ils sont distribués uniquement sous forme de modules ES.
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 | À choisir lorsque |
|---|---|---|---|---|
| Redirection | checkout() | Wajub | La page hébergée sur une URL Wajub | Vous souhaitez écrire un minimum de code front-end |
| Intégration en ligne | mount() | Wajub | La page hébergée dans votre propre mise en page | Le checkout constitue la page |
| Superposition | open() | Wajub | La même page dans une fenêtre modale au-dessus de votre page | Le checkout interrompt une autre action |
| Champs de paiement | components() | Vous | Des champs individuels que vous placez vous-même, puis confirmPayment() | La mise en page elle-même est l'exigence |
Les trois premiers modes gèrent tout le checkout, y compris les OTP et 3D Secure. Les coupons et l'étape de livraison n'y sont pas disponibles. 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 sept types de champs : card, mobileMoney, wallet, bankTransfer, crypto, payment
et address. Chacun a son propre composant, de CardComponent à CryptoComponent dans React, Vue
et Svelte, de <wajub-card> à <wajub-crypto> en Angular, et ComponentEmbed, <wajub-component>
en Angular, monte n'importe lequel d'entre eux selon son type.
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. ou pk_test. | Un seul appel, sans backend, et le montant provient de la page |
POST /payments renvoie authorization_url, authorization_token et transaction. Le jeton est
ce que le navigateur utilise comme sessionId.
Une clé secrète dans un navigateur est refusée et signalée
Une clé secrète ne doit jamais être utilisée depuis un navigateur : elle est refusée avec une
réponse 403, et le propriétaire de la clé est prévenu par e-mail. Ce blocage est volontaire. Utilisez une clé publique dans le navigateur, ou créez la session sur votre serveur et
envoyez uniquement le jeton.
Packages
@wajub/js fonctionne sur n'importe quelle page, avec ou sans framework.
npm install @wajub/jsUn package de framework nécessite @wajub/js installé à côté de lui, comme dépendance homologue.
React, Vue et Svelte vous donnent un WajubProvider, un CheckoutEmbed et un composant par type de
champ. Angular vous donne provideWajub(), un service, et un composant standalone pour le checkout
et pour chaque type de champ.
npm install @wajub/react @wajub/jsInstallation, configuration et liste des props
Sans bundler, chargez directement le script, ou importez la version module.
<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_test.xxxxxxxxxxxxxxxx…" \
-H "Content-Type: application/json" \
-d '{
"amount": 25000,
"currency": "XAF",
"email": "buyer@example.com",
"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),
});Pour choisir le moment où Wajub.js se charge, appelez plutôt loadWajub() : il renvoie
{ wajub, Wajub, WajubError }, et vous appelez 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 Wajub.js comme effet de bord : pour
l'éviter, importez @wajub/js/pure et appelez loadWajub() 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 | Afficher le checkout |
| 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 du SDK |
| 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