CloudPayments
Войти

Оплата на Webflow: интеграция виджетов и сторонних провайдеров

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

Оплата на Webflow: интеграция виджетов и сторонних провайдеров

Планируете продавать на сайте, собранном в Webflow, и ищете удобный способ принимать оплату картами и через СБП? Встроенная Ecommerce Webflow официально ориентирована на Stripe/PayPal и работает не во всех странах. Для России и СНГ оптимальный путь — подключить сторонних провайдеров (ЮKassa, CloudPayments, Тинькофф Касса и др.) через виджеты, кнопки и hosted checkout. Разбираем, как подключить оплату Webflow без кодинга или с минимальным кодом.

Зачем подключать платежи к Webflow

  • Ускорение конверсии: сокращаете путь от просмотра до оплаты, особенно при продаже цифровых продуктов, консультаций, образовательных курсов и услуг.
  • Гибкость: Webflow позволяет красиво оформить checkout-пути, а сторонние провайдеры добавляют карты, СБП, Apple Pay/Google Pay.
  • Соответствие закону: через интеграторов доступна фискализация по 54‑ФЗ, автоматическая отправка чеков и интеграция с ОФД.

Если вам нужен общий чек-лист по выбору провайдера и типам встраивания, смотрите наш гид: Подключение платежной системы к сайту.

Подходы к приему платежей в Webflow

Сценарии, которые чаще всего используют для платежей Webflow:

  1. Встраиваемый виджет/кнопка оплаты
  • Быстрый старт: вставка кода от провайдера на страницу/в шаблон Webflow.
  • Поддержка карт, СБП, токенизации для повторных платежей.
  1. Hosted checkout (перенаправление)
  • Покупатель переходит на защищенную страницу провайдера и возвращается на ваш сайт после оплаты.
  • Минимальные требования к PCI, удобно для MVP.
  1. Линки на оплату/инвойсы
  • Генерируете ссылку на оплату в кабинете провайдера и размещаете ее в кнопке «Купить».
  • Подходит для простых офферов без сложного корзинного сценария.
  1. Полу‑кастомная интеграция через API
  • Для сложных воронок, динамического расчета, купонов, доставок.
  • Требует бэкенда или сервера/серверлесс-функций.

Подробнее о различиях и комиссиях — в материале Сравнение провайдеров для РФ.

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

Как подключить оплату Webflow: пошагово

  1. Определите сценарий
  • Единичные оплаты без корзины? Начните с кнопок/виджетов.
  • Корзина/несколько позиций? Рассмотрите hosted checkout или легкий API.
  1. Выберите провайдера и методы оплаты
  • Для РФ: ЮKassa, CloudPayments, Тинькофф Касса — популярный выбор.
  • Для международных платежей — Stripe/PayPal (ограничения применяются). См. интеграция Stripe Webflow.
  1. Настройте проект провайдера
  1. Подключите фискализацию
  1. Вставьте код виджета/кнопки в Webflow
  • Через Embed или Custom Code сайта/страницы.
  • Проверьте домены в настройках провайдера (список разрешенных источников).
  1. Настройте редиректы
  • success_url/fail_url/notify_url на страницы «Спасибо» и «Ошибка». В Webflow удобно использовать /checkout/success и /checkout/fail.
  1. Добавьте обработку статусов
  1. Протестируйте в песочнице
  • Прогон позитивных и негативных сценариев, 3‑D Secure, СБП.
  1. Запустите в продакшен
  • Включите боевые ключи, проверьте чеки и уведомления.

Виджеты и кнопки: CloudPayments, ЮKassa, Тинькофф, Stripe

  • CloudPayments Webflow кнопка

    • Быстрый вариант: JS‑виджет открывается модальным окном, поддерживает карты, Apple Pay/Google Pay, СБП (через QR).
    • Инструкция и тонкости встраивания: CloudPayments интеграция.

  • ЮKassa (бывш. Яндекс.Касса)

    • Кнопка/форма, страницы оплаты, СБП, рассрочка/сплит доступна для части МСС.
    • Пошагово: ЮKassa — как подключить.

  • Тинькофф Касса

  • Интеграция Stripe Webflow

    • Родная Ecommerce Webflow работает со Stripe/PayPal, но недоступна для ряда регионов.
    • Альтернативы: Stripe Payment Links (вставка ссылки в кнопку), Stripe Checkout (перенаправление), Stripe Elements (нужен бэкенд для Payment Intents).
    • Для рынков за пределами РФ — отличный вариант, но проверьте доступность мерчанта и валют.

Совет: храните параметры товара (название, цена, SKU) в CMS Webflow и передавайте их в виджет через data‑атрибуты или map в JS. Так проще масштабировать каталог без Ecommerce.

Checkout Webflow: перенаправление на платежную страницу

Hosted checkout снижает требования по PCI DSS: вы не обрабатываете номера карт на своем домене. Сценарий:

  • Кнопка «Купить» на лендинге вызывает редирект на платежную страницу провайдера.
  • После оплаты клиента возвращают на ваш домен: /checkout/success.
  • Вы получаете webhook о статусе и показываете подтверждение заказа.

![Схема checkout-потока Webflow → провайдер → возврат на сайт]

СБП в Webflow и оплата картами

  • СБП Webflow: доступна через ЮKassa, Тинькофф, CloudPayments. Может отображаться как QR/линк, иногда как push в приложении банка.
  • Карты: поддержка МИР/Visa/MC зависит от провайдера и юрисдикции. В России ключевые провайдеры работают с МИР.
  • Мобильные кошельки: Apple Pay/Google Pay включаются в настройках провайдера и отображаются автоматически в виджете.

Подробнее о сценариях — в материале Методы оплаты: карты и СБП.

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

Для ecommerce Webflow оплата в РФ требуется пробивать чек и отправлять его покупателю:

  • Проверьте, что провайдер поддерживает фискализацию по 54‑ФЗ и интеграцию с ОФД.
  • Передавайте корректные реквизиты чека: предмет расчета, ставка НДС, признак способа оплаты (полный/предоплата), email/телефон покупателя.
  • Для услуг — корректный признак предмета расчета, для подписок — рекуррентные чеки.

Глубокий разбор требований: 54‑ФЗ, онлайн‑касса, фискализация.

Подписки и рекуррентные платежи

  • Модель: первый платеж — токенизация карты, далее автосписания по расписанию.
  • Поддерживается ЮKassa/CloudPayments/Тинькофф (проверьте MCC и оферту).
  • В Webflow храните статус подписки в CMS/CRM, меняйте доступ к контенту по webhook.

Как это реализовать: Рекуррентные платежи и подписки.

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

  • Встроенный виджет или hosted checkout — самый безопасный путь: данные карт обрабатывает провайдер.
  • Обязательно включите 3‑D Secure 2.0 для снижения фрода и чарджбеков.
  • Не храните PAN/CSC у себя, используйте токены.

См. чек‑лист: PCI DSS и 3‑D Secure.

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

  • Песочницы провайдеров: тестовые карты, сценарии 3DS, имитация отказов.
  • Webhooks: подписка на события «payment.succeeded», «payment.failed», «refund.succeeded».
  • Аналитика: передавайте order_id/utm в метки платежа для склейки с веб‑аналитикой.

Подробный гайд: Тестирование, webhook’и и sandbox.

Сравнение провайдеров для РФ (таблица)

Ниже — обобщенная картина. Конкретные тарифы уточняйте у провайдеров.

Провайдер Способы 54‑ФЗ Подписки Встраивание Комментарии
ЮKassa Карты, СБП, Apple/Google Pay Да Да Виджет, Hosted Широкая экосистема, сплит-платежи для части МСС
CloudPayments Карты, СБП (QR), Apple/Google Pay Да Да Виджет, Hosted Удобный JS‑виджет, гибкий кастом
Тинькофф Касса Карты, СБП, Apple/Google Pay Да Да Кнопка, Hosted Сильная поддержка, инвойсы/линки
Stripe Карты, Apple/Google Pay Нет для РФ Да Elements, Checkout Ограничения по регионам и валютам

Сравнительная методология и обновления: Сравнение провайдеров для РФ.

Частые ошибки и как их избежать

  • Отсутствие success/fail страниц. Решение: создайте /checkout/success и /checkout/fail, настройте редиректы.
  • Непередача контактных данных для чеков. Решение: в форме заказа собирайте email/телефон и передавайте провайдеру.
  • Отсутствие обработки webhook. Решение: используйте no‑code (Make/Zapier) или легкий серверлесс для смены статуса заказа.
  • Дубли платежей при рефреше. Решение: используйте idempotency key/order_id и проверку статуса перед повтором.
  • Несоответствие 54‑ФЗ. Решение: проверьте настройки фискализации и номенклатуры; см. 54‑ФЗ: фискализация.

Когда стоит выбрать другую платформу

Если нужна полноценная корзина, склад, сложные доставки и маркетплейс‑логика, обратите внимание на:

Webflow остаётся сильным для контентных сайтов, лендингов и легких магазинов, где оплата — «быстрый чек‑аут».

Стоимость и сроки внедрения

  • MVP через hosted checkout или кнопку: 1–3 дня (включая настройку 54‑ФЗ, СБП, страницы «Спасибо»).
  • Виджет с динамикой из CMS: 3–7 дней (товары, промокоды, webhooks, CRM).
  • Подписки/рекуррентные списания: 5–10 дней (токенизация, расписания, уведомления, чеки).
  • Кастом с бэкендом: 2–4 недели.

Затраты зависят от провайдера (комиссии 2–3%+), объема интеграции и требований к дизайну checkout Webflow.

Вывод и следующий шаг

Платежи Webflow легко запускать через виджеты и hosted checkout: вы получаете карты, СБП, Apple/Google Pay, чеки по 54‑ФЗ и подписки — без тяжелой разработки. Начните с выбора провайдера, подключите кнопку/виджет, настройте редиректы и webhooks и протестируйте в песочнице.

Нужна помощь с выбором и внедрением? Оставьте заявку — подключим оплату на Webflow «под ключ», учтем 54‑ФЗ и настроим аналитику. Также у нас есть готовые инструкции: ЮKassa, CloudPayments, Тинькофф Касса и общий гайд Подключение платежной системы к сайту.

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