Mode d'intégration

Bouton intégré

Attributs requis

L'intégration déclarative est idéale pour les pages de produits, les factures et les pages CMS statiques où vous pouvez ajouter une balise de script et un balisage de bouton.

• Utilisez data-makepay-payment-link avec le paiement UID que vous souhaitez ouvrir.
• Chargez le script modal avant que le client puisse cliquer sur le bouton de paiement.
• Gardez le clavier de l'élément accessible avec un véritable élément button ou a.

<script src="https://cdn.makepay.io/modal/makepay.min.js"></script>
<button type="button" data-makepay-payment-link="YOUR_PAYMENT_UID">
  Pay with crypto
</button>

Navigateur API

Utilisez le navigateur global API lorsque votre application possède le gestionnaire de clics ou doit transmettre directement les rappels du cycle de vie.

• Ouvrez un mode de paiement avec window.makepay.showPayment(uid, { onEvent }).
• Fermez le modal actuel avec window.makepay.hide().

<script src="https://cdn.makepay.io/modal/makepay.min.js"></script>
<button type="button" id="pay-with-makepay">Pay with crypto</button>
<script>
  document.getElementById("pay-with-makepay").addEventListener("click", function () {
    window.makepay.showPayment("YOUR_PAYMENT_UID", {
      onEvent: function (event) {
        if (event.type === "makepay.payment.redirect_requested" && event.payload.redirectUrl) {
          window.location.assign(event.payload.redirectUrl);
        }
      },
    });
  });
</script>

Gestion des rappels

Transmettez un rappel onEvent lorsque votre page doit réagir aux changements de statut de checkout ou rediriger les demandes sans écouter globalement sur window.

Quand l'utiliser

Utilisez le bouton intégré lorsque le site merchant n’a pas besoin d’exécuter un JavaScript personnalisé avant d’ouvrir le checkout. Utilisez l'API du navigateur lorsque votre application contrôle le clic ou a besoin de rappels pour une ouverture précise.