Кнопка покупки

Кнопка покупки, это несколько строк HTML, которые вы вставляете на любую страницу. Без фреймворка, без шага установки на вашей стороне. Кнопка рисуется при первой отрисовке; выбор провайдера и SDK платёжных провайдеров загружаются по требованию при первом нажатии покупателя. Она работает на любом сайте или фреймворке, который рисует HTML, включая конструкторы без кода, позволяющие вставлять HTML-встраивания.

Подтверждена работа с: Angular, Hugo, Jekyll, обычный HTML, Webflow (встраивание Custom Code), Carrd (элемент Embed), Framer (HTML-встраивание), Squarespace (Code Block), WordPress (блок Custom HTML), Ghost, сайты Notion (виджеты HTML-встраивания). Если ваш сайт позволяет вставить HTML на страницу, кнопка покупки там работает.

Справочник по атрибутам

Атрибут	Обязателен	Что принимает	Примечания
`endpoint`	Нет	Строка URL	Почти всегда опускайте это. Кнопка сама определяет свою базу API: `https://api.coinmoebius.com` в боевой среде, `http://localhost:8787` на localhost. Задавайте только как переопределение для необычной настройки (например, самостоятельно размещённого прокси перед API).
`project-id`	Да	Строка с префиксом `proj_`	Со страницы вашего проекта в панели управления. Безопасно показывать публично, это идентификатор, а не учётные данные.
`product-id`	Да (в строгом режиме) / Рекомендуется (в режиме ad-hoc)	Строка, любой формат на ваш выбор	Ваш внутренний идентификатор товара. В строгом режиме (по умолчанию) именно так обработчик ищет цену в вашем каталоге. В режиме ad-hoc он всё равно передаётся в ваши вебхуки в `metadata.productId`, чтобы вы могли сопоставить транзакции с запасами. Смотрите раздел Строгий режим против режима ad-hoc ниже.
`amount`	Только в режиме ad-hoc	Десятичное число строкой	Цена в основных единицах (например, доллары, а не центы). Должна быть положительной. Опускайте это в строгом режиме. Обработчик читает каноническую цену из вашего каталога и игнорирует любое значение в HTML. Требуется только когда проект в режиме ad-hoc и `product-id` нет в каталоге.
`currency`	Только в режиме ad-hoc	Трёхбуквенный код ISO 4217 или ваше собственное название единицы	`USD`, `EUR` и т. д. для карточных / крипто-способов. Способ оплаты по почте принимает любую строку (например, `GBK`), потому что транзакцию рассчитывает сам продавец. То же правило, что и у `amount`: опускайте в строгом режиме, требуется в режиме ad-hoc для товаров не из каталога.
`label`	Нет	Строка	Текст кнопки. По умолчанию `Buy`. Используйте это, чтобы различать кнопки на одной странице.
`customer-ref`	Нет	Строка, любой формат на ваш выбор	Непрозрачный идентификатор покупателя в вашей собственной системе, например id вошедшего пользователя. Кнопка передаёт его обработчику как `metadata.customerRef`, и обработчик помечает им транзакцию. Позже вы можете спросить «кто из моих пользователей заплатил?», используя свой собственный id, без того чтобы мы хранили какие-либо реальные данные клиента. Опускайте для анонимных оформлений.
`theme`	Нет	`dark` или `light`	Выбирает встроенную цветовую схему для кнопки и всплывающего окна вместе. По умолчанию `dark`. Задайте `theme="light"` для светлой схемы. Ваши CSS-переменные переопределяют любую. Смотрите руководство по оформлению.
`editable-amount`	Нет	`true` или `false`	Когда `true`, всплывающее окно показывает поле суммы, которое покупатель заполняет (чаевые, пожертвования, оплата по желанию). По умолчанию `false`, где заданная вами `amount` фиксирована, а поле не появляется. Кнопки оплаты остаются неактивными, пока сумма не станет положительным числом.

Несколько кнопок на одной странице

Скрипт регистрирует кнопку один раз, затем на странице может рисоваться любое число экземпляров. Каждый экземпляр независим. Пример ниже использует строгий режим (по умолчанию): без amount или currency в HTML, потому что обработчик ищет цену для каждого товара в вашем каталоге.

<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 (виджеты пожертвований, копилки для чаевых), каждая кнопка также включает amount и currency. Полную картину смотрите в разделе Строгий режим против режима ad-hoc.

Оформление кнопки

Кнопка покупки рисуется внутри Shadow DOM, что означает, что никакой существующий CSS вашей страницы внутрь неё не проникает. Это намеренно: так кнопка выглядит одинаково на каждом сайте, и случайное правило * { box-sizing: ... } не ломает модальное окно выбора. Вы оформляете её через две поверхности из собственной таблицы стилей: пользовательские CSS-свойства для цветов, шрифтов и формы и селекторы ::part() для всего остального. JavaScript не задействован.

Каждая переменная и part задокументированы в руководстве по оформлению, с живыми примерами, по которым можно кликнуть и скопировать:

Открыть интерактивное руководство по оформлению →

URL успеха и отмены

Когда вы подключаете Stripe или NOWPayments во вкладке «Провайдеры» в панели управления, вы задаёте два URL:

URL успеха, куда покупатель попадает после успешного платежа. Stripe и NOWPayments добавляют параметр запроса (?session_id=... для Stripe, ?NP_id=... для NOWPayments), чтобы ваша страница успеха могла определить, какая транзакция завершилась. Большинство статических сайтов просто показывают общее сообщение «Спасибо, ваш платёж обрабатывается» и полагаются на панель как источник истины.
URL отмены, куда покупатель попадает, если отказывается до оплаты. Часто тот же, что и страница вашей корзины.

Оба URL настраиваются для каждого провайдера в панели управления, элементу о них знать не нужно.

Кнопка покупки