Widget de paiement crypto : comment l’ajouter à votre site
Guide du widget de paiement crypto : intégrez le checkout intégré de Qvard sur votre site. Création de paiements sur serveur et navigateur, vérification de la signature webhook, démo.
Un widget de paiement crypto est un widget JavaScript qui ouvre une fenêtre de paiement sur votre site. Le widget de Qvard est maintenant actif sur https://qvard.com/checkout.js. Ce guide explique comment il fonctionne et comment l’intégrer.
Qu’est-ce qu’un widget de paiement crypto
Un widget est un élément de paiement compact qu’un site intègre pour lancer un paiement. Chez Qvard, le widget ouvre la même page de paiement que vos clients voient dans une modale ou un formulaire intégré. Le client choisit l’actif et le réseau ; le montant est défini par votre commande.
Fonctionnement chez Qvard
Le widget se charge depuis https://qvard.com/checkout.js et ouvre une fenêtre de paiement en mode modal (fenêtre contextuelle) ou intégré. La fenêtre est la même page de paiement de Qvard : le client choisit l’actif et le réseau à un taux fixe pendant la durée de la facture. Une instance de widget reçoit votre clé publique (qvard_pk_…) pour la création au navigateur, ou un id de paiement pour la création au serveur. Essayez en direct sur la page de démonstration.
<script src="https://qvard.com/checkout.js"></script>
new QvardCheckout({
mode: 'modal',
publishableKey: 'qvard_pk_…',
price: 10,
onSuccess: function (e) {
console.log('paid', e.paymentId);
}
}).open();Deux façons de créer le paiement
Au navigateur : transmettez la clé publique (qvard_pk_…) et le montant au widget ; il crée le paiement et ouvre la fenêtre. Au serveur : votre backend crée le paiement via POST /api/v1/payment et transmet l’id au widget. Pour les commandes à prix fixe ou limites de stock, utilisez la création au serveur pour que le client ne puisse pas modifier le prix au navigateur. Alternativement, ignorez le widget et redirigez les clients vers la page de paiement hébergée.
L’appel depuis le backend
Votre serveur envoie l’identifiant de commande dans id et le prix en USD dans price, avec l’en-tête x-api-key. La réponse renvoie l’identifiant du paiement et le redirectUrl. Transmettez l’id au widget au navigateur, ou utilisez le redirectUrl pour une redirection. Ne renvoyez jamais la clé secrète (qvard_sk_…) au navigateur.
Vérifiez le paiement depuis le webhook
Lorsque le statut est paid, votre endpoint webhook reçoit l’id et le status, signés avec l’en-tête X-Qvard-Signature (HMAC-SHA256). Vérifiez la signature en utilisant votre clé secrète (qvard_sk_…) et assurez-vous que le montant correspond à votre commande. Marquez la commande comme payée uniquement après la vérification de la signature. Remarque : l’événement onSuccess du widget n’est pas une preuve de paiement.
Quand choisir la fenêtre intégrée
Utilisez la modale intégrée ou le formulaire intégré pour garder les clients sur votre page. La page de paiement hébergée avec redirection fonctionne aussi bien et constitue une option si vous préférez ne pas intégrer la fenêtre de paiement. Les deux approches partagent la même API et le même webhook.
FAQ
Le widget de paiement crypto de Qvard est-il disponible aujourd’hui ?
Oui. Chargez le widget depuis https://qvard.com/checkout.js et transmettez votre clé publique (qvard_pk_…) pour la création au navigateur, ou créez le paiement au serveur et transmettez l’id.
Comment ajouter le widget à mon site ?
Incluez la balise <script src="https://qvard.com/checkout.js"></script> et instanciez QvardCheckout avec votre clé, montant et mode (modal ou intégré). Voir les exemples de code dans cet article et la démo.
Le widget garde-t-il le client sur mon site ?
Oui, en mode modal ou intégré. La redirection vers la page hébergée envoie le client vers un autre site, mais il revient par un lien une fois le paiement effectué.
Comment tester le parcours ?
Créez un paiement de démo et vérifiez que votre gestionnaire de webhook reçoit la signature et le montant correspond, avant la mise en production.
