WooCommerce: как добавить поддержку оплаты Apple Pay в тему WordPress

Почему Apple Pay важен для WooCommerce-магазинов

Apple Pay — один из самых удобных и быстрых способов оплаты для пользователей iOS и macOS. Добавление поддержки Apple Pay в WooCommerce повышает конверсию за счет упрощения процесса покупки. Однако стандартная тема WordPress без дополнительных настроек не всегда корректно отображает кнопку Apple Pay или не позволяет использовать её в кастомных шаблонах.

Диагностика: как понять, что Apple Pay не работает в вашей теме

• Кнопка Apple Pay не появляется на странице оформления заказа или в корзине.
• Появляются ошибки JavaScript, связанные с Payment Request API.
• Платеж не обрабатывается через Apple Pay, хотя он доступен в настройках WooCommerce.
• Кнопка появляется, но при нажатии ничего не происходит или появляется сообщение об ошибке.

Проверьте консоль браузера (F12 > Console) на предмет ошибок. Убедитесь, что ваш сайт работает по HTTPS — Apple Pay требует защищенное соединение.

Пошаговое решение: добавляем поддержку Apple Pay в тему WordPress с WooCommerce

1. Обновите WooCommerce и платежный шлюз

Для работы Apple Pay нужен платежный шлюз, поддерживающий этот метод (например, Stripe). Обновите WooCommerce и плагин Stripe до последних версий.

2. Проверьте настройку Stripe

Перейдите в WooCommerce > Настройки > Платежи > Stripe и включите Apple Pay (Payment Request Buttons). Убедитесь, что домен подтвержден — это можно сделать через панель Stripe.

3. Добавьте поддержку Apple Pay в шаблон темы

Если вы используете кастомные шаблоны оформления заказа или корзины, кнопка Apple Pay может не отображаться автоматически. Добавьте следующий код в файл вашей темы, например, functions.php, для вывода кнопки:

add_action('woocommerce_proceed_to_checkout', 'custom_display_apple_pay_button', 20); 
function custom_display_apple_pay_button() {
    if ( class_exists('WC_Stripe_Payment_Request_Button') ) {
        $payment_request_button = new WC_Stripe_Payment_Request_Button();
        echo $payment_request_button->render_button();
    }
}

Этот код добавляет кнопку Apple Pay рядом с кнопкой перехода к оформлению заказа.

4. Убедитесь в поддержке HTTPS и правильном домене

Apple Pay требует, чтобы сайт был доступен по HTTPS и домен был подтвержден в платежном шлюзе. Проверьте, что SSL-сертификат корректно установлен, и домен зарегистрирован в настройках Stripe.

5. Проверка на стороне клиента

Добавьте в футер темы следующий код, чтобы проверить, поддерживается ли Payment Request API в браузере пользователя:

add_action('wp_footer', function() {
    ?>
    <script>
    if (window.PaymentRequest) {
        console.log('Payment Request API поддерживается');
    } else {
        console.log('Payment Request API не поддерживается');
    }
    </script>
    <?php
});

Это поможет понять, доступна ли технология для пользователя.

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

• Откройте страницу корзины или оформления заказа на устройстве с iOS/macOS с Safari.
• Проверьте, появилась ли кнопка Apple Pay рядом с оплатой.
• Нажмите кнопку и убедитесь, что появляется окно подтверждения оплаты Apple Pay.
• В консоли браузера отсутствуют ошибки JavaScript, связанные с платежами.
• Проверьте, что платеж успешно проходит и заказы создаются в WooCommerce.

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

• Кнопка не появляется: Проверьте, что Stripe плагин активен и Apple Pay включен. Убедитесь в наличии SSL-сертификата и корректной регистрации домена в Stripe.
• Ошибка JavaScript PaymentRequest: Возможно, тема переопределяет скрипты WooCommerce. Проверьте консоль и отключите конфликтующие скрипты.
• Платеж не проходит: Проверьте настройки платежного шлюза, ключи API и статус аккаунта Stripe.
• Кнопка появляется, но не работает на Android или в неподдерживаемом браузере: Apple Pay работает только в Safari на поддерживаемых устройствах, это нормальное поведение.

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

• Всегда используйте HTTPS — это требование Apple Pay и увеличивает общую безопасность сайта.
• Минимизируйте количество сторонних скриптов на странице оформления заказа, чтобы не конфликтовать с Payment Request API.
• Регулярно обновляйте WooCommerce, платежные плагины и тему для совместимости с новыми требованиями Apple Pay.
• Используйте встроенные хуки WooCommerce для добавления кнопок и избегайте прямого изменения шаблонов, чтобы сохранить возможность обновления.

Сравнение вариантов реализации Apple Pay в WooCommerce