خرید بٹن
خرید بٹن 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 کا استعمال کرتے ہوئے پوچھ سکتے ہیں "میرے کن صارفین نے ادا کیا؟"، ہمارے کسی حقیقی گاہک ڈیٹا کو رکھے بغیر۔ گمنام چیک آؤٹس کے لیے چھوڑ دیں۔ |
theme | نہیں | dark یا light | بٹن اور پاپ اپ دونوں کے لیے بلٹ ان رنگ اسکیم چنتا ہے۔ ڈیفالٹ dark ہے۔ روشن اسکیم کے لیے theme="light" سیٹ کریں۔ آپ کے CSS متغیرات کسی بھی ایک کو override کر دیتے ہیں۔ اسٹائلنگ گائیڈ دیکھیں۔ |
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() selectors۔ کوئی JavaScript شامل نہیں۔
ہر متغیر اور part اسٹائلنگ گائیڈ پر دستاویز شدہ ہے، چلتی ہوئی مثالوں کے ساتھ جن پر آپ کلک اور کاپی کر سکتے ہیں:
تعاملی اسٹائلنگ گائیڈ کھولیں →
کامیابی اور منسوخی کے URLs
جب آپ ڈیش بورڈ کے Providers ٹیب میں Stripe یا NOWPayments جوڑتے ہیں، تو آپ دو URLs سیٹ کرتے ہیں:
- کامیابی URL، جہاں خریدار ایک کامیاب ادائیگی کے بعد پہنچتا ہے۔ Stripe اور NOWPayments ایک query پیرامیٹر شامل کرتے ہیں (Stripe کے لیے
?session_id=...، NOWPayments کے لیے?NP_id=...) تاکہ آپ کا کامیابی صفحہ شناخت کر سکے کہ کون سا لین دین مکمل ہوا۔ زیادہ تر سٹیٹک سائٹس بس ایک عام "شکریہ، آپ کی ادائیگی پروسیس ہو رہی ہے" پیغام دکھاتی ہیں اور سچائی کے ذریعے کے لیے ڈیش بورڈ پر انحصار کرتی ہیں۔ - منسوخی URL، جہاں خریدار پہنچتا ہے اگر وہ ادا کرنے سے پہلے پیچھے ہٹ جائے۔ اکثر آپ کے کارٹ صفحے جیسا ہی۔
دونوں URLs ڈیش بورڈ میں فی فراہم کنندہ ترتیب دیے جاتے ہیں، element کو ان کے بارے میں جاننے کی ضرورت نہیں۔