CloudPayments: интеграция на сайт, JS‑виджет, SDK, Apple/Google Pay

В этой статье — практическое руководство по тому, как выполнить CloudPayments подключение под ключ: выбрать методы оплаты (карты, СБП, Apple Pay/Google Pay), настроить JS‑виджет и мобильные SDK, оформить чеки по 54‑ФЗ и запустить подписки. Команда platezhi‑site.online помогает с техничной частью, документацией и прохождением модерации провайдера.

Table of contents

• Обзор платформы и когда выбирать CloudPayments
• Методы оплаты: карты, СБП, Apple/Google Pay, подписки
• Варианты интеграции: CloudPayments SDK/виджет
• Пошаговое CloudPayments подключение
• Быстрый старт: JS‑виджет на сайте
• Мобильные SDK: iOS и Android
• CMS и конструкторы: Tilda, WordPress, Bitrix и др.
• Подписки и сохранение карт
• 54‑ФЗ: чеки и онлайн‑касса
• Безопасность, PCI DSS и 3‑D Secure
• Тестирование, вебхуки и sandbox
• Типичные ошибки и чек‑лист перед релизом
• Альтернативы и сравнение с другими провайдерами
• Итоги и следующий шаг

Обзор платформы и когда выбирать CloudPayments

CloudPayments — российский провайдер для интернет‑эквайринга и СБП, подходящий интернет‑магазинам, сервисам подписок и мобильным приложениям. Его сильные стороны — быстрый старт через JS‑виджет, мобильные SDK, удобные уведомления (вебхуки), поддержка подписок, а также фискализация чеков по 54‑ФЗ.

Если вам нужен быстрый запуск приёма платежей на сайте, а также оплата в приложении и через СБП, CloudPayments интеграция сайта позволит покрыть все ключевые сценарии из одной панели, без «зоопарка» решений.

Методы оплаты: карты, СБП, Apple/Google Pay, подписки

Ниже — краткая сводка по методам, с которыми обычно стартуют. Актуальная доступность методов зависит от банка клиента и текущих ограничений, проверяйте в кабинете провайдера.

Способ	Где используется	Вариант интеграции	Комментарии
Банковские карты	Сайт, приложение	JS‑виджет, API, SDK	Поддержка 3‑D Secure 2; токенизация для подписок
СБП CloudPayments	Сайт, мобильные	JS‑виджет, API	Платёж по QR/по ссылке; быстрый чек‑аут для РФ
Apple Pay	iOS, Safari	JS‑виджет (Web), SDK (iOS)	Требует валидации домена и сертификатов Apple
Google Pay	Android, Chrome	JS‑виджет (Web), SDK (Android)	Доступность зависит от экосистемы; уточняйте у провайдера
Счёт/инвойс по ссылке	Везде	Платёжная ссылка	Удобно для B2B и ручных оплат
Подписки CloudPayments	Сайт, приложение	Токенизация, рекуррентные списания	Хранение карты у провайдера, оферта и уведомления

Полезно также ознакомиться с общим обзором способов оплаты в РФ: методы оплаты — карты и СБП.

Варианты интеграции: CloudPayments SDK/виджет

Есть два основных пути: фронтенд‑виджет для сайта и нативные мобильные SDK. Для сложных сценариев доступен прямой API и сервер‑к‑серверу подтверждения.

![Схема интеграции CloudPayments: Клиент → JS‑виджет/SDK → CloudPayments API → Вебхуки → Сервер магазина]

• JS‑виджет: быстро внедряется, минимизирует контакт с карточными данными (снижает требования к PCI), содержит готовые экраны оплат, Apple/Google Pay и СБП.
• SDK (iOS/Android): нативный UX, поддержка 3‑D Secure, Apple/Google Pay внутри приложения.
• Вебхуки: подтверждают финальный статус платежа на вашем сервере; используйте их как «источник истины».
• Фискализация: передавайте состав корзины и налоговые ставки для чеков 54‑ФЗ.

О безопасности и 3‑DS подробно — в нашем обзоре PCI DSS и 3‑D Secure.

Пошаговое CloudPayments подключение

1. Регистрация и идентификация. Заполните профиль юрлица/ИП, загрузите документы, укажите домены.

2. Настройка проекта. Создайте проект (сайт/приложение), получите PublicId и Secret API Key, добавьте URL‑адреса для вебхуков (оплаты, возвраты, подписки).

3. Режимы и тесты. Проверьте sandbox на тестовых картах/СБП, затем включите боевой режим. Обязательно настройте повторную доставку вебхуков и проверку подписи.

4. Методы оплаты. Включите карты, СБП CloudPayments, Apple Pay Google Pay CloudPayments (при доступности). Для Apple Pay подтвердите домен и загрузите сертификаты; для Google Pay настройте платежный профиль.

5. 54‑ФЗ и чеки. Подготовьте передачу состава заказа (nomenclature, price, quantity, tax) в момент авторизации — см. раздел ниже и наш гайд по фискализации.

6. Техническая приёмка. Проверьте успешные/неуспешные кейсы, возвраты, частичные возвраты, отмены до списания, подписки, дубли запросов.

Подробности по универсальным шагам подключения — в материале подключение платёжной системы к сайту.

Быстрый старт: JS‑виджет на сайте

Подключение через JS — самый короткий путь, чтобы «оживить» оплату на странице оформления заказа.

Основные шаги:

• Подключите скрипт виджета и инициализируйте платёж с параметрами amount, currency, description, accountId/invoiceId.
• Передайте объект Receipt (позиции, НДС, способ расчёта) — чтобы чеки 54‑ФЗ CloudPayments формировались корректно.
• Включите методы: карты, СБП, Apple Pay/Google Pay (если доступны). Отобразите иконки и подсказки клиенту.
• Обработайте события onSuccess/onFail на фронте, но окончательный статус фиксируйте по вебхуку на сервере.
• Хранение карт для подписок — через токенизацию: после успешной первой оплаты получаете токен карты и привязываете его к пользователю.

![UI JS‑виджета CloudPayments с методами: Карта, СБП, Apple Pay, Google Pay]

Совет: не завязывайтесь на фронтенд‑ответы — используйте вебхуки и проверку подписи, чтобы защититься от подмен.

Мобильные SDK: iOS и Android

Нативные SDK обеспечивают лучший UX в приложении и корректную обработку 3‑D Secure 2.

• iOS: интеграция с Apple Pay требует Merchant ID, Payment Processing Certificate и валидации домена. SDK упрощает работу с токенами, чеками и 3‑DS.
• Android: SDK поддерживает карты, Google Pay (если доступно), 3‑DS и фолбэки на оплату картой/СБП.
• Серверная часть: оформляйте заказы и финализируйте статусы по вебхукам; не храните чувствительные данные.

CMS и конструкторы: Tilda, WordPress, Bitrix и др.

Для популярных платформ есть готовые модули и инструкции — это снижает сроки ввода в эксплуатацию.

• CloudPayments Tilda: у конструктора есть готовая интеграция форм и корзины. Подробно — в нашем гайде Платежи на Tilda.
• CloudPayments WordPress (WooCommerce): подключаем модуль, настраиваем ключи, методы оплаты, чеки. Смотрите WordPress/WooCommerce.
• 1C‑Bitrix: гибкая настройка статусов, СБП и чеков — см. Bitrix.
• OpenCart/PrestaShop: модули и листинг заказов — см. OpenCart/PrestaShop.
• Shopify, Wix, Webflow: рассматриваем платёжные ссылки/вебхуки и сторонние сценарии — см. Shopify, Wix, Webflow.

Если вы только выбираете стек, посмотрите наше сравнение провайдеров РФ.

Подписки и сохранение карт

Подписки CloudPayments реализуются через токенизацию карты и рекуррентные списания по расписанию. Важные моменты:

• Ясная оферта и уведомления клиенту о регулярных списаниях.
• Первичная оплата с 3‑DS, дальнейшие списания — без участия клиента (возможна периодическая повторная аутентификация по требованиям банка).
• Управление токенами: отвязка, смена карты, попытки при отклонении.

Про дизайн подписочной модели — материал Рекуррентные платежи (подписки).

54‑ФЗ: чеки и онлайн‑касса

Чтобы чеки 54‑ФЗ CloudPayments формировались корректно:

• Передавайте состав заказа (наименования, количество, цены, ставки НДС, признак способа оплаты/расчёта) при создании платежа.
• Решите, где фискализировать: через провайдера (удобно) или своей кассой (гибко, но сложнее).
• Обрабатывайте возвраты: частичные и полные, с формированием корректировочных чеков.

Подробнее о сценариях и типичных ошибках — в нашем гиде 54‑ФЗ: онлайн‑касса и фискализация.

Безопасность, PCI DSS и 3‑D Secure

При использовании виджета и SDK карточные данные обрабатываются на стороне провайдера — это снижает нагрузку по соответствию PCI. Провайдер поддерживает 3‑D Secure 2 для аутентификации держателей карт. Рекомендуем:

• Проверять подпись уведомлений (HMAC) на сервере.
• Хранить только безопасные токены, не PAN/CVV.
• Планировать UX с учётом челленджа 3‑DS.

Разбор стандартов и рисков — в статье PCI DSS и 3‑DS.

Тестирование, вебхуки и sandbox

Покройте автотестами полный цикл:

• Успешная оплата, отклонение, отмена до списания, фрод‑челлендж, СБП‑оплата, подписка, возврат.
• Идемпотентность: повторные запросы при сетевых сбоях.
• Вебхуки: ретраи, проверка подписи, консистентность статусов заказа.
• Фискализация: корректность позиций, НДС, суммы при частичных возвратах.

Сценарии, payload и чек‑листы — в разделе Тестирование, вебхуки и sandbox.

Типичные ошибки и чек‑лист перед релизом

• Неверный PublicId/секретный ключ между тестом и боем.
• Отсутствует обработка ретраев вебхуков (дубли статусов/заказов).
• apple‑domain‑association не на месте — Apple Pay не отображается.
• Конфликт currency/amount или дублирующийся invoiceId.
• Не передаются позиции для чеков — фискализация падает.
• Не настроена страница результата/thank‑you — пользователь теряется после редиректа.
• Отсутствует fallback: если Apple/Google Pay недоступны, предложите карту/СБП.

Перед релизом сверяйтесь с общим чек‑листом и логируйте все шаги: инициирование, редиректы, вебхуки, фискализацию.

Альтернативы и сравнение с другими провайдерами

В ряде кейсов альтернативные провайдеры могут подойти лучше по тарифам, методам или поддержке CMS. Сравните сценарии с:

• ЮKassa — сильная экосистема для e‑commerce.
• Тинькофф Касса — хорошие модули для CMS, СБП и подписки.
• Наше сравнение провайдеров РФ поможет выбрать по критериям: методы оплаты, фискализация, тарифы, SLA.

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

CloudPayments интеграция сайта через JS‑виджет и мобильные SDK закрывает ключевые потребности: карты, СБП, Apple Pay Google Pay CloudPayments, подписки и чеки 54‑ФЗ CloudPayments. Чтобы запустить быстро и без ошибок, важно грамотно настроить вебхуки, фискализацию и тестирование.

Нужна помощь с архитектурой, настройкой и модерацией? Мы подключим CloudPayments под ключ, настроим Tilda/WordPress/Bitrix и протестируем все кейсы. Оставьте заявку — и уже через несколько дней у вас будет работающий и безопасный приём платежей.