Ce guide technique vous accompagne pas à pas dans l'intégration de l'API de paiement ElyonPay avec JavaScript. De l'installation du SDK à la mise en production, découvrez comment accepter les paiements Mobile Money dans 14 pays africains en quelques lignes de code.
1Pourquoi utiliser l'API ElyonPay
L'API ElyonPay permet aux développeurs d'intégrer des paiements Mobile Money et carte bancaire directement dans leurs applications web ou mobiles, sans dépendre d'une page de paiement hébergée. Cette approche offre un contrôle total sur l'expérience utilisateur, permettant de créer des parcours de paiement entièrement personnalisés qui s'intègrent naturellement dans votre interface existante.
Contrairement aux solutions de redirection qui envoient l'utilisateur vers une page externe pour effectuer le paiement, l'API ElyonPay permet de traiter l'intégralité de la transaction côté serveur. Le client reste sur votre site ou votre application pendant tout le processus, ce qui réduit considérablement les abandons de panier liés à la redirection. Les marchands utilisant l'API directe constatent en moyenne un taux de conversion supérieur de 25 % par rapport à ceux utilisant des pages de paiement hébergées.
L'API est RESTful, documentée avec OpenAPI 3.0 et disponible en environnement sandbox pour les tests. Elle supporte les paiements Mobile Money dans 14 pays africains, les paiements par carte Visa et Mastercard, ainsi que les virements bancaires locaux. Les webhooks permettent de recevoir des notifications en temps réel sur l'évolution du statut de chaque transaction.
2Installer le SDK JavaScript
Le SDK JavaScript d'ElyonPay simplifie l'intégration en encapsulant les appels API dans des méthodes intuitives et en gérant automatiquement l'authentification, la gestion des erreurs et la sérialisation des données. Le SDK est compatible avec Node.js 16+ et peut être utilisé aussi bien côté serveur (Express, Fastify, NestJS) que dans des environnements serverless (AWS Lambda, Vercel Functions).
npm install elyonpay-jsLe package pèse moins de 50 Ko minifié et n'a aucune dépendance externe, ce qui garantit un impact minimal sur la taille de votre bundle. Il est également disponible via yarn et pnpm si vous préférez ces gestionnaires de paquets. Une fois installé, vous pouvez l'importer en CommonJS ou en ESM selon votre configuration projet.
// CommonJS
const ElyonPay = require('elyonpay-js');
// ESM
import ElyonPay from 'elyonpay-js';Le SDK inclut des types TypeScript complets, offrant une autocomplétion et une vérification de types dans les IDE modernes comme VS Code. Cela facilite la découverte de l'API et réduit les erreurs d'intégration en vous avertissant dès la phase de développement si un paramètre est manquant ou invalide.
3Initialiser le client
L'initialisation du client ElyonPay nécessite votre clé API, que vous trouverez dans la section « Paramètres API » de votre tableau de bord. Vous disposez de deux clés distinctes : une clé sandbox pour les tests et une clé de production pour les transactions réelles. Ne confondez jamais les deux environnements et ne commettez jamais votre clé de production dans un dépôt de code source.
const ElyonPay = require('elyonpay-js');
const client = new ElyonPay({
apiKey: process.env.ELYONPAY_API_KEY,
environment: 'sandbox', // 'sandbox' ou 'production'
timeout: 30000, // timeout en millisecondes
retries: 2 // nombre de tentatives en cas d'échec réseau
});Le client gère automatiquement les tentatives en cas d'erreur réseau temporaire, avec un backoff exponentiel pour éviter de surcharger les serveurs. Le paramètre timeout définit le délai maximal d'attente pour chaque requête. Nous recommandons un timeout de 30 secondes pour les paiements Mobile Money, car la validation par l'utilisateur peut prendre quelques secondes.
Stockez toujours votre clé API dans une variable d'environnement et jamais en dur dans votre code source. Utilisez un fichier .env pour le développement local et les secrets de votre plateforme d'hébergement pour la production. Cette pratique est essentielle pour la sécurité de votre intégration.
4Créer un paiement
La création d'un paiement est l'opération centrale de l'API. Elle permet d'initier une transaction Mobile Money en envoyant une requête avec les informations du paiement : montant, devise, opérateur, numéro de téléphone du payeur et URL de callback pour les notifications webhook. L'API retourne immédiatement un objet de paiement avec un identifiant unique et un statut initial.
const payment = await client.payments.create({
amount: 5000,
currency: 'XOF',
provider: 'orange_money',
phone: '+2250701234567',
description: 'Commande #12345',
callback_url: 'https://yoursite.com/webhook',
metadata: {
order_id: '12345',
customer_email: 'client@example.com'
}
});
console.log(payment.id); // 'pay_xxxxxxxxxxxxxxxx'
console.log(payment.status); // 'pending'Le champ provider accepte les valeurs suivantes : mtn_momo, orange_money, wave, moov_money et airtel_money. Si vous ne connaissez pas l'opérateur du client, vous pouvez omettre ce champ et ElyonPay le déterminera automatiquement à partir du numéro de téléphone. Le champ metadata est optionnel mais fortement recommandé : il vous permet d'associer des données métier à la transaction pour faciliter la réconciliation.
Une fois la requête envoyée, le client reçoit une notification USSD ou push sur son téléphone pour valider le paiement. Le statut de la transaction passe de pending à completed ou failed selon la réponse de l'utilisateur, et vous êtes notifié via le webhook configuré.
5Gérer les webhooks
Les webhooks sont le mécanisme recommandé pour suivre l'évolution des paiements en temps réel. Lorsqu'un paiement change de statut (réussi, échoué, expiré), ElyonPay envoie une requête HTTP POST vers l'URL de callback que vous avez spécifiée lors de la création du paiement. Votre serveur doit traiter cette notification et mettre à jour le statut de la commande en conséquence.
const express = require('express');
const app = express();
app.post('/webhook', express.json(), (req, res) => {
const signature = req.headers['x-elyonpay-signature'];
const isValid = client.webhooks.verify(req.body, signature);
if (!isValid) {
return res.status(401).json({ error: 'Invalid signature' });
}
const event = req.body;
switch (event.type) {
case 'payment.completed':
// Marquer la commande comme payée
updateOrder(event.data.metadata.order_id, 'paid');
break;
case 'payment.failed':
// Notifier le client de l'échec
notifyCustomer(event.data.metadata.customer_email, 'failed');
break;
}
res.status(200).json({ received: true });
});La vérification de la signature est une étape critique de sécurité. Chaque webhook est signé avec votre clé secrète webhook (disponible dans le tableau de bord), et la méthode client.webhooks.verify() valide que la requête provient bien d'ElyonPay et n'a pas été altérée en transit. Ne traitez jamais un webhook sans vérifier sa signature.
Votre endpoint webhook doit répondre avec un code HTTP 200 dans un délai de 5 secondes. Si la réponse est différente ou si le délai est dépassé, ElyonPay considère la livraison comme échouée et réessaie jusqu'à 5 fois avec un intervalle croissant (1 min, 5 min, 30 min, 2 h, 24 h). Assurez-vous que votre traitement de webhook est idempotent pour gérer correctement les éventuelles livraisons multiples.
6Gérer les erreurs
L'API ElyonPay utilise des codes d'erreur HTTP standards combinés à des codes d'erreur spécifiques pour vous aider à identifier et traiter les problèmes efficacement. Une gestion robuste des erreurs est essentielle pour offrir une expérience utilisateur fluide, même lorsque les choses ne se passent pas comme prévu.
try {
const payment = await client.payments.create({
amount: 5000,
currency: 'XOF',
provider: 'orange_money',
phone: '+2250701234567'
});
} catch (error) {
if (error.type === 'invalid_request') {
// Paramètre manquant ou invalide
console.error('Erreur de validation:', error.message);
} else if (error.type === 'provider_error') {
// Erreur côté opérateur Mobile Money
console.error('Erreur opérateur:', error.provider_code);
} else if (error.type === 'network_error') {
// Problème de connectivité
console.error('Erreur réseau, réessayez plus tard');
} else if (error.type === 'authentication_error') {
// Clé API invalide ou expirée
console.error('Vérifiez votre clé API');
}
}Les erreurs de type provider_error méritent une attention particulière car elles proviennent directement des opérateurs Mobile Money. Les codes les plus courants sont insufficient_balance (solde insuffisant), invalid_number (numéro de téléphone invalide), user_cancelled (paiement annulé par l'utilisateur) et timeout (l'utilisateur n'a pas validé dans le délai imparti).
Pour chaque type d'erreur, adaptez le message affiché à l'utilisateur final. Un message clair et actionnable — « Votre solde Orange Money est insuffisant, veuillez recharger votre compte » — est infiniment plus utile qu'un message technique générique. Implémentez également un système de logs côté serveur pour monitorer les erreurs récurrentes et détecter les anomalies.
7Passer en production
Une fois votre intégration testée et validée en sandbox, le passage en production nécessite quelques ajustements simples mais importants. La première étape consiste à remplacer votre clé API sandbox par votre clé de production, et à mettre à jour l'URL de base de l'API. Assurez-vous que votre serveur de production utilise HTTPS pour toutes les communications avec l'API et pour la réception des webhooks.
const client = new ElyonPay({
apiKey: process.env.ELYONPAY_PRODUCTION_KEY,
environment: 'production',
timeout: 30000,
retries: 3
});
// Vérifier la connexion
const status = await client.health.check();
console.log('API Status:', status.environment); // 'production'Avant de traiter de vraies transactions, effectuez une vérification complète de votre configuration. Assurez-vous que votre endpoint webhook est accessible publiquement et répond correctement, que vos clés de production sont stockées de manière sécurisée dans des variables d'environnement, et que votre code gère correctement tous les types d'erreurs documentés. Réalisez une première transaction avec un petit montant pour valider le flux complet de bout en bout.
Checklist de mise en production : clé API de production configurée, HTTPS activé sur le serveur, webhook accessible et vérifié, gestion des erreurs implémentée, logs de monitoring en place, première transaction test réussie, équipe support informée. Une fois tous ces points validés, votre intégration est prête pour traiter des paiements réels.
ElyonPay fournit également un tableau de bord de monitoring en temps réel qui vous permet de suivre le taux de réussite des transactions, le temps de réponse de l'API et les éventuelles erreurs. Configurez des alertes pour être notifié immédiatement en cas de dégradation des performances ou d'erreurs récurrentes, afin de pouvoir réagir rapidement et maintenir une expérience optimale pour vos utilisateurs.
Conclusion
En suivant ce guide, vous avez intégré l'API ElyonPay en JavaScript de bout en bout : installation du SDK, initialisation du client, création de paiements, gestion des webhooks et traitement des erreurs. Votre application est désormais prête à accepter les paiements Mobile Money dans 14 pays africains. Consultez notre documentation complète sur docs.elyonpay.com pour découvrir les fonctionnalités avancées comme les paiements récurrents, les remboursements et les payouts.
Lancez-vous avec ElyonPay
Acceptez les paiements Mobile Money et cartes bancaires en quelques minutes.
Créer votre compte gratuit