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

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

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

Проверить наличие проблемы можно, симулируя медленное или прерывающееся соединение с помощью инструментов разработчика в браузере (например, Google Chrome DevTools, вкладка Network, режим "Slow 3G" или "Offline"). Если при нестабильном соединении способы оплаты не отрабатывают или не показываются корректно, проблема подтверждается.

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

Основная идея решения

Мы не можем гарантировать стопроцентное определение состояния сети на сервере, но в браузере JavaScript позволяет обнаружить потерю соединения. Мы будем динамически отключать способы оплаты в WooCommerce при обнаружении проблем с интернетом на стороне клиента.

Пошаговое решение

1. Добавим JavaScript, который отслеживает состояние сети и при потере соединения скрывает способы оплаты на странице оформления заказа.
2. Добавим PHP-код, который в случае отключения клиента запрещает оформление заказа через недоступные способы оплаты (на всякий случай).

Код JavaScript для отключения способов оплаты

jQuery(document).ready(function($){
    function togglePaymentMethods(online) {
        if(!online) {
            // Скрываем блок с платежными способами
            $('#payment').hide();
            // Показываем уведомление
            if($('#no-internet-message').length === 0) {
                $('<div id="no-internet-message" style="color:red; margin-bottom:15px; font-weight:bold;">Проблемы с интернет-соединением. Оплата временно недоступна.</div>').insertBefore('#payment');
            }
        } else {
            $('#payment').show();
            $('#no-internet-message').remove();
        }
    }

    // Первичная проверка
    togglePaymentMethods(navigator.onLine);

    // Отслеживаем события изменения состояния сети
    window.addEventListener('online', function() {
        togglePaymentMethods(true);
    });
    window.addEventListener('offline', function() {
        togglePaymentMethods(false);
    });
});

PHP-код для дополнительной проверки на уровне сервера

add_filter('woocommerce_available_payment_gateways', 'disable_payment_if_offline');
function disable_payment_if_offline($gateways) {
    // Проверяем наличие специального поля из JS
    if ( isset($_POST['internet_status']) && $_POST['internet_status'] === 'offline' ) {
        // Отключаем все способы оплаты
        return array();
    }
    return $gateways;
}

// Добавим поле для передачи статуса в форме
add_action('woocommerce_checkout_before_order_review', function() {
    echo '<input type="hidden" name="internet_status" id="internet_status" value="online" />';
});

// Обновим значение hidden поля из JS
add_action('wp_footer', function() {
    ?>
    <script>
    jQuery(document).ready(function($){
        function updateInternetStatus() {
            var status = navigator.onLine ? 'online' : 'offline';
            $('#internet_status').val(status);
        }
        updateInternetStatus();
        window.addEventListener('online', updateInternetStatus);
        window.addEventListener('offline', updateInternetStatus);
    });
    </script>
    <?php
});

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

• Откройте страницу оформления заказа в WooCommerce.
• Откройте DevTools (F12) и во вкладке Network выберите «Offline» или «Slow 3G».
• Убедитесь, что способы оплаты скрываются, а появляется сообщение о проблемах с интернетом.
• Верните соединение в норму — способы оплаты должны появиться обратно.
• Попробуйте оформить заказ с отключённым соединением — заказ не должен пройти.

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

• Способы оплаты не скрываются при потере связи: Проверьте, что jQuery доступен и код JS загружается именно на странице оформления заказа.
• Сообщение не появляется: Убедитесь, что элемент с id payment существует в теме, в противном случае подкорректируйте селектор.
• Заказ оформляется при отсутствии интернета: Проверьте корректность передачи поля internet_status и фильтрации способов оплаты на сервере.
• Конфликты с другими плагинами оплаты: Тестируйте отдельно, при необходимости уточните селекторы или добавьте исключения.

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

• Не полагайтесь только на клиентскую проверку — всегда валидируйте данные на сервере.
• Для повышения UX используйте информативные сообщения и возможность повторной проверки состояния сети.
• Минимизируйте JS-код, чтобы не замедлять страницу оформления заказа.
• Регулярно тестируйте совместимость с обновлениями WooCommerce и используемых платежных шлюзов.

Сравнение вариантов решения