Использование виджета Apple Pay для платежей АПК Ассист
Общие сведения
Виджет Apple Pay позволяет покупателям использовать Apple Wallet для оплаты в интернет-магазине без переадресации на внешние платежные страницы и без ввода данных банковской карты.
Apple Pay поддерживается на устройствах iOS и macOS.
Визуально виджет представлен в виде кнопки Apple Pay, нажатие на которую запускает процесс авторизации и оплаты заказа.
Порядок действий при оплате с помощью виджета
- Покупатель выбирает товары на сайте интернет-магазина.
- Интернет-магазин передает данные заказа в виджет.
- Покупатель нажимает кнопку оплаты Apple Pay.
- На устройстве с подключенным Apple Pay появляется всплывающее окно с выбором привязанной карты.
- Покупатель выбирает карту и подтверждает оплату на устройстве с помощью пароля, TouchID или FaceID.
- Apple Pay формирует зашифрованный пакет с токеном.
- Виджет получает пакет с токеном от Apple Pay.
- Виджет передает зашифрованный пакет с токеном и данными платежа АПК Ассист.
- АПК Ассист расшифровывает пакет с токеном и данными платежа.
- АПК Ассист проводит оплату токеном через процессинг расчётного банка.
- АПК Ассист возвращает результаты проведения оплаты интернет-магазину.
- Интернет-магазин отображает результат оплаты для покупателя.
Список действий для организации оплат с помощь виджета
Для организации оплат с помощь виджета на странице интернет-магазина необходимо выполнить следующие подготовительные шаги:
- оформить заявку на подключение оплаты Apple Pay в АПК Ассист;
- пройти регистрацию в Apple;
- создать сертификат в Личном кабинете предприятия;
- подписать полученный сертификат;
- загрузить подписанный сертификат в Личном кабинете предприятия;
- подготовить страницы интернет-магазина для оплаты;
- обязательны использование протокола https на странице с виджетом и поддержка протокола TLS версии 1.2;
- домен должен иметь действующий SSL сертификат.
Размещение виджета на странице интернет-магазина
Для размещения виджета на странице интернет-магазина следует выполнить следующие действия:
- поместить виджет на страницу оплаты интернет-магазина;
- настроить виджет;
- проверить возможность оплаты с помощью виджета;
- передать параметры заказа;
- получить и обработать результат оплаты.
Описание виджета
Виджет представляет собой HTML-код и JS-скрипт, которые необходимо разместить и настроить на странице оплаты интернет-магазина.
Установка виджета
В том месте страницы интернет-магазина, на которой планируется разместить кнопку оплаты Apple Pay, необходимо добавить следующий код:
<button id="apple-pay-button"></button>
Для кнопки можно задать цвет, тип и размеры. Примеры типов кнопок и их описание доступны на сайте https://developer.apple.com/design/human-interface-guidelines/apple-pay/overview/buttons-and-marks/.
Для настройки внешнего вида кнопки необходимо добавить описание стиля в теге <head></head>.
<style>
#apple-pay-button {
display: none;
background-color: black;
background-image: -webkit-named-image(apple-pay-logo-white);
background-size: 100% 100%;
background-origin: content-box;
background-repeat: no-repeat;
width: 100%;
height: 44px;
padding: 10px 0;
border-radius: 10px;
}
</style>
Подробнее о настройке внешнего вида кнопки см. https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons.
Передача параметров заказа
После нажатия на кнопку Apple Pay на странице интернет магазина создается сессия applePaySession, в которую нужно передать параметры заказа.
В качестве параметров заказа следует передать сумму и валюту заказа, а также поддерживаемые типы карт.
Const currency = $('#currency').val(); // валюта
Const paymentRequest = {
countryCode: region.toUpperCase(),
currencyCode: currency.toUpperCase(),
total: {
label: 'Your label', // название платежа
amount: $('#amount').val() //сумма заказа
},
supportedNetworks:['masterCard', 'visa'],
merchantCapabilities: [ 'supports3DS' ] //поддерживаемые карты
};
Const applePaySession = new window.ApplePaySession(1, paymentRequest);