Intégrer le paiement sur votre site web
Ouvrir le paiement dans une fenêtre modale, l'intégrer dans une page ou envoyer le client vers une page de paiement dédiée. Le widget utilise une URL de paiement publique et n'a jamais besoin de clé API marchande dans le navigateur.
Sur cette page
De la facture au paiement#
Créez une facture dans /account#links et recevez immédiatement le checkoutUrl. Ouvrez /account#widget, collez le lien et choisissez une modale, un bloc en ligne ou une redirection. Les clés et les webhooks sont disponibles dans les sections de compte voisines.
L'aperçu du constructeur utilise toujours une commande de démonstration sans facturation. Le code du widget généré conserve votre lien en direct, dont les conditions proviennent de la facture serveur enregistrée.
Pour une nouvelle facture dans l'interface, USD propose les cartes et Alipay ; RUB propose SBP ; USDT propose la crypto. L'API peut également enregistrer USD + crypto pour compatibilité, mais son paiement crypto en direct est bloqué avec crypto_requires_usdt. USD et USDT sont distincts, sans conversion automatique ni taux de 1:1 supposé. Un paiement crypto nécessite une facture USDT séparée.
Un bouton avec un repli sur lien normal#
Cet exemple ouvre une démonstration sans facturer d'argent. Remplacez les deux valeurs d'URL par checkoutUrl provenant de votre réponse de facture. Chargez le script depuis la même origine Kevmi que l'URL de paiement.
Le href ouvre le paiement lorsque JavaScript est indisponible. data-kevmi-label donne à l'iframe un nom accessible. Incluez le script une fois par page.
<script src="https://kevmi.maxeevmax1.chatgpt.site/widgets/kevmi.js" defer></script>
<a href="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
data-kevmi-checkout="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
data-kevmi-mode="modal"
data-kevmi-label="Order checkout">Pay securely</a>Trois façons d'ouvrir le paiement#
Utilisez un conteneur tel que div pour le mode en ligne et remplacez CHECKOUT_URL_FROM_API par une URL réelle. Le cadre s'adapte à la largeur de son conteneur ; les messages de paiement peuvent redimensionner sa hauteur dans une plage limitée.
La modale se ferme avec son bouton, la touche Échap ou un clic sur l'arrière-plan. Le focus revient au déclencheur d'origine après la fermeture. Les paramètres de mouvement réduit raccourcissent la transition.
| data-kevmi-mode | Comportement | Utile pour |
|---|---|---|
| modale | Une boîte de dialogue superposée ; le mode par défaut | Un bouton de paiement au niveau de la commande |
| en ligne | Une iframe à l'intérieur du conteneur sélectionné | Une étape de paiement sur votre site |
| redirection | Navigation vers Kevmi dans l'onglet actuel | Une page de paiement complète |
<div data-kevmi-checkout="CHECKOUT_URL_FROM_API"
data-kevmi-mode="inline"
data-kevmi-label="Order checkout"></div>Ouvrir le paiement depuis votre interface#
Les événements de document kevmi:opened et kevmi:closed permettent à votre interface de réagir à l'ouverture et à la fermeture. Un événement kevmi:error sur le déclencheur signale une URL de paiement invalide. Aucun d'eux ne prouve un paiement. Appelez l'API JavaScript après le chargement du script du widget.
window.Kevmi.open(checkoutUrl, {
mode: 'modal',
label: 'Order checkout',
closeLabel: 'Close checkout'
});
// Inline blocks added after page load are detected automatically.
// You may also request mounting explicitly:
window.Kevmi.mount(document);Ce qui prouve un paiement réussi#
Ne mettez pas de clés API ni de secrets de signature dans le HTML. Le widget ne reçoit qu'un lien public vers une facture. Le paiement chiffre les détails de carte et les codes bancaires avec la clé de passerelle ; le serveur Kevmi ne les accepte pas en texte clair.
postMessage met à jour l'état de l'interface, pas l'exécution de la commande. Vérifiez l'origine du message et la fenêtre source avant le traitement. Utilisez un événement vérifié payment.succeeded ou un statut succeeded dans le résumé GET link.payment du serveur pour le résultat final.
Avant d'ajouter le widget en production#
- Autorisez l'origine Kevmi dans vos directives Content Security Policy script-src et frame-src sans élargir des politiques non liées.
- Vérifiez les écrans étroits, l'accès au clavier et les thèmes clair et sombre.
- Confirmez que la facture est active, non expirée et a le bon prix et les bonnes parts de coût.
- Conservez un lien de paiement ordinaire comme repli.
- Testez les livraisons échouées et les événements de webhook en double sans émettre une commande deux fois.