SDK web (composant carte)

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://api.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.

Si votre compte porte plusieurs boutiques, ajoutez storeId au corps de la session, au premier niveau : la boutique est alors rattachée au paiement et restituée dans la réponse. Voir Plusieurs boutiques.

Ajoutez le script dans votre page. Il expose window.Mobupay.

<script src="https://api.mobupay.nc/sdk/v1/mobupay.js"></script>

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.

• Une carte Mobupay : un titre, les trois champs carte (numéro, expiration, cryptogramme), la mention des conditions générales, puis un pied portant le logo et « Propulsé par Mobupay ». Votre client sait ainsi qui collecte ses données de carte.
• Elle suit le mode sombre du visiteur. La bascule ne concerne que le composant : votre page garde son fond, ses couleurs et sa typographie.
• Aucun bouton. La soumission vous appartient : votre bouton, votre libellé, votre position, et card.submit() au clic.
• Sur une carte cobadgée, le réseau CB est retenu automatiquement, sans que votre client ait à choisir. card.cardNetwork() rend le réseau appliqué.
• Le personnaliser : title remplace le titre de la carte. Aucune donnée de carte ne transite par Mobupay, les champs restant dans les cadres de l'acquéreur.

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.