बाय बटन
बाय बटन HTML की कुछ पंक्तियां हैं जिन्हें आप किसी भी पेज पर पेस्ट करते हैं। कोई फ्रेमवर्क नहीं, आपकी तरफ कोई इंस्टॉल चरण नहीं। बटन पहली पेंट पर रेंडर होता है; प्रोवाइडर पिकर और पेमेंट-प्रोवाइडर SDK तब मांग पर लोड होते हैं जब कोई खरीदार पहली बार क्लिक करता है। यह किसी भी साइट या फ्रेमवर्क में काम करता है जो HTML रेंडर करता है, उन नो-कोड साइट बिल्डरों सहित जो आपको HTML एम्बेड पेस्ट करने देते हैं।
इनके साथ काम करना पुष्ट: Angular, Hugo, Jekyll, सादा HTML, Webflow (Custom Code embed), Carrd (Embed element), Framer (HTML embed), Squarespace (Code Block), WordPress (Custom HTML block), Ghost, Notion साइटें (HTML embed widgets)। अगर आपकी साइट किसी पेज पर HTML पेस्ट करने देती है, तो बाय बटन वहां काम करता है।
एट्रिब्यूट संदर्भ
| एट्रिब्यूट | आवश्यक | यह क्या स्वीकार करता है | नोट्स |
|---|---|---|---|
endpoint | नहीं | URL स्ट्रिंग | इसे लगभग हमेशा छोड़ दें। बटन अपना API आधार खुद पहचानता है: उत्पादन में https://api.coinmoebius.com, localhost पर http://localhost:8787। इसे केवल किसी असामान्य सेटअप के लिए एक अधिरोहण के रूप में सेट करें (जैसे, API के सामने एक खुद-होस्ट किया प्रॉक्सी)। |
project-id | हां | स्ट्रिंग, proj_ उपसर्ग के साथ | डैशबोर्ड में आपके प्रोजेक्ट पेज से। सार्वजनिक रूप से दिखाना सुरक्षित है, यह एक पहचानकर्ता है, क्रेडेंशियल नहीं। |
product-id | हां (strict mode में) / अनुशंसित (ad-hoc mode में) | स्ट्रिंग, आपकी चुनी कोई भी संरचना | आपका आंतरिक उत्पाद पहचानकर्ता। strict mode (डिफ़ॉल्ट) में, worker इसी से आपके कैटलॉग से कीमत ढूंढता है। ad-hoc mode में, इसे फिर भी आपके वेबहुक तक metadata.productId में पहुंचाया जाता है ताकि आप लेन-देन को इन्वेंटरी से जोड़ सकें। नीचे Strict mode बनाम ad-hoc mode अनुभाग देखें। |
amount | केवल ad-hoc mode में | स्ट्रिंग के रूप में दशमलव संख्या | प्रमुख इकाइयों में कीमत (जैसे, डॉलर, सेंट नहीं)। धनात्मक होनी चाहिए। strict mode में इसे छोड़ दें। worker आपके कैटलॉग से प्रामाणिक कीमत पढ़ता है और HTML में किसी भी मान को अनदेखा करता है। केवल तब आवश्यक जब प्रोजेक्ट ad-hoc mode में हो और product-id कैटलॉग में न हो। |
currency | केवल ad-hoc mode में | तीन-अक्षर का ISO 4217 कोड या आपका अपना इकाई नाम | कार्ड / क्रिप्टो तरीकों के लिए USD, EUR, आदि। डाक-से-भुगतान प्रोवाइडर कोई भी स्ट्रिंग स्वीकार करता है (जैसे, GBK) क्योंकि लेन-देन निपटाने वाला व्यापारी ही होता है। amount जैसा ही नियम: strict mode में छोड़ें, कैटलॉग में न होने वाले उत्पादों के लिए ad-hoc mode में आवश्यक। |
label | नहीं | स्ट्रिंग | बटन का टेक्स्ट। डिफ़ॉल्ट Buy है। इसका इस्तेमाल एक ही पेज पर बटनों में फ़र्क करने के लिए करें। |
customer-ref | नहीं | स्ट्रिंग, आपकी चुनी कोई भी संरचना | आपके अपने सिस्टम में खरीदार के लिए एक अपारदर्शी पहचानकर्ता, जैसे एक लॉग-इन उपयोगकर्ता id। बटन इसे worker को metadata.customerRef के रूप में आगे भेजता है, और worker लेन-देन को इससे टैग करता है। बाद में आप अपनी खुद की id से पूछ सकते हैं कि "मेरे किस उपयोगकर्ता ने भुगतान किया?", बिना हमारे कोई असली ग्राहक डेटा रखे। गुमनाम चेकआउट के लिए छोड़ दें। |
theme | नहीं | dark या light | बटन और पॉपअप के लिए एक साथ बिल्ट-इन रंग योजना चुनता है। डिफ़ॉल्ट dark है। हल्की योजना के लिए theme="light" सेट करें। आपके CSS वेरिएबल किसी को भी अधिरोहित कर देते हैं। स्टाइलिंग गाइड देखें। |
editable-amount | नहीं | true या false | जब true हो, तो पॉपअप एक राशि फ़ील्ड दिखाता है जिसे खरीदार भरता है (टिप, दान, जितना चाहें उतना भुगतान)। डिफ़ॉल्ट false है, जहां आपकी तय की गई amount स्थिर रहती है और कोई फ़ील्ड नहीं दिखता। जब तक राशि एक धनात्मक संख्या न हो तब तक भुगतान बटन निष्क्रिय रहते हैं। |
एक पेज पर कई बटन
स्क्रिप्ट बटन को एक बार पंजीकृत करती है, फिर किसी भी संख्या में इंस्टेंस एक पेज पर रेंडर हो सकते हैं। हर इंस्टेंस स्वतंत्र है। नीचे का उदाहरण strict mode (डिफ़ॉल्ट) इस्तेमाल करता है: HTML में कोई amount या currency नहीं, क्योंकि worker आपके कैटलॉग में हर उत्पाद से कीमत ढूंढता है।
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="t-shirt-medium"
label="T-shirt (medium)">
</coin-moebius-buy>
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="mug-blue"
label="Blue mug">
</coin-moebius-buy>अगर आपका प्रोजेक्ट ad-hoc mode (दान विजेट, टिप जार) में है, तो हर बटन में amount और currency भी शामिल होते हैं। पूरी तस्वीर के लिए Strict mode बनाम ad-hoc mode देखें।
बटन को थीम देना
बाय बटन एक Shadow DOM के अंदर रेंडर होता है, जिसका मतलब है कि आपके पेज का मौजूदा CSS इसके अंदर तक नहीं पहुंचता। यह जानबूझकर है: यह बटन को हर साइट पर एक जैसा रखता है, और किसी आवारा * { box-sizing: ... } नियम को पिकर मॉडल तोड़ने से रोकता है। आप इसे अपनी खुद की स्टाइलशीट से दो सतहों के ज़रिए स्टाइल करते हैं: रंग, फ़ॉन्ट, और आकार के लिए CSS custom properties, और बाकी सब के लिए ::part() सेलेक्टर। कोई JavaScript शामिल नहीं।
हर वेरिएबल और part स्टाइलिंग गाइड पर दस्तावेज़ित है, उन लाइव उदाहरणों के साथ जिन पर आप क्लिक और कॉपी कर सकते हैं:
इंटरैक्टिव स्टाइलिंग गाइड खोलें →
सफलता और रद्द URL
जब आप डैशबोर्ड के Providers टैब में Stripe या NOWPayments कनेक्ट करते हैं, तो आप दो URL सेट करते हैं:
- Success URL, जहां खरीदार एक सफल भुगतान के बाद पहुंचता है। Stripe और NOWPayments एक query parameter जोड़ते हैं (Stripe के लिए
?session_id=..., NOWPayments के लिए?NP_id=...) ताकि आपका सफलता पेज पहचान सके कि कौन सा लेन-देन पूरा हुआ। ज़्यादातर स्टैटिक साइटें बस एक सामान्य "धन्यवाद, आपका भुगतान संसाधित हो रहा है" संदेश दिखाती हैं और सच के स्रोत के लिए डैशबोर्ड पर भरोसा करती हैं। - Cancel URL, जहां खरीदार पहुंचता है अगर वे भुगतान से पहले पीछे हट जाते हैं। अक्सर आपके कार्ट पेज जैसा ही।
दोनों URL डैशबोर्ड में प्रति-प्रोवाइडर कॉन्फ़िगर किए जाते हैं, एलिमेंट को उनके बारे में जानने की ज़रूरत नहीं।