বাই বাটন
বাই বাটন কয়েক লাইন 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 vs 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 | না | স্ট্রিং, আপনার বেছে নেওয়া যেকোনো ফরম্যাট | আপনার নিজের সিস্টেমে ক্রেতার জন্য একটি অস্বচ্ছ শনাক্তকারী, যেমন একটি লগ-ইন করা ব্যবহারকারী আইডি। বাটনটি এটি metadata.customerRef হিসেবে worker-এ পাঠায়, আর worker এটি দিয়ে লেনদেনটি ট্যাগ করে। পরে আপনি কোনো আসল গ্রাহক ডেটা না রেখেই নিজের আইডি ব্যবহার করে জিজ্ঞেস করতে পারেন "আমার কোন ব্যবহারকারী অর্থ দিলেন?" বেনামি চেকআউটের জন্য বাদ দিন। |
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 vs ad-hoc mode দেখুন।
বাটন থিমিং
বাই বাটন একটি Shadow DOM-এর ভেতরে রেন্ডার হয়, যার মানে আপনার পৃষ্ঠার বিদ্যমান কোনো CSS এর ভেতরে পৌঁছায় না। এটি ইচ্ছাকৃত: এটি প্রতিটি সাইটে বাটনটিকে একই রকম দেখায়, আর একটি ভবঘুরে * { box-sizing: ... } নিয়ম পিকার মোডাল ভাঙা থেকে আটকায়। আপনি আপনার নিজের স্টাইলশিট থেকে দুটি পৃষ্ঠের মাধ্যমে এটি সাজান: রঙ, ফন্ট, ও আকৃতির জন্য CSS কাস্টম প্রপার্টি, আর বাকি সবকিছুর জন্য ::part() সিলেক্টর। কোনো JavaScript জড়িত নেই।
প্রতিটি ভেরিয়েবল ও পার্ট স্টাইলিং গাইডে নথিবদ্ধ, ক্লিক ও কপি করার মতো লাইভ উদাহরণ সহ:
ইন্টারঅ্যাক্টিভ স্টাইলিং গাইড খুলুন →
সাকসেস ও ক্যানসেল URL
ড্যাশবোর্ডের Providers ট্যাবে আপনি Stripe বা NOWPayments যুক্ত করলে, আপনি দুটি URL নির্ধারণ করেন:
- সাকসেস URL, যেখানে একটি সফল পেমেন্টের পর ক্রেতা পৌঁছান। Stripe ও NOWPayments একটি কোয়েরি প্যারামিটার যোগ করে (Stripe-এর জন্য
?session_id=..., NOWPayments-এর জন্য?NP_id=...) যাতে আপনার সাকসেস পৃষ্ঠা কোন লেনদেন সম্পন্ন হলো তা শনাক্ত করতে পারে। বেশিরভাগ স্ট্যাটিক সাইট শুধু একটি সাধারণ "ধন্যবাদ, আপনার পেমেন্ট প্রক্রিয়াধীন" বার্তা দেখায় আর সত্যের উৎসের জন্য ড্যাশবোর্ডের উপর নির্ভর করে। - ক্যানসেল URL, যেখানে ক্রেতা পৌঁছান যদি তাঁরা অর্থ দেওয়ার আগে পিছিয়ে যান। প্রায়ই আপনার কার্ট পৃষ্ঠার মতোই।
উভয় URL ড্যাশবোর্ডে প্রতি-প্রোভাইডার কনফিগার করা, এলিমেন্টের সেগুলো সম্পর্কে জানার দরকার নেই।