WooCommerce: автоматическое отключение способов оплаты при проблемах с интернет-соединением

Диагностика проблемы с оплатой из-за нестабильного интернет-соединения

В интернет-магазинах на WooCommerce часто встречается ситуация, когда пользователи пытаются оплатить заказ, но из-за временных проблем с интернет-соединением платеж не проходит или возникает ошибка. Это приводит к неудобствам, увеличению числа брошенных корзин и росту обращений в поддержку.

Чаще всего проблема проявляется на стороне клиента (например, нестабильное соединение, таймауты) или на стороне платёжного шлюза (превышение времени ожидания ответа). WooCommerce по умолчанию не учитывает состояние интернет-соединения пользователя, что может привести к попыткам оплаты, которые обречены на провал.

Как проверить наличие проблемы на вашем сайте

• Используйте инструменты разработчика браузера (Network) для мониторинга запросов к платёжным шлюзам. Если запросы не проходят или долго висят, это признак нестабильного соединения.
• Проверьте логи WooCommerce и платежного шлюза на наличие таймаутов или ошибок.
• Опрашивайте пользователей о проблемах с оплатой, чтобы выявить закономерности, например, связь с определённым регионом или устройством.

Пошаговое решение: как автоматически отключать способы оплаты при плохом соединении

Цель — предотвратить попытки оплаты через методы, которые потенциально не сработают из-за проблем с интернет-соединением, и показать пользователю предупреждение.

Реализуем проверку соединения клиента через JavaScript перед отправкой формы оплаты. Если соединение плохое или отсутствует, отключаем способы оплаты и показываем сообщение.

Шаг 1. Добавьте JavaScript для проверки соединения

document.addEventListener('DOMContentLoaded', function() {
    const checkoutForm = document.querySelector('form.checkout');
    if (!checkoutForm) return;

    checkoutForm.addEventListener('submit', function(e) {
        if (!navigator.onLine) {
            e.preventDefault();
            alert('Похоже, у вас нет интернет-соединения. Пожалуйста, проверьте подключение перед оплатой.');
            return false;
        }
    });
});

Это простой способ проверить, есть ли активное соединение в момент отправки формы.

Шаг 2. Отключаем способы оплаты при плохом соединении на стороне сервера

Чтобы избежать обхода проверки, добавим фильтр PHP, который отключит все способы оплаты, если запрос пришёл с клиента без интернет-соединения (например, через AJAX или по IP). Поскольку напрямую проверить соединение клиента на сервере нельзя, рассмотрим отключение для случаев, когда приходит специальный параметр из JS.

add_filter('woocommerce_available_payment_gateways', 'disable_payment_gateways_if_offline');
function disable_payment_gateways_if_offline($available_gateways) {
    if (isset($_POST['connection_status']) && $_POST['connection_status'] === 'offline') {
        return [];
    }
    return $available_gateways;
}

Этот код ожидает, что JS добавит в POST-параметры connection_status=offline, если соединение отсутствует.

Шаг 3. Интеграция JS с отправкой формы для передачи статуса соединения

document.addEventListener('DOMContentLoaded', function() {
    const checkoutForm = document.querySelector('form.checkout');
    if (!checkoutForm) return;

    checkoutForm.addEventListener('submit', function(e) {
        const connectionStatusInput = document.querySelector('input[name="connection_status"]');
        if (!connectionStatusInput) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'connection_status';
            checkoutForm.appendChild(input);
        }

        checkoutForm.querySelector('input[name="connection_status"]').value = navigator.onLine ? 'online' : 'offline';

        if (!navigator.onLine) {
            e.preventDefault();
            alert('Нет интернет-соединения. Оплата временно недоступна.');
            return false;
        }
    });
});

Проверка результата после внедрения

Чтобы убедиться, что решение работает корректно:

• Отключите интернет на устройстве клиента и попробуйте оформить заказ. Форма должна не отправляться, а выводиться предупреждение.
• При отключённом соединении способы оплаты должны быть недоступны (проверяется если отправлять форму с параметром connection_status=offline).
• При стабильном соединении все способы оплаты доступны и работают как обычно.
• Проверьте логи на предмет ошибок при отправке формы.

Частые ошибки и как их исправить

• JS не срабатывает на странице оформления заказа
  Проверьте, что скрипт подключён корректно и нет конфликтов с другими плагинами/тема. Используйте консоль браузера для поиска ошибок.
• Форма всё равно отправляется при отсутствии сети
  Вероятно, событие submit не отменяется. Убедитесь, что вызывается e.preventDefault() и возвращается false.
• Способы оплаты не отключаются на сервере
  Проверьте, что параметр connection_status передаётся и корректно обрабатывается фильтром woocommerce_available_payment_gateways.
• Пользователь видит сообщение, но способы оплаты не скрываются
  Покажите способы оплаты через JS, а не только через сервер, или доработайте логику скрытия на клиенте CSS/JS.

Практические советы по безопасности и производительности

• Не используйте данную проверку как единственный метод защиты — она служит для улучшения UX, а не для безопасности транзакций.
• Проверка navigator.onLine не гарантирует 100% достоверности — это ориентировочный индикатор соединения браузера.
• Минимизируйте количество запросов и не блокируйте UI без необходимости — используйте асинхронные проверки.
• Кэшируйте скрипты и используйте CDN для ускорения загрузки страницы.

Сравнение вариантов реализации проверки состояния соединения