Codex · IX

خرید بٹن کو اپنا بنائیں

خرید بٹن اور وہ ادائیگی پاپ اپ جو یہ کھولتا ہے، دونوں آپ کے رنگ، فونٹس، اور شکل لیتے ہیں۔ آپ چند CSS متغیرات سیٹ کرتے ہیں؛ دونوں ساتھ چلتے ہیں۔ نیچے سب کچھ ایک چلتی ہوئی مثال ہے جس پر آپ کلک کر سکتے ہیں، اور جس عین کوڈ نے اسے بنایا وہ بالکل ساتھ ہے۔

ان میں سے کوئی بھی پہلے سے سیٹ تھیم نہیں ہے۔ ہر شکل اس سادہ CSS سے بنی ہے جو اس کے ساتھ دکھائی گئی ہے۔ کسی ایک کو نقطۂ آغاز کے طور پر کاپی کریں اور جو چاہیں بدلیں۔

یہ متبادل فراہم کنندگان اور ایک جعلی حوالہ کوڈ کے ساتھ چلتے ہوئے بٹن ہیں۔ کوئی ادائیگی نہیں لی جاتی۔ کسی بٹن پر کلک کر کے اس کا پاپ اپ کھولیں، پھر وہ کوڈ پڑھیں جس نے اسے اسٹائل کیا۔

ڈیفالٹ

کوئی CSS نہیں، کوئی ایٹری بیوٹس نہیں۔ بٹن اور اس کا پاپ اپ شروع سے ایک نیوٹرل چارکول شیئر کرتے ہیں۔ یہ theme="dark" ہے، ڈیفالٹ، تو اسے لکھ دینے سے کچھ نہیں بدلتا۔

Buy now

پاپ اپ کھولنے کے لیے کلک کریں

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

روشن تھیم

theme="light" شامل کریں اور بٹن اور پاپ اپ دونوں ایک نرم آف وائٹ ہو جاتے ہیں۔ ایک ایٹری بیوٹ، کوئی CSS نہیں۔

Get access

پاپ اپ کھولنے کے لیے کلک کریں

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

مثالیں، پری سیٹس نہیں

ان میں سے ہر ایک بس وہی CSS ہے جو اس کے ساتھ دکھائی گئی ہے، اس سے زیادہ کچھ نہیں۔ کسی ایک کو لیں، اپنی اسٹائل شیٹ میں چسپاں کریں، اور قدریں بدلیں۔ انہیں جیسے چاہیں ملائیں۔

برانڈ رنگ

ایک انڈیگو بٹن جس کے ساتھ ملتا جلتا انڈیگو پاپ اپ، چند CSS متغیرات سے سیٹ کیا گیا۔ اسے دوبارہ رنگنے کے لیے کوئی بھی قدر بدلیں۔

Buy the eBook

پاپ اپ کھولنے کے لیے کلک کریں

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;
}

ٹرمینل

سیاہ پس منظر، سبز مونو اسپیس متن، چوکور کونے۔ پاپ اپ وہی شکل اپناتا ہے۔ یہاں ہر قدر آپ کی بدلنے کے لیے ہے۔

> buy_license

پاپ اپ کھولنے کے لیے کلک کریں

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;
}

نرم

ایک گرم گلابی بٹن جس کے ساتھ ملنے والا نرم گلابی پاپ اپ۔ ایک عدد ایڈٹ کر کے کونوں کو کم یا زیادہ گول کریں۔

Add to cart

پاپ اپ کھولنے کے لیے کلک کریں

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;
}

گریڈینٹ

ایک گریڈینٹ بٹن چہرہ، جس سے ملنے کے لیے پاپ اپ رنگا گیا۔ بٹن کے چہرے کو جیسے چاہیں رنگیں۔

Reserve a spot

پاپ اپ کھولنے کے لیے کلک کریں

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;
}

کم سے کم

ایک پتلی آؤٹ لائن، مدھم متن، اور ایک صاف سفید پاپ اپ۔ اسے اتنا سادہ کر دیں جتنا آپ چاہیں۔

Purchase

پاپ اپ کھولنے کے لیے کلک کریں

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;
}

ایک ٹپ جار شامل کرنا

اوپر کی مثالیں ایک خالی پس منظر پر بیٹھی ہیں۔ یہاں یہ اس کے بجائے ایک صفحے پر ہے، ایک کارڈ میں رکھی، قابلِ ترمیم رقم آن کے ساتھ تاکہ خریدار چنے کہ کتنا دینا ہے۔ اس پر کلک کر کے آزمائیں۔

کام پسند آ رہا ہے؟

ایک ٹپ چھوڑیں۔ یہ بتیاں جلائے رکھتی ہے اور پوسٹس آتی رہتی ہیں۔

Leave a tip

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() سے پہنچیں۔

CSS custom properties

انہیں coin-moebius-buy element پر سیٹ کریں (یا اس کے کسی بھی آباؤ اجداد پر، کیونکہ custom properties وراثت میں چلتے ہیں):

Property	ڈیفالٹ	یہ کیا کنٹرول کرتا ہے
`--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)`	پکر موڈل کے پیچھے بیک ڈراپ رنگت۔

::part() selectors

اوپر کے متغیرات سے آگے کسی بھی چیز کے لیے، اپنے صفحے کے CSS سے کمپوننٹ کے نامزد parts کو نشانہ بنائیں۔ بٹن آٹھ کو ظاہر کرتا ہے:

Part	عنصر
`button`	خود خرید بٹن۔
`modal`	پکر کے پیچھے مکمل ویوپورٹ overlay کنٹینر۔
`dialog`	مرکزی پکر موڈل باکس۔
`provider`	پکر کے اندر ہر ادائیگی فراہم کنندہ آپشن۔
`provider-icon`	فراہم کنندہ کے نام کے ساتھ چھوٹا آئیکن۔
`provider-name`	فراہم کنندہ کے نام کا متن۔
`close`	پکر کے نیچے "Cancel" بٹن۔
`instructions`	ڈاک سے ادائیگی کے لیے دکھایا گیا ہدایات پینل (ڈاک کا پتہ + حوالہ کوڈ)۔

روشن اور گہرا

پاپ اپ ڈیفالٹ طور پر گہرا ہے۔ روشن پاپ اپ کے لیے، element میں theme="light" شامل کریں۔ یہی پورا سوئچ ہے، اور یہ زائر کی آلے کی ترتیب کی پیروی نہیں کرتا، تو جو آپ چنتے ہیں وہی ہر خریدار دیکھتا ہے۔ کچھ مخصوص چاہتے ہیں؟ کسی بھی تھیم کے اوپر اوپر کے کوئی بھی متغیرات سیٹ کریں اور آپ کی قدریں جیت جاتی ہیں۔

جو ابھی تھیم نہیں ہو سکتا

چند چیزیں v1 میں جان بوجھ کر ہارڈ کوڈ ہیں: 120ms ہوور ٹرانزیشنز، موڈل کا z-index، اور پکر کے اندر زیادہ تر اسپیسنگ/پیڈنگ۔ اگر کوئی برانڈ ضرورت ان میں سے کسی پر آئے، تو حل ایک !important override کے ساتھ وہی ::part() selector ہے؛ صاف ستھرا حل یہ ہے کہ ہم سے اس کے لیے ایک CSS متغیر شامل کرنے کو کہیں۔ SDK issue tracker اس کے لیے صحیح جگہ ہے۔

فی پروڈکٹ ادائیگی کے طریقے

چنیں کہ پاپ اپ میں کون سے طریقے دکھائی دیں، انہیں نیا نام دیں، اور اپنے ڈیش بورڈ سے ہر پروڈکٹ کے لیے ان کی ترتیب سیٹ کریں۔ ایک سبسکرپشن ڈاک سے ادائیگی چھوڑ سکتی ہے جبکہ ایک ڈاؤن لوڈ اسے رکھ سکتا ہے۔

← دستاویزات پر واپس

اسے اسٹائل کریں، پھر بھیجیں

کوئی بھی مثال اپنی اسٹائل شیٹ میں کاپی کریں اور ادائیگیاں لینا شروع کریں۔ شروع کرنا مفت، کوئی کارڈ نہیں۔

قیمتیں دیکھیں دستاویزات پڑھیں