Виджет CloudPayments и Public ID: настройка платежной формы шаг за шагом

Получить CloudPayments бесплатно

Виджет CloudPayments и Public ID: настройка платежной формы шаг за шагом

Table of contents

Что такое CloudPayments виджет и Public ID

CloudPayments виджет — это готовая платежная форма, которую легко встроить на сайт или в веб-приложение. Он поддерживает карты, токенизацию, 3‑D Secure, а также дополнительные способы оплаты, включая СБП. В документации и поисковых запросах вы можете встретить формулировки вроде «widget cloudpayments», «cloudpayments виджет» или «widget cloudpayments ru» — речь всегда про один и тот же модуль оплаты.

Public ID — это публичный идентификатор вашего магазина в CloudPayments. Он передается на клиентской стороне и нужен виджету, чтобы понять, на какой мерчант и на какой контракт инициировать платеж. Не путайте Public ID с секретным ключом — секрет хранится только на вашем сервере и используется для формирования подписи.

Подробнее о самой системе и возможностях сервиса читайте в материале что такое CloudPayments.

Где найти Public ID в личном кабинете

Чтобы настроить cloudpayments виджет, сначала получите Public ID:

  1. Зайдите в личный кабинет CloudPayments. Если еще не подключены — посмотрите пошаговый гайд как подключить CloudPayments.
  2. Перейдите в раздел «Настройки» → «Интеграция» в вашем My CloudPayments (личный кабинет).
  3. Скопируйте значение Public ID. Для продакшна используйте боевой Public ID, а для тестов — тестовый.
  4. Проверьте, что домены, с которых грузится виджет, добавлены в список разрешенных источников (если политика безопасности это требует).

Варианты отображения виджета

CloudPayments виджет гибко встраивается в интерфейс:

Таблица выбора сценария:

Сценарий Когда использовать Плюсы Минусы
Модальный виджет Обычные разовые платежи Быстрый старт, минимум кода Требует JS
Встроенная форма Макс. контроль над UI Бесшовный UX Чуть сложнее верстка
Ссылка на оплату Нет разработчика или JS Запуск за минуты Меньше контроля над UX
Подписки/токены Регулярные списания Повышает LTV, меньше трения Нужна серверная часть

Быстрый старт: минимальная интеграция

Ниже — базовый алгоритм, как добавить widget CloudPayments на страницу и инициировать оплату.

  1. Подключите скрипт виджета:
<script src="https://widget.cloudpayments.ru/bundles/cloudpayments"></script>
  1. Добавьте кнопку оплаты и обработчик:
<button id="payBtn">Оплатить</button>
<script>
  document.getElementById('payBtn').addEventListener('click', function () {
    var widget = new cp.CloudPayments();
    widget.pay('charge', // charge = разовый платеж, auth = двухстадийный
      {
        publicId: 'pk_XXXXXXXXXXXXXXXXXXXXXXXXX', // ваш Public ID
        description: 'Оплата заказа №12345',
        amount: 1490.00,
        currency: 'RUB',
        invoiceId: '12345', // ваш ID заказа
        accountId: 'user_789', // ID плательщика в вашей системе
        skin: 'classic' // оформление формы
      },
      {
        onSuccess: function (options) { /* показать «успешно» */ },
        onFail: function (reason) { /* показать ошибку */ },
        onComplete: function (paymentResult) { /* общий финальный коллбек */ }
      }
    );
  });
</script>
  1. На сервере настройте прием уведомлений (webhooks) и проверку подписи для итогового подтверждения статуса оплаты. Подробности — в CloudPayments API: документация.

Подбор параметров:

Параметр Что это Пример
publicId Ваш публичный идентификатор pk_XXXXXXXXXXXXXXXX
amount Сумма платежа 1490.00
currency Валюта ISO 4217 RUB, KZT, USD
description Описание платежа «Оплата подписки»
invoiceId Номер заказа 12345
accountId Идентификатор покупателя user_789

Совет: если собираете email/телефон — передавайте их в дополнительных полях, это поможет снизить риск фрода и повысить конверсию 3‑D Secure.

Ссылка на оплату как альтернатива виджету

Если у вас нет возможности внедрять JS или нужны быстрые платежи «по ссылке», используйте «cloudpayments ссылка на оплату». Базовая страница приема платежей: https://c.cloudpayments.ru/payments (часто ищут как «https c cloudpayments ru payments»). Вы формируете URL с параметрами заказа и отдаете клиенту — он перейдет на защищенную форму на стороне CloudPayments.

Этот подход полезен для инвойсов, мессенджеров и email-счетов. При этом вы также можете отслеживать статусы через API и вебхуки. Для массовых рассылок ссылка удобна, но для конверсии в e‑commerce обычно лучше встраиваемый cloudpayments виджет.

Тестирование и отладка

Перед запуском пройдите чек-лист:

После успешных тестов переключитесь на боевой Public ID и боевой секретный ключ в серверной части.

Продвинутые возможности: токены, подписки, СБП

Если клиент попросит возврат — оформляйте его через кабинет или API, руководство: Возврат денег CloudPayments.

Безопасность, чеки и соответствие 54‑ФЗ

CloudPayments сертифицирован по PCI DSS, а данные карт обрабатываются на стороне провайдера. На вашей стороне:

Прозрачные комиссии и условия смотрите в разделе Тарифы и комиссии CloudPayments.

Уведомления и проверка платежей

Частые ошибки и их решение

Если затруднились — обратитесь в поддержку CloudPayments: контакты и приложите логи запроса/ответа.

Тарифы, плагины и бренд CloudPayments

Для новых пользователей полезно познакомиться с обзором сервиса — что такое CloudPayments.

Итоги и следующий шаг

Виджет CloudPayments — быстрый и безопасный способ принять оплату на сайте. Все, что нужно для старта: Public ID, подключенный скрипт виджета и базовая серверная логика для подтверждения статусов. Если код недоступен, используйте «cloudpayments ссылку на оплату» на https://c.cloudpayments.ru/payments. Далее вы сможете расширять функциональность: токенизация, подписки, СБП, международные платежи и автоматические чеки.

Готовы принять первую оплату? Пройдите быструю настройку по гайду как подключить CloudPayments, а детали по API и тестам — в документации и разделе тестовых карт. Удачных конверсий!

Получить CloudPayments бесплатно