बाय बटन और जो पेमेंट पॉपअप वह खोलता है, दोनों आपके रंग, फ़ॉन्ट, और आकार ले लेते हैं। आप कुछ CSS वेरिएबल सेट करते हैं; दोनों साथ-साथ उन्हीं का अनुसरण करते हैं। नीचे सब कुछ एक काम करता हुआ उदाहरण है जिस पर आप क्लिक कर सकते हैं, और ठीक उसके बगल में वही कोड है जिसने उसे बनाया।
इनमें से कोई भी पहले से तय थीम नहीं है। हर रूप उसके बगल में दिखाए गए सादे CSS से बना है। किसी एक को शुरुआती बिंदु के रूप में कॉपी करें और जो चाहें बदलें।
ये लाइव बटन हैं जिनमें नमूना प्रोवाइडर और एक नकली संदर्भ कोड है। कोई भुगतान नहीं लिया जाता। किसी बटन पर क्लिक करके उसका पॉपअप खोलें, फिर वह कोड पढ़ें जिसने उसे स्टाइल किया।
कोई CSS नहीं, कोई एट्रिब्यूट नहीं। बटन और उसका पॉपअप शुरू से ही एक तटस्थ चारकोल रंग साझा करते हैं। यह theme="dark" है, यानी डिफ़ॉल्ट, इसलिए इसे लिखने से कुछ नहीं बदलता।
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>theme="light" जोड़ें और बटन तथा पॉपअप दोनों हल्के ऑफ़-व्हाइट हो जाते हैं। एक एट्रिब्यूट, कोई CSS नहीं।
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>इनमें से हर एक बस वही CSS है जो उसके बगल में दिखाया गया है, इससे ज़्यादा कुछ नहीं। किसी एक को लें, अपनी स्टाइलशीट में पेस्ट करें, और मान बदलें। इन्हें जैसे चाहें मिलाएं।
एक इंडिगो बटन जिसके साथ मेल खाता इंडिगो पॉपअप, मुट्ठीभर CSS वेरिएबल से तय किया गया। इसे दोबारा रंगने के लिए कोई भी मान बदलें।
coin-moebius-buy {
/* the button */
--cm-button-bg: #4f46e5;
--cm-button-color: #fff;
--cm-button-radius: 9999px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #1e1b4b;
--cm-color: #e0e7ff;
--cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 9999px;
}काली पृष्ठभूमि, हरा मोनोस्पेस टेक्स्ट, चौकोर कोने। पॉपअप वही रूप अपनाता है। यहां का हर मान आपके बदलने के लिए है।
coin-moebius-buy {
/* the button */
--cm-button-bg: #001b00;
--cm-button-color: #39ff14;
--cm-button-radius: 0;
--cm-font: 'Courier New', monospace;
/* the popup, styled to match */
--cm-modal-bg: #000;
--cm-color: #39ff14;
--cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
border: 1px solid #39ff14;
border-radius: 0;
}
coin-moebius-buy::part(provider) {
border-radius: 0;
}एक गर्म गुलाबी बटन जिसके साथ मेल खाता कोमल गुलाबी पॉपअप। एक संख्या संपादित करके कोनों को कम या ज़्यादा गोल करें।
coin-moebius-buy {
/* the button */
--cm-button-bg: #ec4899;
--cm-button-color: #fff;
--cm-button-radius: 14px;
/* the popup, styled to match */
--cm-modal-bg: #fff1f7;
--cm-color: #831843;
--cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 12px;
}एक ग्रेडिएंट बटन सतह, और उसके साथ मेल खाता रंगा हुआ पॉपअप। बटन की सतह को जैसे चाहें रंगें।
coin-moebius-buy::part(button) {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
border-radius: 10px;
padding: 0.8rem 2rem;
font-weight: 700;
}
coin-moebius-buy {
/* the popup, picking up the gradient's colors */
--cm-modal-bg: #f5f3ff;
--cm-color: #4c1d95;
--cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
border-top: 4px solid #764ba2;
}एक पतली रूपरेखा, हल्का टेक्स्ट, और एक साफ़ सफ़ेद पॉपअप। इसे जितना सादा चाहें उतना सादा कर दें।
coin-moebius-buy {
/* the button */
--cm-button-bg: transparent;
--cm-button-color: #374151;
--cm-button-radius: 6px;
/* the popup, styled to match */
--cm-modal-bg: #fff;
--cm-color: #374151;
--cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
border-radius: 8px;
border: 1px solid #e5e7eb;
}ऊपर के उदाहरण एक खाली पृष्ठभूमि पर हैं। यहां यह एक पेज पर है, एक कार्ड में बैठा हुआ, संपादन-योग्य राशि चालू किए हुए ताकि खरीदार तय करे कि कितना देना है। इस पर क्लिक करें और आज़माएं।
एक टिप छोड़ें। इससे काम चलता रहता है और पोस्ट आते रहते हैं।
coin-moebius-buy {
/* the button */
--cm-button-bg: #b45309;
--cm-button-color: #fff;
--cm-button-radius: 8px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #fffaf3;
--cm-color: #7c4a02;
--cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
}editable-amount="true" जोड़ें और पॉपअप एक राशि फ़ील्ड दिखाता है जिसे खरीदार भरता है, टिप, दान, या जितना चाहें उतना भुगतान के लिए। इसे बंद रहने दें, जो डिफ़ॉल्ट है, और आपके द्वारा तय की गई amount स्थिर रहती है और कोई फ़ील्ड नहीं दिखता। दोनों ही हाल में, जब तक राशि एक धनात्मक संख्या न हो तब तक भुगतान बटन निष्क्रिय रहते हैं, इसलिए कोई खरीदार बिना कुछ दिए चेकआउट नहीं कर सकता।
हर वह सतह जिसे आप स्टाइल कर सकते हैं। वेरिएबल बटन पर सेट करें; बाकी तक ::part() से पहुंचें।
इन्हें coin-moebius-buy एलिमेंट पर (या उसके किसी भी पूर्वज पर, क्योंकि custom properties विरासत में मिलते हैं) सेट करें:
| प्रॉपर्टी | डिफ़ॉल्ट | यह क्या नियंत्रित करता है |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | बटन लेबल और पिकर मॉडल के अंदर हर टेक्स्ट एलिमेंट के लिए फ़ॉन्ट परिवार। |
--cm-color | #ededed (theme="light" के साथ #1f1f1f) | पॉपअप और उसके निर्देशों के लिए टेक्स्ट रंग। |
--cm-button-bg | #2b2b2b (theme="light" के साथ #f5f5f5) | बटन की पृष्ठभूमि का रंग। डिफ़ॉल्ट रूप से पॉपअप सतह से मेल खाता है। |
--cm-button-color | #ededed (theme="light" के साथ #1f1f1f) | बटन टेक्स्ट रंग। |
--cm-button-radius | 6px | बटन कोने की त्रिज्या। पिल के लिए 999px, चौकोर के लिए 0 इस्तेमाल करें। |
--cm-modal-bg | #2b2b2b (theme="light" के साथ #f5f5f5) | पिकर पॉपअप की पृष्ठभूमि। |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | पिकर मॉडल के पीछे बैकड्रॉप की रंगत। |
ऊपर के वेरिएबल से आगे किसी भी चीज़ के लिए, अपने पेज CSS से कॉम्पोनेंट के नामित parts को लक्षित करें। बटन आठ उजागर करता है:
| Part | एलिमेंट |
|---|---|
button | बाय बटन स्वयं। |
modal | पिकर के पीछे पूरे-व्यूपोर्ट का ओवरले कंटेनर। |
dialog | केंद्र में रखा पिकर मॉडल बॉक्स। |
provider | पिकर के अंदर हर पेमेंट-प्रोवाइडर विकल्प। |
provider-icon | किसी प्रोवाइडर के नाम के बगल का छोटा आइकन। |
provider-name | प्रोवाइडर नाम का टेक्स्ट। |
close | पिकर के नीचे "Cancel" बटन। |
instructions | डाक-से-भुगतान के लिए दिखाया गया निर्देश पैनल (डाक पता + संदर्भ कोड)। |
पॉपअप डिफ़ॉल्ट रूप से डार्क है। हल्के पॉपअप के लिए, एलिमेंट में theme="light" जोड़ें। यही पूरा स्विच है, और यह आगंतुक के डिवाइस सेटिंग का अनुसरण नहीं करता, इसलिए आप जो चुनते हैं वही हर खरीदार देखता है। कुछ खास चाहिए? किसी भी थीम के ऊपर ऊपर के किसी भी वेरिएबल को सेट करें और आपके मान जीतते हैं।
v1 में कुछ चीज़ें जानबूझकर हार्डकोड हैं: 120ms होवर ट्रांज़िशन, मॉडल का z-index, और पिकर के अंदर ज़्यादातर स्पेसिंग/पैडिंग। अगर किसी ब्रांड की ज़रूरत इनमें से किसी पर आ पड़े, तो उपाय वही ::part() सेलेक्टर के साथ एक !important अधिरोहण है; साफ़-सुथरा फ़िक्स यह है कि आप हमसे इसके लिए एक CSS वेरिएबल जोड़ने को कहें। उसके लिए सही जगह SDK issue tracker है।
चुनें कि पॉपअप में कौन से तरीके दिखें, उन्हें नाम दें, और हर उत्पाद के लिए उनका क्रम अपने डैशबोर्ड से तय करें। कोई सब्सक्रिप्शन डाक से भुगतान छोड़ सकता है जबकि कोई डाउनलोड उसे रख सकता है।
किसी भी उदाहरण को अपनी स्टाइलशीट में कॉपी करें और भुगतान लेना शुरू करें। शुरू करना मुफ़्त, कोई कार्ड नहीं।