Checkout crypto intégré : une fenêtre de paiement sur votre site
Checkout crypto intégré : intégrez une fenêtre modal ou un formulaire intégré en direct via JavaScript. Création de paiements sur serveur et navigateur, vérification webhook, démo.
Le checkout crypto intégré signifie que la fenêtre de paiement s’ouvre directement sur votre page via un widget JavaScript. Il peut s’agir d’une modale (fenêtre flottante) ou d’un formulaire intégré. Qvard fournit un widget prêt pour la production à https://qvard.com/checkout.js. Ce guide explique comment il fonctionne et comment l’intégrer.
Ce qu’est un checkout intégré
Un checkout intégré est une fenêtre de paiement, généralement une modale, qui s’ouvre au-dessus de la page sur laquelle se trouve déjà le client. Le client garde le contexte de la boutique et paie sans quitter le site. La logique de paiement reste la même que sur une page hébergée.
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, et le montant est fixé par votre commande. 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 sur qvard.com.
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.
<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();x-api-key: qvard_sk_…
{
"id": "order_1024",
"price": 149.99,
"paymentSystemId": 12
}
// 201 Created
{
"data": {
"id": "8f3k2a1c",
"redirectUrl": "https://my.qvard.com/pay/8f3k2a1c"
},
"code": 201,
"message": "success",
"status": true
}Au serveur : créez le paiement d’abord
Votre serveur envoie l’identifiant de commande et le prix en USD 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 hébergée. Gardez la clé sur le serveur, car la requête ne doit pas partir du 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.
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 checkout crypto intégré est-il disponible chez Qvard 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.
La signature de paiement est-elle importante ?
Oui. Vérifiez toujours l’en-tête X-Qvard-Signature dans votre webhook en utilisant votre clé secrète, et assurez-vous que le montant dans le webhook correspond à votre commande.
Puis-je utiliser la redirection au lieu de la fenêtre intégrée ?
Oui. La page de paiement hébergée au redirectUrl fonctionne aussi bien et ne nécessite pas de widget. Les deux approches utilisent la même API et le même webhook.
