Виджет Apple Pay позволяет покупателям использовать Apple Wallet для оплаты в интернет-магазине без переадресации на внешние платежные страницы и без ввода данных банковской карты.
Apple Pay поддерживается на устройствах iOS и macOS.
Визуально виджет представлен в виде кнопки Apple Pay, нажатие на которую запускает процесс авторизации и оплаты заказа.
Для организации оплат с помощь виджета на странице интернет-магазина необходимо выполнить следующие подготовительные шаги:
Для размещения виджета на странице интернет-магазина следует выполнить следующие действия:
Виджет представляет собой 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 осуществляется проверка платежной сессии, метод выполняется при отображении всплывающего окна Apple Pay.
Метод onpaymentauthorizad выполняется при подтверждении операции оплаты. В метод передается платежный токен, полученный от Apple Pay, а также параметры заказа.
Список параметров заказа
Параметр | Описание |
merchant_id | Идентификатор интернет-магазина |
amount | Сумма заказа в единицах валюты |
currency | Валюта заказа |
ordernumber | Уникальный номер заказа на стороне интернет-магазина |
comment | Комментарий |
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() }; |
После завершения оплаты сервер возвращает в ответ номер заказа и статус. Для обработки ответа необходимо добавить соответствующий код:
$.post("/pay/tokenpay_widget_ap.cfm", JSON.stringify(data)).then(function (result) { //пример обработки платежа: if (!result.hasOwnProperty('firstcode') && JSON.stringify(result.order.orderstate) == '"Approved"' && JSON.stringify(result.order.orderstate) == '"Delayed"') { applePaySession.completePayment(ApplePaySession.STATUS_SUCCESS); } else { applePaySession.completePayment(ApplePaySession.STATUS_FAILURE); } }); |