Checkout iframe
Intégrer un paiement Mobile Money avec une clé publique marchand.
Le checkout eTulip affiche uniquement les opérateurs autorisés pour votre compte. Une clé publique dédiée permet de créer une session courte, sans exposer votre clé API privée.
Clé publique
et_pk_… n'autorise pas la lecture des soldes ni l'administration du compte. Configurez le domaine parent autorisé avec POST /v1/merchant/checkout-key depuis votre serveur authentifié. La réponse ne révèle la clé qu'une fois.Parcours
Configurer le domaine
Envoyez {"allowed_origin":"https://votre-site.example"} à POST /v1/merchant/checkout-key avec votre clé API privée.
Créer un intent côté serveur
Appelez POST /v1/merchant/checkout-intents avec votre clé API privée et le montant/référence de la commande. Conservez le intent_token retourné.
Ouvrir l'iframe
Chargez l'application checkout avec ?parent_origin=https%3A%2F%2Fvotre-site.example, puis attendez ETULIP_FRAME_READY.
Créer la session
Envoyez ETULIP_INIT avec public_key et intent_token. Le checkout appelle POST /v1/checkout/sessions et affiche les opérateurs disponibles.
Suivre le paiement
Après la saisie du numéro, POST /v1/checkout/checkoutpay déclenche la collecte. Le checkout interroge le statut et émet ETULIP_SUCCESS ou ETULIP_FAILURE au parent.
const origin = window.location.origin;
const frame = document.querySelector('#etulip-checkout');
frame.src = `https://checkout.etulip.example/?parent_origin=${encodeURIComponent(origin)}`;
window.addEventListener('message', (event) => {
if (event.origin !== 'https://checkout.etulip.example' || event.source !== frame.contentWindow) return;
if (event.data?.type === 'ETULIP_FRAME_READY') {
frame.contentWindow.postMessage({ type: 'ETULIP_INIT', payload: {
public_key: 'et_pk_VOTRE_CLE', intent_token: 'et_ci_JETON_SERVEUR'
}}, 'https://checkout.etulip.example');
}
if (event.data?.type === 'ETULIP_SUCCESS') console.log(event.data.payload.transaction_id);
});Vérification serveur