The buy button and the payment popup it opens both take your colors, fonts, and shape. You set a few CSS variables; both follow together. Everything below is a working example you can click, with the exact code that produced it right beside it.
None of these are preset themes. Each look is built from the plain CSS shown next to it. Copy any one as a starting point and change whatever you want.
These are live buttons with stand-in providers and a fake reference code. No payment is taken. Click a button to open its popup, then read the code that styled it.
No CSS, no attributes. The button and its popup share one neutral charcoal out of the box. This is theme="dark", the default, so writing it out changes nothing.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Add theme="light" and both the button and the popup turn a soft off-white. One attribute, no CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Each of these is just the CSS shown beside it, nothing more. Take any one, paste it into your own stylesheet, and change the values. Mix them however you like.
An indigo button with a matching indigo popup, set with a handful of CSS variables. Change any value to recolor it.
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;
}Black background, green monospace text, square corners. The popup follows the same look. Every value here is yours to swap.
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;
}A warm pink button with a soft pink popup to match. Round the corners more or less by editing one number.
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;
}A gradient button face, with the popup tinted to match it. Paint the button face however you like.
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;
}A thin outline, muted text, and a clean white popup. Strip it back until it is as plain as you want.
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;
}The examples above sit on a blank background. Here it is on a page instead, tucked into a card, with editable amount turned on so the buyer picks what to give. Click it and try.
Leave a tip. It keeps the lights on and the posts coming.
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;
}Add editable-amount="true" and the popup shows an amount field the buyer fills in, for tips, donations, or pay-what-you-want. Leave it off, which is the default, and the amount you set is fixed and no field appears. Either way the payment buttons stay disabled until the amount is a positive number, so a buyer cannot check out for nothing.
Every surface you can style. Set the variables on the button; reach the rest with ::part().
Set these on the coin-moebius-buy element (or any of its ancestors, since custom properties inherit):
| Property | Default | What it controls |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Font family for the button label and every text element inside the picker modal. |
--cm-color | #ededed (#1f1f1f with theme="light") | Text color for the popup and its instructions. |
--cm-button-bg | #2b2b2b (#f5f5f5 with theme="light") | Button background color. Matches the popup surface by default. |
--cm-button-color | #ededed (#1f1f1f with theme="light") | Button text color. |
--cm-button-radius | 6px | Button corner radius. Use 999px for a pill, 0 for square. |
--cm-modal-bg | #2b2b2b (#f5f5f5 with theme="light") | Background of the picker popup. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Backdrop tint behind the picker modal. |
For anything beyond the variables above, target the named parts of the component from your page CSS. The button exposes eight:
| Part | Element |
|---|---|
button | The buy button itself. |
modal | The full-viewport overlay container behind the picker. |
dialog | The centered picker modal box. |
provider | Each payment-provider option inside the picker. |
provider-icon | The small icon next to a provider's name. |
provider-name | The provider name text. |
close | The "Cancel" button at the bottom of the picker. |
instructions | The instructions panel shown for pay-by-mail (the mailing address + reference code). |
The popup is dark by default. For a light popup, add theme="light" to the element. That is the whole switch, and it does not follow the visitor's device setting, so what you pick is what every buyer sees. Want something specific? Set any of the variables above on top of either theme and your values win.
A few things are intentionally hardcoded in v1: the 120ms hover transitions, the modal's z-index, and most spacing/padding inside the picker. If a brand need lands on one of these, the workaround is the same ::part() selector with an !important override; the cleaner fix is to ask us to add a CSS variable for it. The SDK issue tracker is the right place for that.
Choose which methods show in the popup, rename them, and set their order for each product from your dashboard. A subscription can skip pay-by-mail while a download keeps it.