SDK web (composant carte)
Intégrez la saisie de carte directement dans votre page, sans redirection.
Le SDK web Mobupay charge un composant unique dans votre page : les trois champs carte (numéro, expiration, cryptogramme) et les liens vers les conditions Mobupay. Vous fournissez votre propre bouton et déclenchez la soumission via le SDK. Le même composant sert à encaisser un paiement ou à enregistrer une carte (portefeuille client) : le comportement est déterminé par la session que vous créez côté serveur.
Les champs carte sont rendus dans des iframes sécurisées de notre acquéreur. Aucune donnée carte ne transite par votre serveur ni par Mobupay : vous restez hors du périmètre PCI DSS.
Créer une session côté serveur
Avec votre clé secrète (jamais exposée au navigateur), créez une session et récupérez son identifiant. Pour un paiement :
curl -X POST https://staging.mobupay.nc/api/v1/payments/sessions \
-H "Authorization: Bearer sk_test_VOTRE_CLE" \
-H "Content-Type: application/json" \
-d '{
"order": { "amount": 3000, "currency": "EUR", "reference": "CMD-001" },
"redirectUrl": "https://votre-site.nc/retour",
"notificationUrl": "https://votre-site.nc/webhook"
}'La réponse contient un sessionId (préfixe ses_). Transmettez-le à votre page. Pour une tokénisation de carte (ajout au portefeuille d'un client), créez une session wallet client (voir Créer une session wallet) et utilisez son token de la même manière.
Charger le SDK
Ajoutez le script dans votre page. Il expose window.Mobupay.
<script src="https://staging.mobupay.nc/sdk/v1/mobupay.js"></script>Monter le composant et câbler votre bouton
Indiquez un conteneur (où s'affichent les champs) et votre propre bouton. Mobupay.mount renvoie un contrôleur dont vous appelez submit() au clic.
<div id="carte"></div>
<button id="payer" disabled>Chargement…</button>
<script>
(async function () {
const card = await Mobupay.mount({
session: "ses_xxxxxxxx", // créé à l'étape 1
container: "#carte",
onReady: (info) => { document.getElementById("payer").disabled = false; },
onError: (err) => { console.error(err.message); },
onSuccess: () => { /* paiement soumis */ },
});
// card.intent : "payment" | "tokenization"
// card.amount : montant en centimes (mode paiement)
document.getElementById("payer").onclick = () => card.submit();
})();
</script>Le composant applique automatiquement la charte de votre marchand(couleurs définies dans votre espace) ou le thème Mobupay par défaut. Le style est limité au composant et ne modifie pas le reste de votre page.
Récupérer le résultat
Après validation (et authentification 3-D Secure le cas échéant), le client est redirigé vers le redirectUrl de la session, et Mobupay envoie un webhook signé à votre notificationUrl. Le webhook est la source de vérité du statut : voir le guide Webhooks.
Origines à autoriser
Si votre site applique une politique de sécurité de contenu (CSP), autorisez les domaines Mobupay et ceux de l'acquéreur (chargement du script, des iframes et des appels) :
script-src https://staging.mobupay.nc https://*.payline.com
style-src https://staging.mobupay.nc https://*.payline.com 'unsafe-inline'
font-src https://staging.mobupay.nc https://*.payline.com https://maxcdn.bootstrapcdn.com
frame-src https://*.payline.com https://*.monext.com
connect-src https://staging.mobupay.nc https://*.payline.com
img-src https://staging.mobupay.nc data:Les appels depuis votre page sont autorisés pour toute origine (le composant et les routes de session acceptent les requêtes cross-origine) : aucune déclaration de domaine n'est requise. Servez simplement votre page en HTTPS. Le token de session, à durée de vie courte, authentifie chaque appel.