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 কাস্টম প্রপার্টি

এগুলো coin-moebius-buy এলিমেন্টে (বা এর যেকোনো পূর্বপুরুষে, যেহেতু কাস্টম প্রপার্টি উত্তরাধিকার সূত্রে আসে) নির্ধারণ করুন:

প্রপার্টিডিফল্টএটি যা নিয়ন্ত্রণ করে
--cm-fontsystem-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-radius6pxবাটন কোণের ব্যাসার্ধ। একটি পিলের জন্য 999px, চৌকোর জন্য 0 ব্যবহার করুন।
--cm-modal-bg#2b2b2b (theme="light"-এ #f5f5f5)পিকার পপআপের ব্যাকগ্রাউন্ড।
--cm-modal-overlayrgba(0, 0, 0, 0.45)পিকার মোডালের পেছনের ব্যাকড্রপ টিন্ট।

::part() সিলেক্টর

উপরের ভেরিয়েবলের বাইরে যেকোনো কিছুর জন্য, আপনার পৃষ্ঠার CSS থেকে কম্পোনেন্টের নামকরণ করা পার্টগুলো লক্ষ্য করুন। বাটনটি আটটি উন্মুক্ত করে:

পার্টএলিমেন্ট
buttonবাই বাটনটি নিজে।
modalপিকারের পেছনের পূর্ণ-ভিউপোর্ট ওভারলে কন্টেইনার।
dialogকেন্দ্রীভূত পিকার মোডাল বক্স।
providerপিকারের ভেতরে প্রতিটি পেমেন্ট-প্রোভাইডার বিকল্প।
provider-iconএকটি প্রোভাইডারের নামের পাশের ছোট আইকন।
provider-nameপ্রোভাইডারের নাম টেক্সট।
closeপিকারের নিচের "Cancel" বাটন।
instructionsডাকযোগে-অর্থের জন্য দেখানো নির্দেশনা প্যানেল (ডাক ঠিকানা + রেফারেন্স কোড)।

লাইট ও ডার্ক

পপআপ ডিফল্টভাবে ডার্ক। একটি লাইট পপআপের জন্য, এলিমেন্টে theme="light" যোগ করুন। এটাই পুরো সুইচ, আর এটি দর্শকের ডিভাইস সেটিং অনুসরণ করে না, তাই আপনি যা বেছে নেন তা-ই প্রতিটি ক্রেতা দেখেন। নির্দিষ্ট কিছু চান? দুই থিমের যেকোনোটির উপরে উপরের যেকোনো ভেরিয়েবল নির্ধারণ করুন আর আপনার মানগুলো জয়ী হয়।

যা এখনো থিমযোগ্য নয়

কয়েকটি জিনিস v1-এ ইচ্ছাকৃতভাবে হার্ডকোড করা: 120ms হোভার ট্রানজিশন, মোডালের z-index, আর পিকারের ভেতরের বেশিরভাগ স্পেসিং/প্যাডিং। এগুলোর একটিতে কোনো ব্র্যান্ড প্রয়োজন এলে, সমাধান একই ::part() সিলেক্টরের সাথে একটি !important ওভাররাইড; পরিষ্কার ফিক্স হলো আমাদের এর জন্য একটি CSS ভেরিয়েবল যোগ করতে বলা। SDK ইস্যু ট্র্যাকার তার জন্য সঠিক জায়গা।

প্রতি-পণ্য পেমেন্ট পদ্ধতি

পপআপে কোন পদ্ধতিগুলো দেখাবে তা বেছে নিন, সেগুলোর নাম বদলান, আর আপনার ড্যাশবোর্ড থেকে প্রতিটি পণ্যের জন্য সেগুলোর ক্রম নির্ধারণ করুন। একটি সাবস্ক্রিপশন ডাকযোগে অর্থ বাদ দিতে পারে, আর একটি ডাউনলোড তা রাখতে পারে।

সাজান, তারপর চালু করুন

যেকোনো উদাহরণ আপনার স্টাইলশিটে কপি করুন আর পেমেন্ট নেওয়া শুরু করুন। শুরু করতে বিনামূল্যে, কার্ড নেই।