Платёжный виджет на вашем сайте
Откройте отдельную страницу оплаты поверх сайта, встроите её в блок или переведите покупателя по ссылке. Виджет использует готовый публичный checkout URL и не требует API-ключа в браузере.
В этой статье
От счёта к оплате#
Создайте счёт в /account#links и сразу получите checkoutUrl. Откройте /account#widget, вставьте ссылку и выберите модальное окно, встроенный блок или переход. Ключи и вебхуки доступны в соседних разделах кабинета.
Предпросмотр конструктора всегда использует демонстрационный заказ без списания. В готовом коде виджета сохраняется ваша рабочая ссылка; её условия приходят из серверного счёта.
В интерфейсе для нового счёта USD доступны карты и Alipay, для RUB — СБП, для USDT — криптовалюта. API для совместимости может сохранить USD + crypto, но такая криптооплата не запускается и возвращает crypto_requires_usdt. USD и USDT различаются; автоматической конвертации или курса 1:1 нет. Для криптооплаты нужен отдельный счёт в USDT.
Кнопка с запасной обычной ссылкой#
В примере показана демо-страница без списания. Для своего заказа замените оба значения адреса на checkoutUrl, полученный от API. Загружайте скрипт с того же домена Kevmi, которому принадлежит ссылка.
Обычный href позволяет открыть checkout, если JavaScript отключён. data-kevmi-label задаёт доступное имя iframe. Подключите скрипт один раз на страницу.
<script src="https://kevmi.maxeevmax1.chatgpt.site/widgets/kevmi.js" defer></script>
<a href="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
data-kevmi-checkout="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
data-kevmi-mode="modal"
data-kevmi-label="Order checkout">Pay securely</a>Три способа открытия#
Для inline используйте контейнер, например div, и замените CHECKOUT_URL_FROM_API реальным URL. Ширина подстраивается под контейнер; сообщения checkout могут менять высоту в разрешённом диапазоне.
Диалог закрывается кнопкой, Escape или нажатием на фон. После закрытия фокус возвращается к исходной кнопке. При включённом уменьшении движения анимация сокращается.
| data-kevmi-mode | Поведение | Когда удобно |
|---|---|---|
| modal | Диалог поверх сайта; значение по умолчанию | Кнопка оплаты рядом с заказом |
| inline | Iframe внутри указанного блока | Отдельный шаг оформления на вашем сайте |
| redirect | Переход на страницу Kevmi в текущей вкладке | Полная страница оплаты |
<div data-kevmi-checkout="CHECKOUT_URL_FROM_API"
data-kevmi-mode="inline"
data-kevmi-label="Order checkout"></div>Вызов из собственного интерфейса#
События kevmi:opened и kevmi:closed помогают интерфейсу отреагировать на открытие и закрытие. kevmi:error на кнопке сообщает о некорректном URL. Эти события не содержат подтверждения оплаты. Вызывайте API после загрузки скрипта.
window.Kevmi.open(checkoutUrl, {
mode: 'modal',
label: 'Order checkout',
closeLabel: 'Close checkout'
});
// Inline blocks added after page load are detected automatically.
// You may also request mounting explicitly:
window.Kevmi.mount(document);Что подтверждает успешный платёж#
Не вставляйте API-ключи и секреты подписи в HTML. Виджет получает только публичную ссылку на один счёт. Реквизиты карты и банковский код шифруются внутри страницы оплаты ключом шлюза; сервер Kevmi не принимает их открытыми.
Сообщение postMessage используется для состояния интерфейса, а не для выдачи товара. Перед обработкой проверяйте origin и источник окна. Окончательный результат берите из проверенного события payment.succeeded или серверного link.payment.
Проверка перед размещением#
- Разрешите домен Kevmi в script-src и frame-src вашей Content Security Policy; не расширяйте остальные политики без необходимости.
- Проверьте узкий экран, клавиатуру, светлую и тёмную тему.
- Убедитесь, что ссылка активна, срок не истёк, а сумма и доли расходов соответствуют заказу.
- Сохраните обычную ссылку как запасной способ открытия.
- Проверьте отказ и повтор webhook без повторной выдачи товара.