خرید بٹن
خرید بٹن HTML کی چند سطریں ہیں جنہیں آپ کسی بھی صفحے پر چسپاں کرتے ہیں۔ کوئی فریم ورک نہیں، آپ کی طرف کوئی انسٹال کا قدم نہیں۔ بٹن پہلے پینٹ پر رینڈر ہوتا ہے؛ فراہم کنندہ پکر اور ادائیگی فراہم کنندہ کے SDKs پہلی بار جب کوئی خریدار کلک کرتا ہے تب طلب پر لوڈ ہوتے ہیں۔ یہ کسی بھی سائٹ یا فریم ورک میں کام کرتا ہے جو 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 string | تقریباً ہمیشہ اسے چھوڑ دیں۔ بٹن اپنی API بنیاد خود پہچانتا ہے: پروڈکشن میں https://api.coinmoebius.com، localhost پر http://localhost:8787۔ اسے صرف کسی غیر معمولی سیٹ اپ کے لیے override کے طور پر سیٹ کریں (مثلاً، API کے سامنے ایک خود میزبان پراکسی)۔ |
project-id | ہاں | String، proj_ سابقہ کے ساتھ | ڈیش بورڈ میں آپ کے پروجیکٹ صفحے سے۔ عوامی طور پر ظاہر کرنا محفوظ ہے، یہ ایک شناخت کنندہ ہے، کوئی سند نہیں۔ |
product-id | ہاں (strict mode میں) / تجویز کردہ (ad-hoc mode میں) | String، جو بھی فارمیٹ آپ چنیں | آپ کا اندرونی پروڈکٹ شناخت کنندہ۔ strict mode (ڈیفالٹ) میں، worker اسی سے آپ کے کیٹلاگ سے قیمت تلاش کرتا ہے۔ ad-hoc mode میں، یہ پھر بھی آپ کے ویب ہکس میں metadata.productId کے ذریعے آگے پہنچایا جاتا ہے تاکہ آپ لین دین کو انوینٹری سے میپ کر سکیں۔ نیچے Strict mode بمقابلہ ad-hoc mode سیکشن دیکھیں۔ |
amount | صرف ad-hoc mode میں | String کے طور پر اعشاری عدد | بڑے یونٹس میں قیمت (مثلاً، ڈالر، سینٹ نہیں)۔ مثبت ہونی چاہیے۔ strict mode میں اسے چھوڑ دیں۔ worker آپ کے کیٹلاگ سے متعین قیمت پڑھتا ہے اور HTML میں کسی بھی قدر کو نظر انداز کر دیتا ہے۔ صرف تب درکار جب پروجیکٹ ad-hoc mode میں ہو اور product-id کیٹلاگ میں نہ ہو۔ |
currency | صرف ad-hoc mode میں | تین حروف کا ISO 4217 کوڈ یا آپ کا اپنا یونٹ نام | کارڈز / کرپٹو طریقوں کے لیے USD، EUR، وغیرہ۔ ڈاک سے ادائیگی فراہم کنندہ کوئی بھی string قبول کرتا ہے (مثلاً، GBK) کیونکہ تاجر ہی لین دین طے کرتا ہے۔ amount جیسا ہی قاعدہ: strict mode میں چھوڑیں، کیٹلاگ میں نہ ہونے والی مصنوعات کے لیے ad-hoc mode میں درکار۔ |
label | نہیں | String | بٹن کا متن۔ ڈیفالٹ Buy ہے۔ اسے ایک ہی صفحے پر بٹنوں میں فرق کرنے کے لیے استعمال کریں۔ |
customer-ref | نہیں | String، جو بھی فارمیٹ آپ چنیں | آپ کے اپنے نظام میں خریدار کے لیے ایک غیر شفاف شناخت کنندہ، جیسے لاگ ان شدہ یوزر id۔ بٹن اسے worker کو metadata.customerRef کے طور پر آگے پہنچاتا ہے، اور worker لین دین کو اس کے ساتھ ٹیگ کر دیتا ہے۔ بعد میں آپ اپنے id کا استعمال کرتے ہوئے پوچھ سکتے ہیں "میرے کن صارفین نے ادا کیا؟"، ہمارے کسی حقیقی گاہک ڈیٹا کو رکھے بغیر۔ گمنام چیک آؤٹس کے لیے چھوڑ دیں۔ |
buyer-email | No | Email address | Where to send a digital download. Set this when your site already knows the buyer, like a members area or a logged-in app, and the button will not ask them for an email. When it is not set, the button asks the buyer for one at checkout if the product is a download on a provider that does not return the email itself. We use the address only to send the download and then delete it. We never store it. |
theme | نہیں | dark یا light | بٹن اور پاپ اپ دونوں کے لیے بلٹ ان رنگ اسکیم چنتا ہے۔ ڈیفالٹ dark ہے۔ روشن اسکیم کے لیے theme="light" سیٹ کریں۔ آپ کے CSS متغیرات کسی بھی ایک کو override کر دیتے ہیں۔ اسٹائلنگ گائیڈ دیکھیں۔ |
editable-amount | نہیں | true یا false | جب true ہو، تو پاپ اپ ایک رقم فیلڈ دکھاتا ہے جسے خریدار بھرتا ہے (ٹپس، عطیات، جتنا چاہیں ادا کریں)۔ ڈیفالٹ false ہے، جہاں جو amount آپ سیٹ کرتے ہیں وہ فکسڈ ہے اور کوئی فیلڈ ظاہر نہیں ہوتی۔ ادائیگی کے بٹن تب تک غیر فعال رہتے ہیں جب تک رقم ایک مثبت عدد نہ ہو۔ |
disabled | نہیں | صفحہ موجود ہے/غیر موجود، یا el.disabled property | معیاری بٹن معاہدہ: جب موجود ہو تو بٹن کم روشن ہو جاتا ہے اور کلکس نہیں سنتا۔ اسے HTML میں سیٹ کریں، یا native بٹن کی طرح property کو کوڈ سے بدلیں۔ اس سے الگ، بٹن ہمیشہ خود کو اندر سے لاک کر لیتا ہے جب کلک پروسیس ہو رہی ہو تاکہ ڈبل کلک سے دو چیک آؤٹ شروع نہ ہوں؛ یہ اندرونی لاک کبھی آپ نے یہاں سیٹ کی گئی کسی قدر کو نہیں چھوتا۔ |
spinner | نہیں | true یا false | بٹن پر چیک آؤٹ شروع ہوتے وقت دکھایا جانے والا بلٹ ان لوڈنگ spinner۔ ڈیفالٹ طور پر آن۔ اسے بند کرنے کے لیے spinner="false" سیٹ کریں اور cm-busy اور cm-idle ایونٹس سے اپنی لوڈنگ UI چلائیں۔ اسے بند کرنا کبھی ڈبل کلک کی حفاظت بند نہیں کرتا۔ Spinner آپ کے بٹن کے اپنے ٹیکسٹ رنگ اور سائز میں کھینچا جاتا ہے، تو یہ خودکار طور پر آپ کی اسٹائلنگ سے میل کھاتا ہے؛ اسے ::part(spinner) کے ساتھ دوبارہ اسٹائل کریں یا اسے بالکل <span slot="spinner">آپ کا HTML</span> سے بدل دیں۔ |
ایک ادائیگی طریقہ؟ کوئی پاپ اپ نہیں۔
جب کسی پروڈکٹ کے پاس بالکل ایک ادائیگی طریقہ فعال ہو اور ایک فکسڈ قیمت ہو، تو بٹن picker کو چھوڑ دیتا ہے: خریدار کلک کرتا ہے اور براہ راست اس طریقے کے فلو میں جاتا ہے۔ Hosted checkouts فوری طور پر کوئی پاپ اپ کے ساتھ redirect کرتے ہیں، جبکہ ڈاک سے ادائیگی، صفحے پر کوئن، اور ڈاؤن لوڈ ای میل پروپٹس ابھی بھی اپنے اپنے پہلے مرحلے پر پاپ اپ کھولتے ہیں۔ دو یا اس سے زیادہ طریقے والی مصنوعات، اور خریدار کی قیمت والی مصنوعات (ٹپس، عطیات)، ہمیشہ picker دکھاتے ہیں۔ کوئی بھی ترتیب کرنے کو کچھ نہیں ہے؛ بٹن آپ کی مصنوعت کی اپنی ترتیبات سے فیصلہ کرتا ہے، فی مصنوعت، تو دو طریقے والی مصنوعت اور ایک طریقے والی مصنوعت ایک ہی صفحے پر ہر ایک صحیح کام کرتی ہے۔ اگر ایک direct path پر چیک آؤٹ ناکام ہو تو بٹن کے نیچے ایک مختصر غلطی لائن ظاہر ہوتی ہے (اسے ::part(error) کے ذریعے اسٹائل کے قابل)۔
ایک صفحے پر متعدد بٹن
اسکرپٹ بٹن کو ایک بار رجسٹر کرتا ہے، پھر ایک صفحے پر کسی بھی تعداد میں مثالیں رینڈر ہو سکتی ہیں۔ ہر مثال آزاد ہے۔ نیچے کی مثال 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() selectors۔ کوئی JavaScript شامل نہیں۔
ہر متغیر اور part اسٹائلنگ گائیڈ پر دستاویز شدہ ہے، چلتی ہوئی مثالوں کے ساتھ جن پر آپ کلک اور کاپی کر سکتے ہیں:
تعاملی اسٹائلنگ گائیڈ کھولیں →
کامیابی اور منسوخی کے URLs
جب آپ ڈیش بورڈ کے Providers ٹیب میں Stripe یا NOWPayments جوڑتے ہیں، تو آپ دو URLs سیٹ کرتے ہیں:
- کامیابی URL، جہاں خریدار ایک کامیاب ادائیگی کے بعد پہنچتا ہے۔ Stripe اور NOWPayments ایک query پیرامیٹر شامل کرتے ہیں (Stripe کے لیے
?session_id=...، NOWPayments کے لیے?NP_id=...) تاکہ آپ کا کامیابی صفحہ شناخت کر سکے کہ کون سا لین دین مکمل ہوا۔ زیادہ تر سٹیٹک سائٹس بس ایک عام "شکریہ، آپ کی ادائیگی پروسیس ہو رہی ہے" پیغام دکھاتی ہیں اور سچائی کے ذریعے کے لیے ڈیش بورڈ پر انحصار کرتی ہیں۔ - منسوخی URL، جہاں خریدار پہنچتا ہے اگر وہ ادا کرنے سے پہلے پیچھے ہٹ جائے۔ اکثر آپ کے کارٹ صفحے جیسا ہی۔
دونوں URLs ڈیش بورڈ میں فی فراہم کنندہ ترتیب دیے جاتے ہیں، element کو ان کے بارے میں جاننے کی ضرورت نہیں۔