- Подключаем оплату через Apple Pay на сайте
- Создание платежной сессии
- Верификация платежной сессии
- Проведение платежа
- Приём платежей через Apple Pay
- Безопасно
- Быстро и удобно
- Просто получать деньги
- Подходят разные карты
- Как происходит покупка через Apple Pay
- Как подключить прием платежей через Apple Pay
- Вопросы и ответы
- Как подключить к интернет-магазину Apple Pay и Google Pay бесплатно и без разработчика
- Алексей Величко
- Для чего интернет-магазинам подключать Apple Pay и Google Pay
- Проблема: чтобы подключить оплату, нужно нанимать разработчика
- Решение: владелец может сам подключить оплату в два клика
- У клиентов выросли продажи и количество успешных оплат
Подключаем оплату через 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
Безопасно
Платёж подтверждается по Touch ID или Face ID: это надёжнее, чем коды и пароли.
Быстро и удобно
При оплате не нужно вводить данные карты: они хранятся в Apple Pay у покупателя.
Просто получать деньги
Для магазина оплата выглядит, как обычный платёж банковской картой.
Подходят разные карты
Заплатить можно любой банковской картой Visa или Mastercard.
Как происходит покупка через Apple Pay
Покупатель собирает заказ и выбирает оплату с Apple Pay
Проверяет данные и подтверждает заказ по Touch ID или Face ID
Деньги списываются с банковской карты из Apple Pay
Можно заплатить в приложениях для iOS и на сайтах в браузере Safari.
Как подключить прием платежей через Apple Pay
Настройте взаимодействие с Apple и ЮKassa: нужно обменяться сертификатами
Реализуйте оплату по API ЮKassa: для сайтов или приложений
Вопросы и ответы
Правда. По данным ЮKassa конверсия при оплате через мобильные платёжные системы составляет 94% против 84% при оплате банковскими картами. Платёж через Apple Pay не требует от покупателя ввода данных карты и 3DS, что сводит к нулю вероятность ошибки авторизации. На ошибку авторизации 3DS приходится 6% оплат по картам.
По данным Mediascope в 2020 году 20% россиян совершали онлайн-платежи через Apple Pay. По опыту наших партнёров, в некоторых товарных категориях средний чек при оплате через Apple Pay и Google Pay выше, чем при платежах другими способами. Так, в магазинах обуви и одежды он выше в 5 раз.
Вернуть деньги клиенту, оплатившему покупку через Apple Pay, можно в личном кабинете ЮKassa. Откройте список операций и выберите опцию возврата в правой колонке напротив нужной транзакции. Её можно найти по номеру учётной записи устройства, который при необходимости запрашивается у покупателя.
При приёме платежей Apple Pay действуют те же ограничения, что и для банковских карт: оплатить можно до 250 000 рублей за раз и до 500 000 рублей в месяц с одной карты.
У ЮKassa есть аккаунт Payment Service Provider в Apple и групповой сертификат. Он позволяет нам подключать приём платежей Apple Pay для интернет-магазинов по упрощённой схеме. Вам не потребуется дополнительная интеграция и регистрация в Apple Developer Program. Если вы используете сценарий интеграции «Умный платеж», ApplePay будет добавлен автоматически как один из способов оплаты.
Бесконтактную оплату поддерживают устройства Apple с функциями Touch ID или Face ID. В этот список входят модели iPhone, начиная с iPhone 6, и все Apple Watch. Полный перечень есть на сайте Apple.
Нет, не нужны. Если вы используете решение для 54-ФЗ от ЮKassa, чеки при любом способе оплаты будут автоматически отправляться в вашу онлайн-кассу и далее в ФНС. Apple Pay относится к электронным средствам платежа, так же, как оплата банковскими картами, электронными деньгами или интернет-банкинг. Поэтому при приёме оплаты этим способом никаких отдельных настроек чеков по 54-ФЗ не требуется.
Источник
Как подключить к интернет-магазину Apple Pay и Google Pay бесплатно и без разработчика
По оценке аналитиков эквайрингового сервиса Тинькофф — Тинькофф Оплаты, до 30% покупок в интернет-магазинах происходит при помощи сервисов нативной оплаты Apple Pay и Google Pay. Подключить их самостоятельно — сложно. Рассказываем, как сделать все в два клика.
Алексей Величко
Ведущий менеджер Тинькофф Оплаты
По оценке аналитиков эквайрингового сервиса Тинькофф — Тинькофф Кассы, до 30% покупок в интернет-магазинах происходит при помощи сервисов нативной оплаты Apple Pay и Google Pay. Подключить их самостоятельно — сложно. Рассказываем, как это сделать в два клика.
Для чего интернет-магазинам подключать Apple Pay и Google Pay
Использование платежных сервисов Apple Pay и Google Pay в интернет-магазинах позволяет покупателям не вводить данные карт. Покупатель один раз привязывает карту в телефоне и дальше только подтверждает платеж отпечатком пальца, паролем или Face ID. В таком случае у них остается меньше времени, чтобы передумать и бросить неоплаченную корзину.
Интернет-магазины, которые не используют Apple Pay и Google Pay, теряют клиентов: некоторые покупатели бросают заказ на этапе оформления, потому что под рукой нет карты или не хочется вводить ее данные.
Проблема: чтобы подключить оплату, нужно нанимать разработчика
Подключить Apple Pay и Google Pay в интернет-магазине сложно, потому что нужно соответствовать требованиям Apple и Google к устройству сайта и безопасности.
Часто интернет-магазины работают на самописном сайте или используют CMS-систему, например Битрикс, но доделывают ее под себя, добавляя дополнительные функции. Чтобы подключить нативную оплату, владельцу интернет-магазина приходится нанимать разработчика, который должен разобраться в существующем устройстве сайта, привести его в соответствие с требованиями Apple и Google и получить сертификаты на установку Apple Pay и Google Pay.
Кроме зарплаты разработчику владелец интернет-магазина должен заплатить за регистрацию в Apple 99$ за каждый год использования Apple Pay.
Обычно процесс подключения нативной оплаты занимает минимум неделю. Если владелец интернет-магазина хочет подключить нативную оплату самостоятельно, он до сих пор должен нанимать разработчика и платить за регистрацию в Apple.
Вот такие действия нужно совершить интернет-магазину, чтобы подключить Apple Pay
Решение: владелец может сам подключить оплату в два клика
В Тинькофф Кассе подключение нативной оплаты происходит с помощью коробочного решения интеграции, которое Тинькофф Касса разработала самостоятельно и получила одобрение Apple и Google.
Все, у кого есть интернет-эквайринг от Тинькофф Кассы, теперь могут сами подключать Apple Pay и Google Pay в личном кабинете. Владельцы интернет-магазинов нажимают две кнопки — и Apple Pay и Google Pay работают на сайте.
Весь процесс подключения занимает меньше минуты. При этом не нужно нанимать разработчика, платить деньги за регистрацию и переделывать свой сайт. К мобильному приложению подключить Apple Pay и Google Pay можно при помощи SDK — специального комплекта средств разработки. Полностью автоматизировать этот процесс нельзя ограничений со стороны Apple и Google, но техническая поддержка Тинькофф Кассы готова ответить на все вопросы клиента по ходу интеграции.
У клиентов выросли продажи и количество успешных оплат
Новым решением уже начали пользоваться клиенты Тинькофф Кассы. Подключение Apple Pay и Google Pay сразу дает результаты.
Увеличились продажи. Клиенты, которые подключили нативную оплату, стали больше зарабатывать: пришли новые покупатели, а постоянные стали покупать больше. Покупать без карт проще: клиенты не бросают заказ на этапе оплаты и количество продаж растет.
Одними из первых решением Тинькофф Кассы воспользовалась крупная сеть аптек. За месяц до подключения нативной оплаты интернет-магазин приносил около 4000 продаж в месяц. В месяц подключения продажи выросли до 5000 платежей. Из них 1600 были сделаны с помощью Apple Pay — это 30% от общего числа продаж.
Увеличилось количество успешных оплат. Подключение нативных способов оплаты позволяет интернет-магазинам сократить число отказов ввода неправильных реквизитов. Например, если клиент перепутал цифры в номере карты — в платеже банк откажет. С нативной оплатой покупателю не нужно вводить реквизиты, поэтому успешных оплат становится больше.
Нативная оплата даст покупателям возможность платить так, как им удобно: интернет-магазины будут больше зарабатывать и не терять деньги на неуспешных платежах. Тинькофф Касса подключает Apple Pay и Google Pay в личном кабинете бесплатно: клиентам нужно только подключить интернет-эквайринг — и можно зарабатывать.
Источник