# अपनी वेबसाइट पर क्रिप्टो पे बटन जोड़ें | Cosmos Pay

URL: https://payments.cosmospay.lat/learn/crypto-payment-button?lang=hi

> एक script टैग से, पेज में बिना किसी API की के, किसी भी वेबसाइट पर पे बटन या एम्बेडेड चेकआउट जोड़ें: एट्रिब्यूट, इवेंट, CSP और टेस्टिंग।

## अपनी वेबसाइट पर क्रिप्टो पे बटन या चेकआउट कैसे जोड़ें

अपनी वेबसाइट पर स्टेबलकॉइन भुगतान लेने के लिए Cosmos Pay की एम्बेड स्क्रिप्ट एक बार लोड करें और किसी पेमेंट लिंक की ID के साथ cosmos-pay-button या cosmos-pay-checkout एलिमेंट जोड़ें। बटन होस्टेड चेकआउट को एक पॉपअप में खोलता है, और एम्बेडेड चेकआउट भुगतान को आपके पेज के अंदर ही दिखाता है। पेज को API की नहीं चाहिए, और आपका सर्वर एक साइन किए गए वेबहुक से भुगतान की पुष्टि करता है।

2 नवंबर 2026 को अपडेट किया गया · Cosmos Pay द्वारा

### बटन या एम्बेडेड चेकआउट

- पे बटन (cosmos-pay-button) होस्टेड चेकआउट को आपके पेज के बीच में एक पॉपअप में खोलता है। अगर ब्राउज़र पॉपअप ब्लॉक कर दे, तो इसके बजाय उसी टैब में चेकआउट खुल जाता है।
- एम्बेडेड चेकआउट (cosmos-pay-checkout) भुगतान को आपके पेज के अंदर, 420 पिक्सल तक की चौड़ाई में दिखाता है: राशि, QR कोड, भुगतानकर्ता का वॉलेट खोलने वाला एक बटन और लाइव स्टेटस।
- दोनों Stellar, Solana और Monad के पेमेंट लिंक के लिए काम करते हैं, अंग्रेज़ी, स्पेनिश, पुर्तगाली, फ़्रेंच, जर्मन, हिन्दी और चीनी में।

### लिंक कहाँ से आता है

हर एलिमेंट एक पेमेंट लिंक दिखाता है, जिसे link एट्रिब्यूट में उसकी ID से बताया जाता है। लिंक डैशबोर्ड में बनाएँ, या जब आपका ग्राहक चेकआउट करे तब अपने सर्वर से पेमेंट्स API या TypeScript SDK से बनाएँ, और उसकी ID पेज में डालें। पेज बिना API की के लिंक पढ़ता है, इसलिए आपकी सीक्रेट की आपके सर्वर पर ही रहती है।

हर भुगतान के लिए एक एम्बेडेड चेकआउट दिखाएँ: एक लिंक का भुगतान एक ही बार होता है।

- [पेमेंट लिंक API](https://dev.cosmospay.lat/docs/api/payment-links/)
- [ऑनलाइन USDC भुगतान कैसे स्वीकार करें](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=hi)

### एट्रिब्यूट और स्टाइलिंग

- link: पेमेंट लिंक की ID। ज़रूरी।
- lang: भाषा, जैसे es या es-AR। डिफ़ॉल्ट रूप से भुगतानकर्ता के ब्राउज़र की भाषा, वरना अंग्रेज़ी।
- theme: light (डिफ़ॉल्ट), dark, या auto, जो भुगतानकर्ता के सिस्टम की सेटिंग के हिसाब से चलता है।
- demo: एक सैंपल दिखाता है जिसका भुगतान नहीं हो सकता और जो कोई रिक्वेस्ट नहीं भेजता, प्रदर्शन के लिए।
- बटन के अंदर लिखा टेक्स्ट उसके लेबल की जगह ले लेता है, और ::part(button) और ::part(card) से आपकी CSS एलिमेंट की स्टाइल बदल सकती है।

### पे बटन जोड़ें, चरण दर चरण

1. **स्क्रिप्ट लोड करें**: अपने पेज में एक script टैग एक बार जोड़ें: https://payments.cosmospay.lat/embed/cosmos-pay.js, defer एट्रिब्यूट के साथ।
2. **पेमेंट लिंक लें**: डैशबोर्ड में, या जब आपका ग्राहक चेकआउट करे तब अपने सर्वर से, एक लिंक बनाएँ और उसकी ID सँभालकर रखें।
3. **एलिमेंट जोड़ें**: link को उस ID पर सेट करके एक cosmos-pay-button या cosmos-pay-checkout एलिमेंट लिखें, और चाहें तो lang या theme भी।
4. **अपनी CSP में इसकी अनुमति दें**: अगर आपकी साइट Content Security Policy भेजती है, तो script-src https://payments.cosmospay.lat, connect-src https://api.cosmospay.lat और img-src data: की अनुमति दें।
5. **इसे टेस्ट करें**: सैंडबॉक्स में बना लिंक इस्तेमाल करें: एम्बेडेड चेकआउट बताता है कि वह टेस्ट नेटवर्क पर चल रहा है। demo एट्रिब्यूट बिना किसी लिंक के एक सैंपल दिखाता है।
6. **अपने सर्वर पर इसकी पुष्टि करें**: एक वेबहुक एंडपॉइंट जोड़ें और PAYMENT_INTENT_SUCCEEDED पहुँचने पर ऑर्डर डिलीवर करें।

- [भुगतान एम्बेड करें (डॉक्स)](https://dev.cosmospay.lat/docs/embed/)
- [वेबहुक](https://dev.cosmospay.lat/docs/sdk/server/webhooks/)

### इवेंट और भुगतान की पुष्टि

दोनों एलिमेंट आपके पेज पर लिंक की ID और स्टेटस के साथ cosmospay:status और cosmospay:paid इवेंट भेजते हैं। इनका इस्तेमाल भुगतानकर्ता को दिखने वाली चीज़ें अपडेट करने के लिए करें, ऑर्डर डिलीवर करने के लिए नहीं: पेज में आया इवेंट नकली हो सकता है।

ऑर्डर तब डिलीवर करें जब आपके सर्वर को PAYMENT_INTENT_SUCCEEDED मिले, यानी वह साइन किया गया वेबहुक जो Cosmos Pay नेटवर्क के भुगतान की पुष्टि करते ही भेजता है। अगर आपका पेज same-origin वाली Cross-Origin-Opener-Policy भेजता है, या पॉपअप ब्लॉक हो जाता है, तो बटन कोई इवेंट नहीं भेजता।

- [अपने सर्वर पर भुगतान की पुष्टि कैसे करें](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=hi)

### सवाल और जवाब।

नेटवर्क के हिसाब से भुगतान: [Stellar पर भुगतान](https://payments.cosmospay.lat/stellar?lang=hi), [Solana पर भुगतान](https://payments.cosmospay.lat/solana?lang=hi), [Monad पर भुगतान](https://payments.cosmospay.lat/monad?lang=hi)

#### क्या पेज को मेरी API की चाहिए?

नहीं। एलिमेंट बिना की के पेमेंट लिंक पढ़ते हैं। लिंक अपने सर्वर पर बनाएँ, जहाँ की रहती है।

#### क्या एम्बेडेड चेकआउट एक iframe है?

नहीं। यह आपके पेज के अंदर अपने खुद के shadow DOM में बनता है, इसलिए किसी frame-src नियम की ज़रूरत नहीं होती। होस्टेड चेकआउट को खुद किसी फ़्रेम में नहीं रखा जा सकता।

#### क्या एक बटन से कई भुगतान लिए जा सकते हैं?

नहीं। एक लिंक का भुगतान एक ही बार होता है, इसलिए हर भुगतान को उसका अपना लिंक दें, जैसे ग्राहक के चेकआउट करते समय उसे अपने सर्वर पर बनाकर।

#### क्या यह किसी भी वेबसाइट पर काम करता है?

हाँ, किसी भी ऐसे पेज पर जो स्क्रिप्ट लोड कर सकता है, बशर्ते उसकी Content Security Policy स्क्रिप्ट, API और data: इमेज की अनुमति देती हो।

### और गाइड

[सभी गाइड देखें](https://payments.cosmospay.lat/learn?lang=hi)

#### [ऑनलाइन USDC भुगतान कैसे स्वीकार करें](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=hi)

पेमेंट लिंक, होस्टेड चेकआउट या API से USDC में भुगतान लें, और पहले इसे टेस्ट नेटवर्क पर आज़माएँ।

#### [अपने सर्वर पर स्टेबलकॉइन भुगतान की पुष्टि कैसे करें](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=hi)

ऑर्डर साइन किए गए वेबहुक के आधार पर डिलीवर करें, अपने ग्राहक के पेज के आधार पर नहीं: उसे जाँचें, जल्दी जवाब दें और डुप्लिकेट छोड़ दें।

#### [खुली राशि के साथ क्रिप्टो दान कैसे स्वीकार करें](https://payments.cosmospay.lat/learn/crypto-donations?lang=hi)

हर दानदाता को राशि चुनने दें: Stellar और Solana पर खुली राशि वाले लिंक, हर दानदाता के लिए अलग बने और वेबहुक से पुष्टि किए गए।

### आज से भुगतान लें स्टेबलकॉइन में।

मुफ़्त अकाउंट बनाएँ, एक टेस्ट की जेनरेट करें और आज ही अपना पहला पेमेंट लिंक भेजें।

[पेमेंट लिंक बनाएँ](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments)

#### हमें लिखें

प्लान, इंटीग्रेशन या सुरक्षित भुगतान के बारे में सवाल हैं? हमें बताएँ, हम ईमेल से जवाब देंगे।

[organization@cosmospay.lat](mailto:organization@cosmospay.lat)