Woocommerce apple pay настройка

Обновлено: 19.09.2024

Сейчас, в том числе и у нас на сайте, и в приложениях ivi, есть явная тенденция роста аудитории на мобильных устройствах. Также растет и доля покупок, совершаемых в интернете с мобильных устройств. В отличие от десктопа, помимо традиционных вариантов оплаты, доступны системы мобильных платежей, например Apple Pay, Android Pay, Samsung Pay. Эти системы можно использовать не только для оплаты в терминалах, принимающих банковские карты, но и для оплаты в приложениях и на веб-сайтах.



Внедрение мобильных платежей мы начали с веб-версии ivi и выбрали мобильный сайт и систему Apple Pay.

Apple Pay — система мобильных платежей от Apple, позволяющая мобильным устройствам проводить платежи в магазинах и в интернете. Пользователь привязывает карту к телефону, и далее при оплате требуется только подтверждение платежа отпечатком пальца или цифровым кодом.

В этой статье я расскажу об использовании библиотеки Apple Pay JS.

Библиотека предназначена для использования Apple Pay на сайтах. Apple Pay JS API поддерживается на:

  • iOS начиная от 10 версии в браузере Safari и моделях iPhone, поддерживающих бесконтактные платежи (SE и старше 6);
  • macOS от версии 10.12 в браузере Safari на компьютерах с Touch ID или при подключенном iPhone или Apple Watch для подтверждения платежей.
  • Merchant ID — идентификатор продавца, представляющий его в Apple Pay;
  • Payment Processing Certificate — сертификат, используемый для передачи платежных данных на стороне платежного шлюза. Сервера Apple Pay используют публичный ключ этого сертификата для шифрования платежных данных. Приватный ключ используется для расшифровывания данных при проведении платежа;
  • Merchant Identity Certificate — TLS сертификат, используемый для подтверждения данных продавца и авторизации платежных сессий через сервера Apple. Платежная сессия создается при инициализации процесса оплаты. Сертификат используется только на стороне сайта.

После всей подготовительной работы можно приступить к интеграции Apple Pay на сайт. Процесс интеграции состоит из 3 основных частей:

Создание платежной сессии

Перед показом кнопки оплаты через Apple Pay нужно проверить доступен ли Apple Pay на устройстве. Реализуется это так:


Далее с помощью Apple Pay JS API можно проверить есть ли у пользователя активные карты, привязанные к Apple Pay. Предоставляется 2 метода canMakePayments и canMakePaymentsWithActiveCard . Первый проверяет только факт поддержки Apple Pay, второй помимо этого позволяет узнать есть ли по крайней мере 1 карта, привязанная к Apple Pay.

У нас, например, эти проверки используются для того, чтобы решить показать кнопку оплаты через Apple Pay над остальными способами оплаты или под ними. В случае если добавленных карт нет, выводится кнопка Set Up Apple Pay, по клику открываются настройки телефона с разделом Wallet. В итоге пользователь уходит с сайта, а процесс оплаты прерывать не стоит, поэтому кнопка располагается под основными типами оплаты и даже не видна без скролла экрана.



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


В примере приведен минимальный набор свойств у объекта ApplePayPaymentRequest. Для отображения более подробной информации о покупке нужно использовать другие свойства этого объекта.

Для обработки событий платежной сессии нужно реализовать как минимум следующие методы:

  • onvalidatemerchant срабатывает при открытии платежной формы Apple Pay. В обработчике этого события требуется верифицировать платежную сессию. Процесс верификации описан далее;
  • onpaymentauthorized срабатывает когда пользователь подтверждает платеж на платежной форме Apple Pay с помощью Touch ID, Face ID или кода. Здесь доступен платежный токен, который нужно передать в платежный шлюз для проведения платежа;


В результате пользователь увидит следующее:


При показе формы срабатывает событие onvalidatemerchant . Для того чтобы продолжить платеж реализуем следующий этап.

Верификация платежной сессии


Метод performValidation возвращает промис от запроса на валидацию. Обработчик этого запроса находится на нашей стороне, реализация такая: на URL из параметра события onvalidatemerchant отправляется post запрос.

В теле запроса содержится json:


Параметры MERCHANT_IDENTIFIER и DISPLAY_NAME берутся из девелоперского аккаунта (их настроили в самом начале), а HOST — это домен, с которого делается оплата.

Запрос должен быть подписан сертификатом Merchant Identity Certificate. В ответе придет json, его и нужно вернуть. После получения этого ответа, вызываем у платежной сессии метод completeMerchantValidation .

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

Проведение платежа

В параметре события onpaymentauthorized содержится объект с платежным токеном, который нужно передать в платежный шлюз. Вся информация, содержащаяся в токене, описана в документации.

Как только платеж проведен, завершаем оплату на стороне клиента.


в success нужно передать один из 2 статусов window.ApplePaySession.STATUS_SUCCESS или window.ApplePaySession.STATUS_FAILURE .

На этом процесс оплаты через Apple Pay заканчивается. Более подробно про Apple Pay JS можно почитать в официальной документации.


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

Сегодня нас интересуют самые популярные международные платежные шлюзы для WooCommerce:

  • WooCommerce PayPal Express Checkout Payment Gateway
  • WooCommerce Stripe Gateway
  • WooCommerce Amazon Pay Gateway
  • WooCommerce Square

Управление платежными шлюзами

Управление платежными шлюзами находится в WooCommerce > Настройки > вкладка Платежи.


Чтобы активировать, например, Чековые платежи, вам нужно выполнить следующие шаги:

  1. Открыть подвкладку Чековые платежи.
  2. Активировать чекбокс Включить оплату чеками. Все онлайн расчеты требуют дополнительных настроек.
  3. Сохранить внесенные изменения


The WooCommerce Stripe Gateway

После установки и активации плагина выполните следующие действия:


Вид шлюзов оплаты Stripe на странице Платежи


Подробная инструкция установки и настройки находится здесь.

The WooCommerce PayPal Express Checkout Payment Gateway

WooCommerce PayPal Express Checkout позволяет вашему магазину принимать платежи через PayPal вместо или в дополнение к стандартному процессу оформления заказа WooCommerce.

После установки и активации плагина, выполните следующие действия:


Вид шлюзов оплаты PayPal


Подробная инструкция установки и настройки находится здесь.

The WooCommerce Amazon Pay Gateway

Amazon Pay (ранее называвшийся Pay with Amazon и Amazon Payments Advanced) расширяет Woocommerce, что позволяет принимать платежи через специальную страницу оплаты в вашем магазине c виджетами от Amazon. Пользователи Amazon получают удобный способ для оплаты с использованием существующих платежных и адресных данных.

После установки и активации плагина, выполните следующие действия:


Подробная инструкция установки и настройки находится здесь.

WooCommerce Square

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

Для работы с платежным шлюзом Square вам нужно выполнить интеграцию с ним.

  • Сохраните внесенные изменения.
  • После успешной интеграции перейдите к Платежи > Square
  • Активируйте чекбокс “Включить Square”
  • Выполните необходимые дополнительные настройки.


Вид Square на странице Платежи


Подробная инструкция установки и настройки находится здесь.

Разница между ними описана здесь .

Яндекс.Касса для Woocommerce

После установки и активации плагина, перейдите в WooCommerce > Настройки Яндекс.Кассы


После установки и активации плагина, перейдите в WooCommerce > Настройки Яндекс.Кассы 2.0


Активация платежных шлюзов Яндекс кассы:

  • Перейдите в WooCommerce > Настройки > вкладка Оформление заказа > Платежный шлюз Яндекс кассы, который нужно активировать.
  • Активируйте чекбокс “Включить”


Сохраните внесенные изменения.

Вид платежных шлюзов на фронте:


Подробная инструкция установки и настройки находится здесь

Платежный сервис Wallet One

После установки и активации плагина, выполните следующие действия:

  • Перейдите в WooCommerce > Настройки > вкладка Оформление заказа > Wallet One (Единая касса)
  • Активируйте чекбокс “Активность”


Сохраните внесенные изменения.

Вид платежного шлюза на фронте


Подробная инструкция установки и настройки находится здесь.

InterKassa Gateway

«Interkassa» – это агрегатор платежных систем, позволяющий онлайн-магазинам, сайтам и другим торговым площадкам принимать все возможные формы оплаты в максимально сжатые сроки. Клиентам предлагается более 50 платежных инструментов. Работает в 5 валютных зонах: гривна, рубль, доллар, евро и лары.

После установки и активации плагина выполните следующие действия:


Сохраните внесенные изменения

Вид платежного шлюза на фронте


Подробная инструкция установки и настройки находится здесь.

Тинькофф Банк

После установки и активации плагина, выполните следующие действия:


Сохраните внесенные изменения.

Вид платежного шлюза на фронте


Подробная инструкция установки и настройки находится здесь.

Сбербанк

После установки и активации плагина, выполните следующие действия:

  • Перейдите в WooCommerce > Настройки > вкладка Оформление заказа > Rbs-payment
  • Активируйте чекбокс “Включить/Выключить”.
  • Для подключения платежного шлюза Сбербанка вам нужны: Логин (обязательно в конце вашего логина добавьте -api) и Пароль учетной записи.


Сохраните внесенные изменения.

Вид платежного шлюза на фронте


Подробная инструкция установки и настройки находится здесь.

Premmerce WooCommerce LiqPay Gateway

Купить и скачать Premmerce WooCommerce LiqPay Gateway вы можете здесь.

После установки и активации плагина, выполните следующие действия:



Сохраните внесенные изменения.

Вид платежного шлюза на фронте



Поля “Название” и “Описание” выводятся на фронте для информирования покупателей.

Читайте также: