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

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

Проблема: покупатели на WooCommerce жалуются, что при слабом или прерывающемся интернет-соединении способы оплаты либо не отображаются, либо процесс оплаты зависает. Это ведёт к потерям продаж и негативному UX.

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

Чтобы проверить, действительно ли проблема связана с сетью, используйте инструменты разработчика браузера (F12) на вкладке Network, имитируя плохое соединение (Throttling). Если при симуляции низкой скорости или потере соединения способы оплаты исчезают, значит, нужно реализовать автоматическое отключение проблемных методов.

Пошаговое решение: отключение способов оплаты при отсутствии интернет-соединения на клиенте

1. Определяем доступность интернета через JavaScript

JavaScript позволяет проверить, доступен ли интернет на клиенте через событие navigator.onLine. Но оно иногда неточно. Дополнительно можно сделать запрос к надежному URL.

function checkOnlineStatus() {
  return new Promise((resolve) => {
    if (!navigator.onLine) {
      resolve(false);
      return;
    }
    fetch('https://www.google.com/favicon.ico', { method: 'HEAD', mode: 'no-cors' })
      .then(() => resolve(true))
      .catch(() => resolve(false));
  });
}

2. Скрываем способы оплаты при отсутствии интернета

Добавим скрипт в тему или плагин, который при загрузке и смене состояния сети будет скрывать блоки способов оплаты WooCommerce.

document.addEventListener('DOMContentLoaded', () => {
  const updatePaymentMethodsVisibility = () => {
    checkOnlineStatus().then(isOnline => {
      const paymentMethods = document.querySelectorAll('#payment div.payment_method');
      paymentMethods.forEach(method => {
        method.style.display = isOnline ? '' : 'none';
      });
      const notice = document.getElementById('offline-payment-notice');
      if (!isOnline) {
        if (!notice) {
          const msg = document.createElement('p');
          msg.id = 'offline-payment-notice';
          msg.style.color = 'red';
          msg.textContent = 'Оплата недоступна без подключения к интернету. Пожалуйста, проверьте соединение.';
          document.querySelector('form.checkout').prepend(msg);
        }
      } else if (notice) {
        notice.remove();
      }
    });
  };

  updatePaymentMethodsVisibility();
  window.addEventListener('online', updatePaymentMethodsVisibility);
  window.addEventListener('offline', updatePaymentMethodsVisibility);
});

3. Фильтрация способов оплаты на сервере для дополнительной безопасности

Клиентский код можно обойти, поэтому рекомендуем также фильтровать способы оплаты на сервере, например, отключать их, если в запросе к серверу не подтверждена доступность интернета. Это сложно реализовать без дополнительного API, но можно отключить специфичные методы, если известно, что они требуют онлайн доступа.

add_filter('woocommerce_available_payment_gateways', 'disable_payment_gateways_without_internet');
function disable_payment_gateways_without_internet($available_gateways) {
  // Здесь пример отключения способа 'stripe' если условие не выполнено
  // Фактическая проверка доступности интернета на сервере невозможна без внешних API
  // Можно добавить проверку сессии или заголовков с клиента

  if (isset($_SESSION['internet_unavailable']) && $_SESSION['internet_unavailable']) {
    unset($available_gateways['stripe']);
    unset($available_gateways['paypal']);
  }
  return $available_gateways;
}

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

• Имитация офлайн-режима в браузере: откройте панель разработчика (F12) > вкладка «Network» > выберите Throttling > Offline. Перезагрузите страницу оформления заказа и убедитесь, что способы оплаты скрываются, а появляется предупреждение.
• Верните режим онлайн и проверьте, что способы оплаты снова доступны без перезагрузки страницы.
• Проверьте, что при реальном отсутствии интернета на устройстве покупателя способы оплаты не показываются.

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

• Скрипт не загружается на странице оформления заказа — проверьте, что скрипт подключён только на странице checkout. Используйте условие is_checkout() в PHP для подключения.
• Способы оплаты не скрываются без перезагрузки страницы — добавьте слушатели событий online и offline для динамического обновления.
• Проверка доступности интернета слишком медленная или блокирует UI — используйте fetch с опцией mode: no-cors и таймаутом, чтобы не тормозить интерфейс.
• Клиентский код обходится пользователями — для критичных способов оплаты реализуйте серверную фильтрацию, хотя полностью проверить интернет-соединение сервера невозможно.

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

• Не используйте тяжёлые и частые запросы для проверки соединения, чтобы избежать нагрузки на сервер и замедления страницы.
• Кэшируйте результат проверки на клиенте на несколько секунд, чтобы избежать постоянных запросов.
• Отключение способов оплаты на клиенте улучшает UX, но не заменяет серверную валидацию.
• Учитывайте, что navigator.onLine иногда даёт ложноположительные результаты, поэтому комбинируйте с реальным запросом.
• Для крупных проектов рассмотрите внедрение собственного API для проверки доступности платежных шлюзов на сервере.

Сравнение способов реализации