Кнопка покупки и всплывающее окно оплаты, которое она открывает, оба принимают ваши цвета, шрифты и форму. Вы задаёте несколько CSS-переменных; оба следуют им вместе. Всё ниже, это рабочий пример, по которому можно кликнуть, с точным кодом, который его создал, прямо рядом.
Ни одна из них не является готовой темой. Каждый вид построен из простого CSS, показанного рядом. Скопируйте любой как отправную точку и меняйте что угодно.
Это живые кнопки с подставными провайдерами и фиктивным кодом-ссылкой. Платёж не взимается. Нажмите кнопку, чтобы открыть её всплывающее окно, затем прочитайте код, который её оформил.
Без CSS, без атрибутов. Кнопка и её всплывающее окно делят один нейтральный графитовый цвет «из коробки». Это theme="dark", вариант по умолчанию, так что прописывать его явно ничего не меняет.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Добавьте theme="light", и кнопка, и всплывающее окно становятся мягко-белыми. Один атрибут, без CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Каждый из них, это просто показанный рядом CSS, не более. Возьмите любой, вставьте в свою таблицу стилей и измените значения. Смешивайте их как угодно.
Индиго-кнопка с подходящим индиго-окном, заданная горсткой CSS-переменных. Измените любое значение, чтобы перекрасить.
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;
}Чёрный фон, зелёный моноширинный текст, прямые углы. Всплывающее окно следует тому же виду. Каждое значение здесь можно менять.
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;
}Тёплая розовая кнопка с подходящим мягко-розовым окном. Сделайте углы более или менее скруглёнными, отредактировав одно число.
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;
}Градиентная поверхность кнопки, а всплывающее окно тонировано под неё. Раскрасьте поверхность кнопки как угодно.
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;
}Тонкий контур, приглушённый текст и чистое белое окно. Упрощайте, пока не станет настолько простым, насколько хотите.
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;
}Примеры выше стоят на пустом фоне. Здесь же она на странице, уложена в карточку, с включённой редактируемой суммой, чтобы покупатель сам выбирал, сколько дать. Нажмите и попробуйте.
Оставьте чаевые. Это держит свет включённым, а посты выходящими.
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().
Задайте их на элементе coin-moebius-buy (или на любом из его предков, поскольку пользовательские свойства наследуются):
| Свойство | По умолчанию | Что управляет |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Семейство шрифтов для текста кнопки и каждого текстового элемента внутри модального окна выбора. |
--cm-color | #ededed (#1f1f1f при theme="light") | Цвет текста для всплывающего окна и его инструкций. |
--cm-button-bg | #2b2b2b (#f5f5f5 при theme="light") | Цвет фона кнопки. По умолчанию совпадает с поверхностью всплывающего окна. |
--cm-button-color | #ededed (#1f1f1f при theme="light") | Цвет текста кнопки. |
--cm-button-radius | 6px | Радиус скругления углов кнопки. Используйте 999px для «таблетки», 0 для прямых углов. |
--cm-modal-bg | #2b2b2b (#f5f5f5 при theme="light") | Фон всплывающего окна выбора. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Затемнение подложки за модальным окном выбора. |
Для всего, что выходит за рамки переменных выше, нацеливайтесь на именованные части компонента из CSS вашей страницы. Кнопка раскрывает восемь:
| Part | Элемент |
|---|---|
button | Сама кнопка покупки. |
modal | Контейнер наложения во весь экран за окном выбора. |
dialog | Центрированный блок модального окна выбора. |
provider | Каждый вариант платёжного провайдера внутри окна выбора. |
provider-icon | Маленький значок рядом с названием провайдера. |
provider-name | Текст названия провайдера. |
close | Кнопка «Отмена» внизу окна выбора. |
instructions | Панель инструкций, показываемая для оплаты по почте (почтовый адрес и код-ссылка). |
Всплывающее окно по умолчанию тёмное. Для светлого окна добавьте theme="light" на элемент. Это весь переключатель, и он не следует за настройкой устройства посетителя, так что то, что вы выберете, видит каждый покупатель. Хотите что-то конкретное? Задайте любую из переменных выше поверх любой темы, и ваши значения побеждают.
Несколько вещей намеренно жёстко зашиты в v1: переходы при наведении в 120 мс, z-index модального окна и большая часть отступов внутри окна выбора. Если потребность бренда упирается в одну из них, обходной путь, тот же селектор ::part() с переопределением !important; более чистое решение, попросить нас добавить для неё CSS-переменную. Трекер задач SDK, это подходящее место для этого.
Выбирайте, какие способы показываются во всплывающем окне, переименовывайте их и задавайте их порядок для каждого товара из вашей панели управления. Подписка может пропустить оплату по почте, а скачиваемый файл, оставить её.
Скопируйте любой пример в свою таблицу стилей и начните принимать платежи. Бесплатно для начала, без карты.