Coin Moebius
法典 · 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选择器底部的“取消”按钮。
instructions为邮寄付款显示的说明面板（通信地址 + 参考码）。

浅色与深色

弹窗默认是深色的。要一个浅色弹窗，就给元素加上 theme="light"。这就是全部的切换，而且它不跟随访客的设备设置，所以你选的就是每位买家看到的。想要更具体的？在任一主题之上设置上面任意变量，你的取值会胜出。

目前还不可设样式的部分

v1 里有几样东西被有意硬编码：120ms 的悬停过渡、弹窗的 z-index，以及选择器内部大部分的间距/内边距。如果某个品牌需求落在这些上面，临时办法是同样用 ::part() 选择器加 !important 覆盖；更干净的修法是请我们为它加一个 CSS 变量。SDK 问题追踪器是为此而设的合适去处。

按商品设置付款方式

在你的后台里，为每个商品选择弹窗中显示哪些付款方式、重命名它们，并设定它们的顺序。一个订阅可以跳过邮寄付款，而一个下载商品则保留它。

← 返回文档

设计好样式，再发布

把任意示例复制到你的样式表，就可以开始收款。免费起步，无需绑卡。

查看价格阅读文档