Checkout intégré

Le script transforme tout élément qui porte l'URL d'un lien de paiement en checkout. Le voyageur paie sans quitter votre page. Il fonctionne sur tout site où vous pouvez ajouter une balise script, y compris les applications monopages.

Ajouter le script#

Chargez le script une fois par page, puis ajoutez un élément par checkout.

<script src="https://app.ezuspay.io/embed.v1.js"></script>

<div data-ezus-pay-url="https://app.ezuspay.io/lnk/votre-agence/8K3QZ7M2XR4T"></div>

L'URL est le checkoutUrl du lien, copié depuis l'app ou renvoyé par l'API.

Attributs#

Les éléments ajoutés après le chargement de la page sont pris en compte automatiquement. C'est utile avec React, Vue et les autres applications monopages.

Exemples#

Dans la page, en anglais, sans l'en-tête :

<div
  data-ezus-pay-url="https://app.ezuspay.io/lnk/votre-agence/8K3QZ7M2XR4T"
  data-ezus-pay-locale="en"
  data-ezus-pay-theme="minimal"
></div>

Un bouton qui ouvre une fenêtre, avec le montant lu sur le lien :

<div
  data-ezus-pay-url="https://app.ezuspay.io/lnk/votre-agence/8K3QZ7M2XR4T"
  data-ezus-pay-mode="modal"
  data-ezus-pay-label="Payer mon voyage"
  data-ezus-pay-amount="auto"
  data-ezus-pay-color="#D9007A"
  data-ezus-pay-locale="fr"
></div>

La fenêtre se ferme avec son bouton ×, la touche Échap, un clic à l'extérieur, ou toute seule 2,5 secondes après un paiement réussi.

Écouter le paiement#

Après un paiement par carte réussi, le script déclenche un événement ezus-pay:success sur votre élément. Il remonte dans la page, donc un seul écouteur sur document couvre tous les checkouts.

<script>
  document.addEventListener("ezus-pay:success", (event) => {
    // event.target : votre élément
    // event.detail : { type: "ezus-pay:success", amountCents: 144000 }
    window.location.href = "/merci";
  });
</script>

Ezus Pay ne redirige jamais votre page. Pour envoyer le voyageur ailleurs après le paiement, faites-le depuis cet écouteur.

Content Security Policy#

Si votre site envoie un en-tête CSP, autorisez l'app Ezus Pay :

script-src  https://app.ezuspay.io;
frame-src   https://app.ezuspay.io;
connect-src https://app.ezuspay.io;

connect-src n'est nécessaire que pour data-ezus-pay-amount="auto".

Sans le script#

Vous pouvez placer l'iframe vous-même. Remplacez /lnk/ par /embed/ dans l'URL du lien, et gérez la hauteur à partir des messages envoyés par le checkout.

<iframe id="ezpay" src="https://app.ezuspay.io/embed/votre-agence/8K3QZ7M2XR4T?locale=fr&theme=minimal"
        allow="payment" style="width:100%;border:0" height="600"></iframe>
<script>
  const frame = document.getElementById("ezpay");
  window.addEventListener("message", (e) => {
    if (e.source !== frame.contentWindow || e.origin !== "https://app.ezuspay.io") return;
    if (e.data?.type === "ezus-pay:resize") frame.style.height = e.data.height + "px";
    if (e.data?.type === "ezus-pay:success") { /* paiement confirmé dans le navigateur */ }
  });
</script>

Bon à savoir#

• Tout site peut intégrer un checkout. Il n'y a pas de liste de domaines à tenir.
• Langues. Dans un checkout intégré, la langue vient de data-ezus-pay-locale. Renseignez-le : il n'y a pas de menu de langue dans l'intégration.
• Plans de paiement. Pour une échéance, amountCents est le montant de cette échéance.
• Mode test. Créez un lien en mode test et collez son URL. Le même script sert les liens réels et les liens de test. Le checkout affiche un badge Test, sauf avec theme="minimal".
• Wallets. Apple Pay et Google Pay dépendent de l'appareil et du navigateur. Vérifiez-les sur votre propre site avant de les annoncer.