Comment ajouter un bouton de paiement crypto ou un checkout à votre site
Pour encaisser un paiement en stablecoins sur votre propre site, chargez une fois le script d’intégration de Cosmos Pay et ajoutez un élément cosmos-pay-button ou cosmos-pay-checkout avec l’id d’un lien de paiement. Le bouton ouvre le checkout hébergé dans une fenêtre pop-up, et le checkout intégré affiche le paiement dans votre page. La page n’a besoin d’aucune clé d’API, et votre serveur confirme le paiement grâce à un webhook signé.
Bouton ou checkout intégré
- Le bouton de paiement (cosmos-pay-button) ouvre le checkout hébergé dans une fenêtre pop-up centrée sur votre page. Si le navigateur bloque la fenêtre pop-up, le même onglet va au checkout à la place.
- Le checkout intégré (cosmos-pay-checkout) affiche le paiement dans votre page, sur 420 pixels de large au maximum : le montant, le QR code, un bouton qui ouvre le wallet du payeur et le statut en direct.
- Les deux fonctionnent pour les liens de paiement sur Stellar, Solana et Monad, en anglais, espagnol, portugais, français, allemand, hindi et chinois.
D’où vient le lien
Chaque élément affiche un lien de paiement, désigné par son id dans l’attribut link. Créez le lien dans le tableau de bord, ou depuis votre serveur avec l’API de paiement ou le SDK TypeScript quand votre client passe à la caisse, puis mettez son id dans la page. La page lit le lien sans clé d’API : votre clé secrète reste donc sur votre serveur.
Affichez un checkout intégré par paiement : un lien se paie une seule fois.
API des liens de paiementComment accepter des paiements en USDC en ligne
Attributs et style
- link : l’id du lien de paiement. Obligatoire.
- lang : la langue, comme es ou es-AR. Par défaut, la langue du navigateur du payeur, sinon l’anglais.
- theme : light (par défaut), dark, ou auto, qui suit le réglage du système du payeur.
- demo : affiche un exemple qui ne peut pas être payé et n’envoie aucune requête, pour les démonstrations.
- Le texte placé dans le bouton remplace son libellé, et ::part(button) et ::part(card) permettent à votre CSS de modifier le style des éléments.
Ajouter un bouton de paiement, étape par étape
Chargez le script
Ajoutez une balise script à votre page, une seule fois : https://payments.cosmospay.lat/embed/cosmos-pay.js, avec l’attribut defer.
Obtenez un lien de paiement
Créez un lien dans le tableau de bord, ou depuis votre serveur quand votre client passe à la caisse, et gardez son id.
Ajoutez l’élément
Écrivez un élément cosmos-pay-button ou cosmos-pay-checkout avec link défini sur cet id, et lang ou theme si vous le souhaitez.
Autorisez-le dans votre CSP
Si votre site envoie une Content Security Policy, autorisez script-src https://payments.cosmospay.lat, connect-src https://api.cosmospay.lat et img-src data:.
Testez-le
Utilisez un lien créé en Sandbox : le checkout intégré indique qu’il fonctionne sur un réseau de test. L’attribut demo affiche un exemple sans aucun lien.
Confirmez-le sur votre serveur
Ajoutez un endpoint webhook et livrez la commande quand PAYMENT_INTENT_SUCCEEDED arrive.
Événements et confirmation du paiement
Les deux éléments déclenchent les événements cosmospay:status et cosmospay:paid sur votre page, avec l’id et le statut du lien. Servez-vous-en pour mettre à jour ce que voit le payeur, pas pour livrer la commande : un événement dans la page peut être falsifié.
Livrez la commande quand votre serveur reçoit PAYMENT_INTENT_SUCCEEDED, le webhook signé que Cosmos Pay envoie dès que le réseau confirme le paiement. Si votre page envoie une Cross-Origin-Opener-Policy de valeur same-origin, ou si la fenêtre pop-up est bloquée, le bouton n’envoie aucun événement.
Questions et réponses.
Paiements par réseau :Paiements sur StellarPaiements sur SolanaPaiements sur Monad
La page a-t-elle besoin de ma clé d’API ?
Non. Les éléments lisent le lien de paiement sans clé. Créez les liens sur votre serveur, où la clé reste.
Le checkout intégré est-il une iframe ?
Non. Il s’affiche dans votre page, dans son propre shadow DOM : aucune règle frame-src n’est donc nécessaire. Le checkout hébergé lui-même ne peut pas être intégré dans un cadre.
Un bouton peut-il recevoir plusieurs paiements ?
Non. Un lien se paie une seule fois : donnez donc à chaque paiement son propre lien, par exemple en le créant sur votre serveur quand le client passe à la caisse.
Est-ce que ça fonctionne sur n’importe quel site ?
Oui, sur toute page capable de charger un script, à condition que sa Content Security Policy autorise le script, l’API et les images data:.
