Наконец, простой, но информативный пример Apple Pay в Интернете!
(HTM, CSS, Javascript)
Если вы пытаетесь внедрить Apple Pay на своем веб-сайте, скорее всего, вы просмотрели документацию Apple и поняли, что единственный способ получить это - посмотреть на пример. Итак, приступим к делу.
Интерфейс (кнопка Apple Pay и Apple Pay JS)
Вот структура папок, которую мы будем использовать:
index.html
style.css
app.js
Начнем с простой части и добавим знаменитую кнопку на HTML-страницу:
Теперь давайте добавим стиль
Имея этот минимум HTML и CSS, если вы откроете Safari на совместимом устройстве Apple, вы должны увидеть что-то вроде этого (см. Подробнее о настройке кнопок):
А теперь перейдем к части JS. Для лучшего разделения давайте создадим UI-контроллер, который будет обрабатывать обновления UI:
Ничего особенного здесь нет, просто контроллер, который будет предоставлять некоторую базовую функциональность «показать / скрыть кнопку» / «показать ошибку», но иметь такую возможность немного чище.
Теперь давайте создадим еще один контроллер, на котором мы будем обрабатывать магию Apple Pay.
Ничего особенного здесь пока нет, просто простой контроллер с функцией инициализации (не забудьте передать UI-контроллер).
На данный момент у нас есть 2 функции в контроллере: одна для проверки доступности Apple Pay (_applePayAvailable) и одна для установки простого прослушивателя кликов на кнопке Apple Pay (_setButtonClickListener). Мы используем оба в функции init, чтобы наша логика отображения / скрытия вступила в силу.
Пока ваш app.js должен выглядеть так:
Напомним, что до сих пор у вас есть кнопка Apple Pay в пользовательском интерфейсе, и у вас уже есть простая логика, позволяющая отображать кнопку только в том случае, если Apple Pay возможна.
Еще круче то, что пока у нас есть приличная структура:
- applePayUiController ›Взаимодействие с пользовательским интерфейсом, без логики
- applePayController ›Apple Logic
- applePayController.init () ›простой способ начать
Игнорируйте этот абзац, если у вас уже есть HTTPS-сервер / домен для запуска вашего приложения
Поскольку Apple разрешит тестирование Apple Pay только в среде HTTPS, мы можем использовать такой инструмент, как ngrok, чтобы по сути раскрыть общедоступный (https) URL-адрес. Если вы используете VS Code, есть классное расширение под названием Live Server, которое будет запускать ваш HTML-код на сервере (localhost: 5500). Если вы объедините это с ngrok, вы, по сути, получите общедоступный URL-адрес HTTPS с перезагрузкой в реальном времени. Чтобы было проще, вы можете увидеть настройку на видео:
Теперь, когда у нас настроена среда разработки, мы можем приступить к работе с кодом и логикой Apple Pay.
Начнем с установки некоторых переменных.
Поскольку нам нужно сделать 2 вызова API (пока не беспокойтесь о них, мы поговорим о бэкэнде позже), мы объявляем их и добавляем объект конфигурации, который содержит наши предпочтения, такие как цена продукта, способы доставки и т. Д.
Для простоты это довольно статично, но довольно легко сделать его динамическим.
Давайте добавим логику того, что происходит при нажатии кнопки Apple Pay.
Здесь мы в основном изменили прослушиватель кликов, чтобы запускать сеанс Apple Pay при срабатывании. В функции «_startApplePaySession» мы передаем конфигурацию, которую хочет Apple. Вы можете настроить это по своему желанию, но я добавил конфигурацию, чтобы запрашивать довольно много информации во всплывающем окне Apple. Если, например, вам не требуется никаких сведений о доставке, вы можете удалить параметр requiredShippingContactFields.
Теперь ваш app.js должен выглядеть так:
Если вы сейчас нажмете кнопку Apple Pay, в Интернете вы увидите всплывающее окно Apple:
Напомним, теперь у нас есть пользовательский интерфейс, логика для отображения кнопки и всплывающее окно Apple.
Теперь давайте обработаем все события, вызванные сеансом Apple Pay. Мы рассмотрим их по очереди для простоты. Все они находятся в функции _handleApplePayEvents.
Событие: onvalidatemerchant
В этом случае Apple Pay JS предоставит нам URL-адрес, и нам нужно отправить этот URL-адрес на наш внутренний сервер. С нашего сервера мы, по сути, возьмем этот URL-адрес и отправим ему POST-запрос вместе с нашими сертификатами Apple и идентификатором продавца Apple. Мы подробно расскажем об этом в разделе Back End, а пока подумайте о логике как:
- Событие onvalidatemerchant запускается
- Получите validationURL и отправьте его на свою серверную часть (серверная часть вернет некоторый JSON)
- Завершите проверку, вызвав appleSession.completeMerchantValidation (merchantSession), передав ответ со стороны сервера.
Событие: onshippingcontactselected
Во-первых, мы добавили в наш контроллер 2 новые функции. В методе _getAvailableShippingMethods мы определяем варианты доставки, которые мы разрешаем для определенного региона. Apple предоставит нам регион клиента в событии onshippingcontactselected, чтобы мы могли использовать его для отображения соответствующих способов доставки.
_calculateTotal - это простая служебная функция.
Более важным в этом обработчике является то, что после того, как мы определим способы доставки, которые мы хотим предложить, нам нужно обновить всплывающее окно Apple, чтобы отразить их. Здесь мы делаем это, вызывая appleSession.completeShippingContactSelection () и передавая следующие параметры:
- Статус (ApplePaySession.STATUS_SUCCESS) - по сути, указывает на то, что вы успешно справились с этим событием.
- shipping.methods - список предлагаемых нами способов доставки.
- newTotal - поскольку способы доставки имеют разные цены, нам необходимо убедиться, что общая сумма, отображаемая во всплывающем окне Apple Pay, актуальна.
- newLineItems - для удобства пользователей вы хотите отображать выбранный способ доставки в сводке транзакции во всплывающем окне Apple Pay.
Событие: onvalidatemerchant
В этом случае мы просто обрабатываем то, что произойдет, если пользователь выберет способ доставки во всплывающем окне Apple Pay. Представьте, что вы предлагаете бесплатную доставку, а также экспресс-доставку за дополнительные 5 фунтов стерлингов. В этом случае мы просто обновим всплывающее окно Apple Pay с указанием общей суммы и названия способа доставки. Для этого мы вызываем функцию appleSession.completeShippingMethodSelection () и передаем следующие параметры:
- Статус (ApplePaySession.STATUS_SUCCESS) - по сути, указывает на то, что вы успешно справились с этим событием.
- newTotal - обновленная сумма, полученная путем взятия стоимости продукта и добавления стоимости доставки.
- newLineItems - сводка заказа на обновление (чтобы она отражала название нового выбранного способа оплаты)
Событие: onpaymentauthorized
Это важнейшее событие. Он запускается после того, как клиент подтверждает транзакцию с помощью Touch ID или Face ID. Здесь мы получаем все данные о клиенте, такие как адрес электронной почты, полный адрес, имя. Еще более важная часть заключается в том, что мы получаем от Apple некую полезную нагрузку, которую провайдеры платежей могут использовать для выполнения транзакций.
Мы добавили новую функцию в наш контроллер _performTransaction, которая будет принимать дату от Apple, отправляет ее на наш сервер (на сервере будет выполнена транзакция), а затем возвращает результат транзакции (если он был одобрено и другие детали, которые возвращает ваш платежный провайдер)
В зависимости от результата платежа мы вызываем appleSession.completePayment и передаем либо ApplePaySession.STATUS_SUCCESS, либо ApplePaySession.STATUS_FAILURE.
Резюме:
После того, как вы позаботитесь обо всех обработчиках, ваш файл app.js должен выглядеть так:
На этом Front End завершен. У нас есть пользовательский интерфейс, мы можем открывать всплывающее окно Apple Pay и добавлять собственные способы доставки и даже обрабатывать взаимодействие пользователя с всплывающим окном. Единственное, чего не хватает для тестирования этого полноценного взаимодействия, - это серверной части. Внутренняя часть должна быть довольно простой, поскольку ей нужно обрабатывать только 2 вещи: проверку сеанса Apple Pay и выполнение платежа.
