Tous les modes d'intégration de Checkout, Disbursement et Toolbar. Chaque variante est testable en mode démo, sans inscription.
Le widget est intégré dans le flux de la page, toujours visible. Idéal pour une page de paiement dédiée. Aucun bouton déclencheur.
<kirapay-checkout
display="inline"
api-key="YOUR_API_KEY"
country="CM"
locale="fr"
></kirapay-checkout>Saisissez une clé API pour activer le widget
En mode démo, n'importe quelle chaîne fait l'affaire. Cliquez sur le bouton ci-dessous pour en générer une au hasard.
Le composant génère son propre bouton. Au clic, une modale s'ouvre. Aucun JavaScript requis.
<kirapay-checkout
display="modal"
trigger="button"
button-label="Payer maintenant"
api-key="YOUR_API_KEY"
country="CM"
locale="fr"
></kirapay-checkout>Saisissez une clé API pour activer le widget
En mode démo, n'importe quelle chaîne fait l'affaire. Cliquez sur le bouton ci-dessous pour en générer une au hasard.
Le widget glisse depuis la droite. Parfait pour une caisse ou un panneau de transfert latéral.
<kirapay-checkout
display="offcanvas"
trigger="button"
button-label="Caisse →"
api-key="YOUR_API_KEY"
country="CM"
locale="fr"
></kirapay-checkout>Saisissez une clé API pour activer le widget
En mode démo, n'importe quelle chaîne fait l'affaire. Cliquez sur le bouton ci-dessous pour en générer une au hasard.
Le widget s'intègre sans style imposé dans votre propre modal ou drawer. Vous gérez l'ouverture/fermeture en JS.
<!-- Votre conteneur -->
<div id="my-modal" class="modal-overlay">
<kirapay-checkout
display="custom"
api-key="YOUR_API_KEY"
country="CM"
></kirapay-checkout>
</div>
<button onclick="document.getElementById('my-modal').classList.add('open')">
Payer
</button>
<script>
document.addEventListener('payment-success', () => {
document.getElementById('my-modal').classList.remove('open')
})
</script>Saisissez une clé API pour activer le widget
En mode démo, n'importe quelle chaîne fait l'affaire. Cliquez sur le bouton ci-dessous pour en générer une au hasard.
L'attribut amount fixe le montant — l'utilisateur ne peut pas le modifier.
<kirapay-checkout
display="modal"
trigger="button"
button-label="Payer 5 000 XAF"
api-key="YOUR_API_KEY"
amount="5000"
country="CM"
locale="fr"
></kirapay-checkout>Saisissez une clé API pour activer le widget
En mode démo, n'importe quelle chaîne fait l'affaire. Cliquez sur le bouton ci-dessous pour en générer une au hasard.
Le payload pré-sélectionne méthode, pays, montant et infos payeur. Le widget saute à la confirmation.
<kirapay-checkout
display="modal"
trigger="button"
button-label="Payer avec MTN MoMo"
api-key="YOUR_API_KEY"
payload='{"method":"MTN-MOMO","country":"CM","amount":10000,
"payer":{"phone":"+237690000000"}}'
locale="fr"
></kirapay-checkout>Saisissez une clé API pour activer le widget
En mode démo, n'importe quelle chaîne fait l'affaire. Cliquez sur le bouton ci-dessous pour en générer une au hasard.
Aucun événement reçu pour l'instant