Виджет 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); } }); |
Если по каким-то причинам оплата заказа прошла неуспешно, то сервис вернет сообщения об ошибках (ненулевые значения параметров firstcode, secondcode).
Скрипт использует Apple Pay API, который поддерживается:
Ниже приведен пример скрипта виджета, который может быть размещен на платежной странице интернет-магазина.
<script type="text/javascript"> document.addEventListener('DOMContentLoaded', function(){ if (window.ApplePaySession) { //проверка возможности оплаты и отображение кнопки Apple Pay if (ApplePaySession.canMakePayments) { document.getElementById('apple-pay-button').style.display = 'block'; document.getElementById('apple-pay-button').addEventListener('click', applePayButtonClicked); } } else {console.log("ApplePaySession not available"); } }); function applePayButtonClicked() { const region = 'RU'; 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 version = window.ApplePaySession.supportsVersion(3) ? 3 : window.ApplePaySession.supportsVersion(2) ? 2 : 1; const applePaySession = new window.ApplePaySession(version, paymentRequest); console.log("start session"); // обработчик события для создания merchant session. applePaySession.onvalidatemerchant = function (event) { console.log("onvalidatemerchant in"); var data = { validationUrl: event.validationURL }; console.log(JSON.stringify(data)); // отправка запроса на сервер предприятия, далее запрос API для запуска сессии $.post("/pay/apple_pay_comm.cfm", data).then(function (result) { applePaySession.completeMerchantValidation(result); }); } // обработчик события авторизации платежа applePaySession.onpaymentauthorized = function (event) { console.log("onpaymentauthorized in"); //var email = event.payment.shippingContact.emailAddress; //если был запрошен адрес e-mail //var phone = event.payment.shippingContact.phoneNumber; //если был запрошен телефон //все варианты на сайте https://developer.apple.com/reference/applepayjs/paymentcontact // передача параметров заказа 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() }; //отправка запроса на сервер предприятия, далее запрос API для проведения оплаты console.log(JSON.stringify(event.payment.token)); $.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); } }); }; applePaySession.begin(); } </script> <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> |