Использование виджетов для платежей АПК Ассист

Использование виджета 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);

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

onvalidatemerchant;
onpaymentauthorizad.

В методе onvalidatemerchant осуществляется проверка платежной сессии, метод выполняется при отображении всплывающего окна Apple Pay.

Метод onpaymentauthorizad выполняется при подтверждении операции оплаты. В метод передается платежный токен, полученный от Apple Pay, а также параметры заказа.

Список параметров заказа

Параметр	Описание
merchant_id	Идентификатор интернет-магазина
amount	Сумма заказа в единицах валюты
currency	Валюта заказа
ordernumber	Уникальный номер заказа на стороне интернет-магазина
comment	Комментарий
email	Email покупателя
firstname	Имя покупателя
lastname	Фамилия покупателя
middlename	Отчество покупателя

В качестве значений могут быть указаны названия полей заполненной платежной формы, например:

var data = {
            token : event.payment.token,
            merchant_id : $('#merchant_id').val(),
            email : $('#email').val(),
            amount : $('#amount').val(),
            currency : $('#currency').val(),
            ordernumber : $('#ordernumber').val(),
            email : $('#email').val(),
            firstname : $('#firstname').val(),
            middlename : $('#middlename').val(),
            lastname : $('#lastname').val(),
            comment : $('#comment').val()
};

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

Content

Space Tools