Aller au contenu

Checkout hébergé

La page que Wajub affiche à votre client, ce qu'elle prend en charge et ce que vous contrôlez.

Le checkout hébergé est le chemin le plus court vers un paiement qui fonctionne. Vous créez le paiement, vous envoyez le client vers la page affichée par Wajub, et vous vérifiez le résultat à son retour. La liste des opérateurs, la demande de confirmation, la nouvelle tentative quand le délai est dépassé et le libellé de chaque échec sont de notre ressort, et ils continuent de s'améliorer sans que vous ayez à toucher quoi que ce soit.

Ce que voit votre client : le montant, les opérateurs disponibles dans son pays et la demande de confirmation qui attend sur son téléphone. Vous n'affichez rien de tout cela.

Cette page décrit le comportement, pas le code

Ce que fait la page hébergée, ce qu'elle décide seule et ce que vous pouvez y changer. Le code d'intégration lui-même, l'URL à construire et le composant à monter pour une redirection, une iframe intégrée ou une fenêtre superposée, se trouve dans Wajub Components → Checkout hébergé.

Créer le paiement

Tout ce dont la page a besoin vient de l'appel de création. Envoyez-le depuis votre serveur avec la clé secrète : la clé publique crée aussi des paiements, mais elle existe pour le cas où l'appel est fait depuis un navigateur.

POSThttps://api.wajub.com/payments
amountnumberobligatoire
Montant dans l'unité principale de la devise. Les décimales sont acceptées, donc 10.50 vaut dix dollars cinquante. En XAF et XOF, le paiement doit être compris entre 25 et 2 000 000.
currencystringobligatoire
Code ISO 4217 : XAF, XOF, NGN, GHS, KES et le reste de la liste prise en charge.
customerobjectfacultatif
Identité du payeur : email, phone, name, ainsi que address et metadata. Au moins un des champs customer, email, phone ou customer_id est obligatoire, et l'objet est la forme qui évolue avec vous.
descriptionstringfacultatif
Un libellé unique affiché au client sur la page. Vaut « Payment » par défaut.
itemsarrayfacultatif
Lignes de commande affichées sur la page, chacune avec un name, une description et une quantity. Elles sont affichées, jamais additionnées : amount reste le montant que vous débitez.
callbackstring (url)facultatif
Où le client est envoyé ensuite, quelle que soit l'issue : succès, échec, annulation ou expiration, distinguées par status dans les paramètres de l'URL. Doit être en HTTPS ; http://localhost et http://127.0.0.1 sont acceptés en sandbox. Toute autre adresse reçoit un 422. Si vous l'omettez, il reste sur une page de confirmation Wajub, et le webhook est alors votre seul signal.
referencestringfacultatif
Votre propre numéro de commande. Il revient à chaque lecture et dans l'URL de retour. Il n'est soumis à aucune contrainte d'unicité, ce n'est donc pas lui qui empêche un double débit.
expires.inintegerfacultatif
Durée pendant laquelle la page reste utilisable, en minutes, de 5 à 43 200. Vaut 1 440 par défaut, soit 24 heures.
bearerstringfacultatif
Qui paie les frais Wajub : merchant par défaut, ou customer, qui ajoute les frais au montant et affiche le détail sur la page.
acceptobjectfacultatif
Réduit les moyens de paiement proposés, par countries, channels, types et currencies. Si vous l'omettez, tous les moyens sur lesquels vous pouvez encaisser sont affichés. Voir [Choisir ce qu'un paiement accepte](/payments/payment-methods#choosing-what-a-payment-accepts).
metadataobjectfacultatif
Paires clé-valeur libres, renvoyées lors des lectures et dans les webhooks. Pour le retour, utilisez callback : une seule adresse pour toutes les issues.

Un appel de création qui utilise les champs propres à la page hébergée ressemble à ceci :

curl https://api.wajub.com/payments \
  -H "Authorization: sk_test.xxxxxxxxxxxxxxxx…" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 25000,
    "currency": "XAF",
    "customer": { "email": "amina@example.com", "name": "Amina N." },
    "description": "Order #4172",
    "reference": "order-4172",
    "items": [
      { "name": "Wireless earbuds", "quantity": 1 },
      { "name": "Delivery", "quantity": 1 }
    ],
    "expires": { "in": 60 },
    "callback": "https://shop.example.com/order/complete"
  }'

La réponse contient le paiement et la page vers laquelle envoyer le client. Enregistrez transaction.id avec votre commande avant de rediriger :

Réponse · 201 Created
{
"code": 201,
"status": "Created",
"message": "Payment initiated",
"authorization_url": "https://pay.wajub.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"authorization_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"transaction": {
"id": "trx_test_CSUGajfv9xh0XQ5wu2lx",
"reference": "order-4172",
"amount": 25000,
"currency": "XAF",
"status": "pending",
"sandbox": true,
"created_at": "2026-09-11T10:24:00+00:00"
}
}

authorization_url contient un jeton de session opaque, pas l'id de la transaction. Redirigez vers cette URL exactement telle qu'elle est renvoyée : ne l'analysez jamais et n'en construisez jamais une vous-même. L'hôte n'est d'ailleurs pas toujours pay.wajub.com, car un compte sur le plan Scale peut servir son checkout depuis son propre domaine vérifié.

Ce que la page décide seule

Le client voit les opérateurs qui peuvent réellement prendre son argent, pas une liste figée. Wajub filtre par devise, par environnement et par montant : un canal incapable de traiter du XAF n'est jamais proposé, plutôt que d'échouer à la dernière étape.

Le Mobile Money plafonne un débit unique à 500 000 XAF, et au même montant en XOF. En live, un paiement au-dessus est refusé et la page propose au payeur un montant plus faible ou un autre moyen de paiement. Dans la sandbox, la page le découpe en tranches successives et les encaisse l'une après l'autre. C'est la situation dans laquelle un paiement reste en partial, décrite dans le cycle de vie d'un paiement.

Pendant que la demande de l'opérateur est en cours, la page affiche l'instruction propre au canal : le code à composer de type #150# pour un opérateur, la confirmation dans l'application pour un autre. Si vous définissez bearer à customer, elle affiche aussi les frais ajoutés à votre montant et le total réellement débité.

La langue est l'anglais ou le français. Elle suit le réglage Settings → Regional → Language, qui accepte auto, en ou fr. Sur auto, la page utilise le preferred_language du client, et s'ouvre en français quand le client n'en a pas.

Gérer le retour

Une fois la tentative terminée, le client revient sur votre callback, avec le paiement identifié dans les paramètres de l'URL :

Redirection de retour
https://shop.example.com/order/complete?reference=trx_test_CSUGajfv9xh0XQ5wu2lx&status=succeeded&trxref=order-4172

reference est l'id du paiement Wajub et trxref est la reference que vous avez envoyée, présente seulement si vous en avez défini une. Les deux reviennent quelle que soit l'issue : le retour après un paiement échoué ne portait que status. status vaut succeeded, failed, cancelled ou expired. Après un succès, la page renvoie le client d'elle-même ; après un échec ou une expiration, quand il choisit de revenir. Un client qui ferme la page sans terminer ne revient jamais.

L'appel de vérification prend l'id que vous avez enregistré avant la redirection :

curl https://api.wajub.com/payments/trx_test_CSUGajfv9xh0XQ5wu2lx \
  -H "Authorization: sk_test.xxxxxxxxxxxxxxxx…"

Vérifiez le montant et la devise en plus du statut, et laissez le webhook clôturer les commandes dont le client n'est jamais revenu.

Personnaliser la page

L'apparence de la page se règle une fois pour tout le compte, dans Settings → Branding, et s'applique à chaque page de paiement que vous créerez, en sandbox comme en production.

Ce que vous réglezOù cela apparaît
Logo rectangulaire, logo carré, faviconL'en-tête de la page et l'onglet du navigateur
Couleurs principale, secondaire et d'arrière-planLes boutons, les liens et le fond de la page
Couleurs du texte et du texte des boutonsLe contraste avec votre propre palette
Couleurs de succès et d'erreurLes états de confirmation et d'échec
Police et arrondi des borduresToute la page
Mode d'apparencesystem, light ou dark
Densité et style de couvertureLa compacité de la mise en page et le cadrage de l'en-tête

L'image de marque demande un plan payant

Settings → Branding dépend de la fonctionnalité Branding, disponible à partir de Growth. Sur Pay as you go, la page de paiement garde l'apparence par défaut. Servir le checkout depuis votre propre domaine est une fonctionnalité distincte, Custom domain, disponible à partir de Scale.

Vous pouvez aussi collecter des informations que le paiement lui-même ne contient pas, une note de livraison ou un numéro de table, en ajoutant des champs dans Settings → Collect → Fields. Chaque champ a un type parmi text, textarea, select, checkbox, number, email et tel, un libellé, un placeholder facultatif et un indicateur obligatoire. Les champs apparaissent sur la page hébergée dans l'ordre où vous les disposez.

Ce que le client saisit dans ces champs n'est pas enregistré sur le paiement aujourd'hui : il ne revient ni à la lecture ni dans un webhook. Si vous avez besoin de la réponse, demandez-la sur votre propre site avant de créer le paiement, et envoyez-la dans metadata.

Que pensez-vous de ce contenu ?