# Bouton de paiement crypto pour votre site | Cosmos Pay URL: https://payments.cosmospay.lat/learn/crypto-payment-button?lang=fr > Ajoutez un bouton de paiement ou un checkout intégré à tout site avec une balise script, sans clé d’API dans la page : attributs, événements, CSP et tests. ## 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é. Mis à jour le 2 novembre 2026 · Par Cosmos Pay ### 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 paiement](https://dev.cosmospay.lat/docs/api/payment-links/) - [Comment accepter des paiements en USDC en ligne](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=fr) ### 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 1. **Chargez le script**: Ajoutez une balise script à votre page, une seule fois : https://payments.cosmospay.lat/embed/cosmos-pay.js, avec l’attribut defer. 2. **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. 3. **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. 4. **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:. 5. **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. 6. **Confirmez-le sur votre serveur**: Ajoutez un endpoint webhook et livrez la commande quand PAYMENT_INTENT_SUCCEEDED arrive. - [Intégrer un paiement (documentation)](https://dev.cosmospay.lat/docs/embed/) - [Webhooks](https://dev.cosmospay.lat/docs/sdk/server/webhooks/) ### É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. - [Comment confirmer un paiement sur votre serveur](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=fr) ### Questions et réponses. Paiements par réseau : [Paiements sur Stellar](https://payments.cosmospay.lat/stellar?lang=fr), [Paiements sur Solana](https://payments.cosmospay.lat/solana?lang=fr), [Paiements sur Monad](https://payments.cosmospay.lat/monad?lang=fr) #### 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:. ### Plus de guides [Voir tous les guides](https://payments.cosmospay.lat/learn?lang=fr) #### [Comment accepter des paiements en USDC en ligne](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=fr) Encaissez en USDC avec un lien de paiement, le checkout hébergé ou l’API, et faites d’abord un essai sur un réseau de test. #### [Comment confirmer un paiement en stablecoins sur votre serveur](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=fr) Livrez les commandes à partir d’un webhook signé, pas de la page de votre client : vérifiez-le, répondez vite et ignorez les doublons. #### [Comment accepter des dons en crypto à montant libre](https://payments.cosmospay.lat/learn/crypto-donations?lang=fr) Laissez chaque donateur choisir le montant : des liens à montant libre sur Stellar et Solana, créés pour chaque donateur et confirmés par webhook. ### Commencez à accepter les stablecoins. Créez un compte gratuit, générez une clé de test et envoyez votre premier lien de paiement dès aujourd’hui. [Créer un lien de paiement](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments) #### Écrivez-nous Une question sur les offres, l’intégration ou les paiements protégés : dites-le-nous, nous répondons par e-mail. [organization@cosmospay.lat](mailto:organization@cosmospay.lat)