Apple pay js typescript

Подключаем оплату через Apple Pay на сайте

Сейчас, в том числе и у нас на сайте, и в приложениях ivi, есть явная тенденция роста аудитории на мобильных устройствах. Также растет и доля покупок, совершаемых в интернете с мобильных устройств. В отличие от десктопа, помимо традиционных вариантов оплаты, доступны системы мобильных платежей, например Apple Pay, Android Pay, Samsung Pay. Эти системы можно использовать не только для оплаты в терминалах, принимающих банковские карты, но и для оплаты в приложениях и на веб-сайтах.

Внедрение мобильных платежей мы начали с веб-версии ivi и выбрали мобильный сайт и систему Apple Pay.

Apple Pay — система мобильных платежей от Apple, позволяющая мобильным устройствам проводить платежи в магазинах и в интернете. Пользователь привязывает карту к телефону, и далее при оплате требуется только подтверждение платежа отпечатком пальца или цифровым кодом.

В этой статье я расскажу об использовании библиотеки Apple Pay JS.

Библиотека предназначена для использования Apple Pay на сайтах. Apple Pay JS API поддерживается на:

• iOS начиная от 10 версии в браузере Safari и моделях iPhone, поддерживающих бесконтактные платежи (SE и старше 6);
• macOS от версии 10.12 в браузере Safari на компьютерах с Touch ID или при подключенном iPhone или Apple Watch для подтверждения платежей.

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

• Девелоперский аккаунт Apple;
• HTTPS на странице, использующей Apple Pay;
• Выбрать платежный шлюз, с которым вы будете работать. Мы пользуемся услугами Payture.

Далее нужно зарегистрировать Merchant ID, создать сертификаты Merchant Identity Certificate и Payment Processing Certificate и верифицировать домены, на которых будет использоваться Apple Pay. Описание процесса есть в инструкции от Payture.

• Merchant ID — идентификатор продавца, представляющий его в Apple Pay;
• Payment Processing Certificate — сертификат, используемый для передачи платежных данных на стороне платежного шлюза. Сервера Apple Pay используют публичный ключ этого сертификата для шифрования платежных данных. Приватный ключ используется для расшифровывания данных при проведении платежа;
• Merchant Identity Certificate — TLS сертификат, используемый для подтверждения данных продавца и авторизации платежных сессий через сервера Apple. Платежная сессия создается при инициализации процесса оплаты. Сертификат используется только на стороне сайта.

Стоит обратить внимание на то, что при верификации нужно указать полное доменное имя, т.е. маску домена указать не получится.

После всей подготовительной работы можно приступить к интеграции Apple Pay на сайт. Процесс интеграции состоит из 3 основных частей:

• Создание платежной сессии, показ диалога платежа и обработка событий платежной сессии. Тут используется Apple Pay JS API;
• Верификация платежной сессии. Требуется для того, чтобы система Apple Pay могла убедиться, что запрос идет от зарегистрированного продавца. Реализуется на бекенде;
• Проведение платежа через платежный шлюз и завершение платежной сессии.

Создание платежной сессии

Перед показом кнопки оплаты через Apple Pay нужно проверить доступен ли Apple Pay на устройстве. Реализуется это так:

Далее с помощью Apple Pay JS API можно проверить есть ли у пользователя активные карты, привязанные к Apple Pay. Предоставляется 2 метода canMakePayments и canMakePaymentsWithActiveCard . Первый проверяет только факт поддержки Apple Pay, второй помимо этого позволяет узнать есть ли по крайней мере 1 карта, привязанная к Apple Pay.

У нас, например, эти проверки используются для того, чтобы решить показать кнопку оплаты через Apple Pay над остальными способами оплаты или под ними. В случае если добавленных карт нет, выводится кнопка Set Up Apple Pay, по клику открываются настройки телефона с разделом Wallet. В итоге пользователь уходит с сайта, а процесс оплаты прерывать не стоит, поэтому кнопка располагается под основными типами оплаты и даже не видна без скролла экрана.

Страницы оплаты для настроенного и ненастроенного Apple Pay:

Как только кнопка отображена на странице, можно создать платежную сессию для того чтобы отобразить диалог оплаты. Сессия может быть создана только по явному пользовательскому действию. По клику на кнопку нужно выполнить следующий код:

В примере приведен минимальный набор свойств у объекта ApplePayPaymentRequest. Для отображения более подробной информации о покупке нужно использовать другие свойства этого объекта.

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

• onvalidatemerchant срабатывает при открытии платежной формы Apple Pay. В обработчике этого события требуется верифицировать платежную сессию. Процесс верификации описан далее;
• onpaymentauthorized срабатывает когда пользователь подтверждает платеж на платежной форме Apple Pay с помощью Touch ID, Face ID или кода. Здесь доступен платежный токен, который нужно передать в платежный шлюз для проведения платежа;

После создания объекта ApplePaySession нужно вызвать метод begin для отображения диалога оплаты:

В результате пользователь увидит следующее:

При показе формы срабатывает событие onvalidatemerchant . Для того чтобы продолжить платеж реализуем следующий этап.

Верификация платежной сессии

В параметре события onvalidatemerchant приходит поле validationURL . На этот адрес с бекенда нужно отправить данные, подписанные сертификатом Merchant Identity Certificate.

Метод performValidation возвращает промис от запроса на валидацию. Обработчик этого запроса находится на нашей стороне, реализация такая: на URL из параметра события onvalidatemerchant отправляется post запрос.

В теле запроса содержится json:

Параметры MERCHANT_IDENTIFIER и DISPLAY_NAME берутся из девелоперского аккаунта (их настроили в самом начале), а HOST — это домен, с которого делается оплата.

Запрос должен быть подписан сертификатом Merchant Identity Certificate. В ответе придет json, его и нужно вернуть. После получения этого ответа, вызываем у платежной сессии метод completeMerchantValidation .

Процесс верификации сессии пройден, теперь пользователю требуется подтвердить платеж пальцем или кодом. После этого срабатывает событие onpaymentauthorized . Переходим к этапу проведения платежа.

Проведение платежа

В параметре события onpaymentauthorized содержится объект с платежным токеном, который нужно передать в платежный шлюз. Вся информация, содержащаяся в токене, описана в документации.

Как только платеж проведен, завершаем оплату на стороне клиента.

в success нужно передать один из 2 статусов window.ApplePaySession.STATUS_SUCCESS или window.ApplePaySession.STATUS_FAILURE .

На этом процесс оплаты через Apple Pay заканчивается. Более подробно про Apple Pay JS можно почитать в официальной документации.

Источник

Apple pay js typescript

Пример размещения кнопки оплаты через Apple Pay

Представленный код указан в качестве примера, в нем могут отсутствовать необходимые проверки и валидация данных.

Пример демонстрирует возможность проведения оплаты через Apple Pay с размещением кнопки оплаты на стороне магазина.

Для проведения платежа с помощью Apple Pay сначала необходимо создать платеж в Платроне. Для этого необходимо отправить запрос на init_payment.php с указанием необходимых параметров 🔗 .

Номер телефона плательщика является обязательным параметром для платежа в Плтароне. Номер телефона можно передать в параметре pg_user_phone в запросе на создание платежа, либо запросить из Apple Wallet (см. далее). Email адрес плательщика не является обязательным параметром, его так же можно передать либо в параметре pg_user_contact_email в запросе на создание платежа, либо запросить из Apple Wallet (см. далее).
Так как пользователь не попадает на сторону Платрона, рекомендуется передать IP адрес пользователя в параметре pg_user_ip , IP адрес используется для проверки платежа на фрод.

В ответ на запрос создания платежа будет получен ответ в виде XML, в котором присутсвует элемент pg_redirect_url в котором указан url, из этого url необходимо получить значение параметра customer , это значение понадобится далее. Например, был получен следующий url:

Значением параметра customer из этого url является следуюая строка:

Apple Pay JS API

Для взаимодействия с кошельком пользователя используется Apple Pay JS API. Для совершения платежа необходимо создать объект ApplePaySession и указать обработчики событий onvalidatemerchant и onpaymentauthorized .

Обычно, браузеры блокируют кросс-доменные ajax запросы. Из-за этого, в данном примере, ajax запрос отправляется на текущий сервер, а сервер отправляет данные в Платрон.

Создание объекта ApplePaySession 🔗

В конструктор объекта ApplePaySession необходимо передать данные платежа в виде структуры ApplePayPaymentRequest 🔗 .

Номер телефона плательщика является обязательным параметром для платежа в Платроне, если номер телефона не был указан при создании транзакции, необходимо запросить номер телефона из Apple Wallet. Для этого необходимо указать ‘phone’ в параметре requiredShippingContactFields . Email адрес плательщика не является обязательным, но, если настроена отправка чеков через Платрон и в ОФД не настроена отправка чеков по СМС, плательщик не получит чек.

Обработка события onvalidatemerchant 🔗

В объекте события присутствует свойство validationURL , значение этого свойства необходимо отправить в Платрон для получения сессии от Apple Pay. Полученный url необходима отправить в теле POST запроса по следующему адресу:

где параметр customer — это значение полученное из ответа на создание платежа, а значение параметра psName — это название платежной системы Apple Pay в Платроне. В теле запроса необходимо передать следующие данные:

где это значение полученное из параметра validationUrl события.

Обработка события onpaymentauthorized 🔗

В объекте события присутствует свойство payment , в этом свойстве находится объект ApplePayPayment 🔗 необходимый для совершения платежа. Этот объект необходимо отправить в Платрон в виде JSON строки для проведения платежа. Данное значение необходимо отправить в теле POST запроса по следующему адресу:

где параметр customer — это значение полученное из ответа на создание платежа, а значение параметра psName — это название платежной системы Apple Pay в Платроне. В теле запроса необходимо передать следующие данные:

— это объект ApplePayPayment преобразованный в JSON.

Инструкция по запуску

Для запуска примера необходим сервер с PHP

1. Разместить код примера на сервере так, чтобы DOCUMENT_ROOT указывал на папку public
2. Переименовать файл classes/Settings.php.sample в classes/Settings.php
3. Указать в файле classes/Settings.php данные магазина и используемую платежную систему
4. Выполнить команду composer install в папке с примером

• Apple Pay JS API — https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api
• Требования к оформлению — https://developer.apple.com/design/human-interface-guidelines/apple-pay/overview/introduction/
• Apple Pay on the Web Demo — https://applepaydemo.apple.com/

About

Example of Apple Pay integration with Apple Pay button on merchant side

Источник

Apple pay js typescript

This repository is no longer maintained.

appr-wrapper: Payment Request wrapper for Apple Pay JS

«appr-wrapper» wraps Apple Pay JS and allows you to write Payment Request API code to use the API.

Try a demo from Safari on iOS and Chrome for Android. See that it works on both platforms in a single code base.

The repo comes with a build script ( ./dist/appr.js ) but in case you want to build one yourself, follow this instruction:

Try the demo on your own server

To try the demo on your own server, you need to go through Apple Pay JS merchant registration process. Follow Apple’s instructions and setup yours. There are 3 things required:

• Verify your domain by putting a file you can obtain from Apple named apple-developer-merchantid-domain-association in ./demo/well-known folder.
• Put your merchant identity certificate to ./certs directory with a name apple-pay-cert.pem at project’s root.
• Modify ./demo.js and replace params with your own configuration: APPLE_PAY_CERTIFICATE_PATH , MERCHANT_IDENTIFIER , MERCHANT_DOMAIN , MERCHANT_DISPLAY_NAME

One the set up is done, run the server:

./dist/appr.js will be the code to import. You can either load it from script tag or import it via module loader.

Then, simply implement Payment Request API following the standard. You can handle Apple Pay JS by adding a payment method specifying » https://apple.com/apple-pay » as following example:

Payment method properties

The first argument to the PaymentRequest constructor.

• supportedNetworks is required.
• data :
  • countryCode is required.
  • billingContact is optional.
  • shippingContact is optional. It allows you to provide default shipping contact information in Apple Pay JS.
  • merchantCapabilities defaults to [‘supports3DS’] unless you provide any.
  • validationEndpoint is optional. Specify the merchant validation endpoint on your server. If you omit this, handle validatemerchant event yourself.
  • merchantIdentifier is required. Specify your merchant id.

With validationEndpoint , appr-wrapper automatically handles validatemerchant event for you. On your server’s specified endpoint, you’ll receive a POST request with validationURL , so you can validate yourself and respond with a merchant session object returned following these instructions. You can optionally handle the validatemerchant event by yourself by adding an event handler.

Payment details properties

The second argument to the PaymentRequest constructor.

• The total.amount.currency is converted to currencyCode in Apple Pay JS.

Let’s look into what each parameters convert to, one by one.

Payment options properties

The third argument to the PaymentRequest constructor.

• requestPayerEmail , requestPayerPhone , requestPayerName are respectively converted to requireBillingContactFields and requireShippingContactFields values in Apple Pay JS.
• pickup in shippingType will be converted to servicePickup in Apple Pay JS. Others are handled as they are.

canMakePayment() will invoke canMakePaymentsWithActiveCard() in Apple Pay JS.

Shipping contact selected event / shipping method selected event

• shippingcontactselected event in Apple Pay JS as shippingaddresschange event in Payment Request.
• shippingmethodselected event in Apple Pay JS as shippingoptionchange event in Payment Request.

Handling payment response

Once show() resolves, you will recive an object which is slightly different from actual PaymentResponse object. Equivalent to this resolution is paymentauthorized event where you will receive an event object that contains an ApplePayPayment object in Apple Pay JS.

Источник