Платежный виджет CloudPayments — это всплывающая форма оплаты, которая позволяет клиентам оплачивать товары и услуги прямо на сайте или в мобильном приложении, не переходя на сторонние страницы. Виджет автоматически адаптируется под любой браузер и устройство, распознает тип платежной системы (Visa, Mastercard, «Мир») и поддерживает оплату в один клик через pay-сервисы. Подключение интернет-эквайринга в CloudPayments увеличивает конверсию за счет отсутствия редиректов и упрощенного процесса оплаты.
Что такое платежный виджет и зачем он нужен
Платежный виджет — это программный модуль, который встраивается в сайт или мобильное приложение для приема онлайн-платежей. В отличие от классических платежных шлюзов, которые перенаправляют клиента на внешнюю страницу, виджет оплаты открывается непосредственно на сайте магазина.
Ключевые преимущества использования виджета оплаты на сайте:
Клиент не покидает ваш ресурс — это снижает процент брошенных корзин
Форма автоматически адаптируется под мобильные устройства и десктопы
Поддержка всех популярных платежных систем: Visa, Mastercard, «Мир», СБП
Встроенная валидация карточных данных уменьшает количество ошибочных транзакций
Поддержка рекуррентных платежей для подписок и регулярных списаний
По данным Банка России, рынок онлайн-платежей в России продолжает расти: в 2025 году объем транзакций через интернет-эквайринг превысил 50 трлн рублей. Использование удобных платежных инструментов становится критически важным для конкурентоспособности бизнеса.
Как работает виджет CloudPayments
Виджет CloudPayments обеспечивает прием платежей непосредственно на сайте без перенаправления клиентов на сторонние страницы. Это принципиально отличает его от многих других платежных решений.
Принцип работы:
Клиент нажимает кнопку «Оплатить» на вашем сайте
Открывается всплывающее окно оплаты с формой для ввода карточных данных
Виджет автоматически определяет тип карты (Visa, Mastercard, «Мир») и банк-эмитент
Происходит проверка корректности заполнения данных в реальном времени
При успешной оплате клиент остается на вашем сайте, при ошибке виджет указывает точную причину (недостаточно средств, истек срок действия карты и т.д.)
Окно оплаты на сайте адаптируется под устройство пользователя: на десктопе открывается компактная форма, на мобильных устройствах виджет занимает весь экран для удобства ввода данных.
Технические преимущества CloudPayments виджет
Адаптация под любой сайт и приложение
Адаптивная форма виджета оплаты проста в установке и работает во всех современных браузерах и мобильных устройствах. Скрипт автоматически определяет тип устройства пользователя и запускает оптимизированную версию виджета.
Платежи без редиректа
Платежная форма обеспечивает возможность принимать оплату непосредственно на сайте. Клиент не перенаправляется на другие страницы для завершения покупки, что снижает процент отказов и увеличивает конверсию.
Все платежные методы в одном месте
Виджет для онлайн-оплаты умеет самостоятельно распознавать тип платежной системы и банк-эмитент при оплате банковской картой. Кроме того, он работает с pay-сервисами (Apple Pay, Google Pay, Samsung Pay), позволяющими осуществлять оплату в один клик.
Увеличение импульсных покупок
Используя платежный виджет для оплаты от CloudPayments, вы можете увеличить количество импульсных покупок и легко подключать для своих клиентов подписки (рекуррентные платежи). Это позволит эффективно управлять платежами без дополнительных технических доработок.
Удобные технологии валидации
При использовании виджета для приема платежей на вашем сайте он автоматически проведет проверку правильности заполнения карточных данных. В случае неудачного платежа виджет точно указывает причину, например недостаток средств на карте или истечение срока действия карты. Благодаря этому можно связаться с клиентом и указать ему конкретную причину того, почему транзакция не прошла, и предложить повторить оплату.
Какому бизнесу подойдет платежный виджет
Платежный виджет подходит для различных видов бизнесов, которые принимают онлайн-платежи на своем сайте или в приложении.
Виджет оплаты на сайте будет полезен:
Интернет-магазинам — для приема оплаты за товары с доставкой
Сервисам и агентствам — для оплаты услуг онлайн
Онлайн-школам и курсам — для продажи образовательных программ
SaaS-сервисам — для подписочной модели с рекуррентными платежами
Ресторанам и доставке — для оплаты заказов на сайте
Фитнес-клубам и студиям — для продажи абонементов
Он обеспечивает безопасность транзакций, проверку карточных данных и удобные способы оплаты, что помогает увеличить конверсию и улучшить пользовательский опыт.
Тарифы CloudPayments: от чего зависит комиссия
У сервиса нет скрытых платежей. Стоимость обслуживания формируется индивидуально. На итоговую комиссию влияют две вещи: сфера деятельности (ниша) и ваши ежемесячные обороты.
Чем выше оборот и чем ниже риски возвратов (чарджбэков) в вашей нише, тем выгоднее условия.
Базовые ставки комиссии по сферам бизнеса:
Сфера бизнеса | Размер комиссии за транзакцию |
Рестораны и фастфуд | 2,6% |
Одежда и обувь | 2,7% |
Услуги связи и игры | 2,8% |
Билеты и фитнес | 2,9% |
Онлайн-образование | По договоренности |
Примечание: Для онлайн-образования условия обсуждаются персонально с менеджером, так как эта ниша имеет свою специфику рисков.
Согласно Федеральному закону №161-ФЗ «О национальной платежной системе», все операторы по приему платежей обязаны обеспечивать безопасность транзакций и защиту персональных данных клиентов. CloudPayments соответствует требованиям PCI DSS — международного стандарта безопасности для обработки платежных карт.
Как установить виджет CloudPayments на сайт
Для интеграции и использования платежного виджета нужно выполнить несколько шагов.
Пошаговая инструкция по подключению:
Подайте заявку на подключение к сервису CloudPayments — заполните форму на сайте провайдера
Пройдите интеграцию — воспользуйтесь готовым модулем для вашей CMS (WordPress, Bitrix, Tilda и др.) или добавьте программный код для самописного сайта
Проведите тестовые платежи — проверьте различные сценарии использования и успешность транзакций
Запуск и мониторинг — после успешного тестирования свяжитесь с менеджером и оставьте заявку на запуск сайта в продуктив
Техническая реализация
Благодарим экспертов компании IT Webstyle за помощь в разборе подключения виджета
Для установки виджета необходимо прописать на сайте скрипт в раздел <head>:
html
<script src="https://widget.cloudpayments.ru/bundles/cloudpayments.js"></script>
Используйте cloudpayments.js, чтобы оставаться совместимым с PCI DSS, гарантируя, что платежные реквизиты отправляются напрямую в CloudPayments, не затрагивая ваш сервер. Всегда загружайте cloudpayments.js с https://widget.cloudpayments.ru, чтобы соответствовать требованиям безопасности. Не включайте скрипт в пакет и не размещайте его самостоятельно.
Для появления платежной формы необходимо зарегистрировать функцию для вызова метода start:
javascript
public start(intentParams: CreateIntentCommand): Promise<WidgetResult>
И прописать вызов функции на событие, например, нажатие кнопки «Оплатить»:
javascript
$('#checkout').click(start);
В примере используется библиотека jQuery. Пример реализации запуска виджета без библиотеки jQuery:
javascript
document.querySelector('#checkout').onclick = start;
Базовый пример инициализации виджета:
javascript
const btn = document.getElementById("payButton");
const widget = new cp.CloudPayments();
const launchWidget = () => {
const intentParams = {
publicTerminalId: "your_terminal_id",
description: "Оплата заказа",
currency: "RUB",
amount: 1000,
culture: "ru-RU"
};
widget.start(intentParams).then(function(widgetResult) {
console.log('Результат оплаты:', widgetResult);
}).catch(function(error) {
console.log('Ошибка:', error);
});
};
btn.addEventListener('click', launchWidget);
Тестирование платежного виджета
Сразу после создания нового сайта в личном кабинете он находится в тестовом режиме работы — это значит, что платежи и прочие операции будут проходить в режиме эмуляции. Реального списания денежных средств не происходит.
Тестовые карты для проверки виджета:
Тип карты | Номер карты | Результат оплаты |
Visa с 3-D Secure | 4242 4242 4242 4242 | Успешно |
Mastercard с 3-D Secure | 5555 5555 5555 4444 | Успешно |
МИР с 3-D Secure | 2200 0000 0000 0004 | Успешно |
Visa с 3-D Secure | 4012 8888 8888 1881 | Недостаточно средств |
Mastercard с 3-D Secure | 5105 1051 0510 5100 | Недостаточно средств |
Visa без 3-D Secure | 4000 0000 0000 3055 | Успешно |
Mastercard без 3-D Secure | 5205 0000 0000 3055 | Успешно |
МИР без 3-D Secure | 2202 0000 0000 3055 | Успешно |
Использование тестовых карт позволяет проверить все сценарии оплаты: успешные транзакции, отказы по различным причинам, работу с 3-D Secure аутентификацией.
Советы экспертов Банкпрофи и IT Webstyle
Тестируйте виджет на всех устройствах. Перед запуском в продуктив обязательно проверьте работу виджета оплаты на мобильных устройствах, планшетах и десктопах в разных браузерах. Мобильный трафик составляет более 60% в e-commerce, поэтому мобильная версия виджета должна работать безупречно.
Настройте рекуррентные платежи. Если ваш бизнес предполагает регулярные списания (подписки, абонементы), обязательно используйте функцию рекуррентных платежей CloudPayments. Это увеличит LTV клиента и обеспечит стабильный денежный поток.
Интегрируйте онлайн-кассу. Согласно Федеральному закону №54-ФЗ, все онлайн-платежи должны пробиваться через онлайн-кассу с передачей данных в ФНС. CloudPayments поддерживает интеграцию с популярными операторами фискальных данных.
Используйте токенизацию. Токенизация позволяет сохранить платежные данные клиента в зашифрованном виде для последующих списаний без повторного ввода карты. Это повышает конверсию повторных покупок.
Мониторьте чарджбэки. Регулярно отслеживайте количество возвратов платежей по запросам клиентов. Высокий уровень чарджбэков может привести к повышению комиссии или блокировке аккаунта.
Оптимизируйте форму оплаты. Минимизируйте количество полей в форме оплаты. Для повторных покупок используйте оплату в один клик по сохраненному токену карты.
Безопасность и соответствие требованиям законодательства
CloudPayments соответствует международному стандарту безопасности PCI DSS Level 1, что гарантирует защиту платежных данных клиентов. Все транзакции обрабатываются в соответствии с требованиями:
Федерального закона №152-ФЗ «О персональных данных» — защита личной информации клиентов
Федерального закона №161-ФЗ «О национальной платежной системе» — регулирование деятельности платежных систем
Федерального закона №54-ФЗ «О применении контрольно-кассовой техники» — обязательная передача данных о расчетах в ФНС России
Подробнее о требованиях к онлайн-кассам можно узнать на официальном сайте ФНС России: nalog.gov.ru
Информацию о регулировании национальной платежной системы публикует Банк России: cbr.ru
Подключите интернет-эквайринг в CloudPayments на выгодных условиях через bankprofi.ru:
Индивидуальные тарифы от 2,6%
Быстрая интеграция за 1-2 дня
Поддержка всех популярных CMS
Персональный менеджер
Бесплатное тестирование.
Заключение от Банкпрофи ру и IT Webstyle
Платежный виджет CloudPayments — это современное решение для приема онлайн-платежей, которое увеличивает конверсию за счет отсутствия редиректов, адаптивного дизайна и встроенной валидации данных. Виджет подходит для бизнеса любого масштаба: от небольших интернет-магазинов до крупных сервисов с подписочной моделью.
Ключевые преимущества CloudPayments виджет:
Прием платежей без редиректа на сайте
Поддержка всех платежных систем и методов оплаты
Автоматическая адаптация под мобильные устройства
Встроенная валидация карточных данных
Поддержка рекуррентных платежей
Соответствие стандартам безопасности PCI DSS
Для подключения интернет-эквайринга в CloudPayments оставьте заявку через bankprofi.ru — компания поможет выбрать подходящий и оптимальный тариф и пройти интеграцию.
Что такое платежный виджет и зачем он нужен
Адаптация под любой сайт и приложение
