Платеж не выполнен apple pay js

Обновлено: 04.07.2024

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

С помощью платежной системы Apple Pay пользователи iPhone 6 и iPhone 6+, а также владельцы новейших версий Apple Watch могут совершать покупки онлайн, пользоваться дополнительными преимуществами apple pay для мобильных приложений и совершать платежи при помощи технологии NFC (Near Field Communication). Для авторизации платежей используются технологии Touch ID или Face ID.

Карта доступности Apple Pay (по состоянию на 16 августа 2018 года) Wikipedia

Создаем проект на основе Single View Application.

Далее переходим к классу ViewController. В нем и будет осуществляться работа.

Для подключения Apple Pay необходимо воспользоваться библиотекой PassKit.

Добавить Apple Pay в приложение;
Управлять карточками в приложении Wallet.

Для настройки Apple Pay необходимо выполнить 3 обязательных шага:

Создать merchant ID;
Включить Apple Pay в Xcode;
Создать тестового пользователя.

В группе Identifiers выбираем вкладку App IDs. Заполняем необходимые поля соответственно мобильному приложению и следуем дальнейшим инструкциям.

После этого в группе Identifiers необходимо выбрать пункт Merchant IDs.

Следуя инструкциям, создаем Merchant ID для приложения.

Мы практически завершили приготовления к нашему проекту.

Сначала нам необходимо активировать Apple Pay в Capabilities Xcode и добавить, ранее созданный Merchant ID.

Все, Apple Pay активирован. Переходим к написанию кода.

Сначала откройте Main.storyboard и добавьте кнопку.

Для начала работы необходимо перейти во ViewController.swift и импортировать библиотеку PassKit.

Далее необходимо создать экземпляр класса PKPaymentRequest.

// MARK: - @IBActions @IBAction func purchase(_ sender: Any?) < if let controller = PKPaymentAuthorizationViewController(paymentRequest: paymentRequest) < controller.delegate = self present(controller, animated: true, completion: nil) >>

и создать IBAction для кнопки.

Открывая PKPaymentAuthorizationViewController, необходимо подписаться на его delegate, таким образом, будет виден статус транзакции.

Кроме того, необходимо имплементировать методы делегата. Имитировать успешную транзакцию мы будем следующим образом:

extension ViewController: PKPaymentAuthorizationViewControllerDelegate < func paymentAuthorizationViewController(_ controller: PKPaymentAuthorizationViewController, didAuthorizePayment payment: PKPayment, handler completion: @escaping (PKPaymentAuthorizationResult) -> Void) < completion(PKPaymentAuthorizationResult(status: .success, errors: nil)) >func paymentAuthorizationViewControllerDidFinish(_ controller: PKPaymentAuthorizationViewController) < controller.dismiss(animated: true, completion: nil) >>

Мы готовы к проверке Apple Pay.

Перед проверкой Apple Pay необходимо пройти авторизацию с помощью ранее созданного Sandbox пользователя и добавить в iPhone карту для тестирования.

Пример карт для тестирования:

FPAN: 5204 2477 5000 1471
Expiration Date: 11/2022
CVC: 111

FPAN: 4761 1200 1000 0492
Expiration Date: 11/2022
CVV 533

Запустите проект и нажмите кнопку «Pay».

Поздравляем, теперь Вы знаете, как интегрировать Apple Pay в мобильное приложение.

Пользователи могут совершать покупки онлайн, пользуясь Safari браузером, а также через мобильные приложения. Больше нет необходимости носить кредитные карты с собой, достаточно коснуться пальцем экрана iPhone ( если у Вас Touch ID) или просто усмехнуться в экран (в случае с Face ID) и Ваша покупка будет подтверждена.

Безопасно ли это? — спросите Вы. — Да! Однозначно, это безопасно. Во время осуществления оплаты девайс не передает данные платежной карты. Телефон генерирует специальный одноразовый токен и использует его для осуществления транзакции. Благодаря технологии Apple Pay можно практически полностью отказаться от использования пластиковых карт.

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

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

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

Номер телефона плательщика является обязательным параметром для платежа в Плтароне. Номер телефона можно передать в параметре 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 🔗

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

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

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

где <payment_as_json> - это объект ApplePayPayment преобразованный в JSON.

От автора: рады сообщить, что Safari 11.1 на macOS и Safari на iOS 11.3 теперь поддерживают W3C Payment Request API для проведения транзакций Apple Pay в интернете. Впервые мы представили Apple Pay on the Web на macOS Sierra и iOS 10. Apple Pay сделал онлайн транзакции простыми в использовании, защищенными и конфиденциальными. Мы были рады увидеть, как массово ее стали применять продавцы в последующие годы.

Однако мы поняли, что продавцам необходимо иметь несколько способов оплаты, а это значит еще больше сложностей. Payment Request нацелен на снижение этой сложности, так как поддерживает способы оплаты в нескольких браузерах с помощью стандартного API. Сегодня я проведу вам пошаговый разбор того, как производится оплата через Apple Pay с помощью Payment Request. Если вы уже работали с Apple Pay JS, описанное ниже вам будет знакомо. Если нет – отличный шанс познакомиться!

Предварительные условия

Для дальнейшей работы вам необходимо зарегистрировать идентификатор продавца и настроить сервер на обработку транзакций Apple Pay. Подробное описание, как это сделать, можно найти в документации Apple Pay on the Web.

Отображение кнопок Apple Pay

Транзакции Apple Pay всегда начинает покупатель, поэтому вам нужно отобразить кнопку Apple Pay, по которой они смогут нажать или кликнуть. WebKit предоставляет встроенную поддержку рендера кнопок Apple Pay для единообразного визуального представления. Как отобразить стандартную кнопку Apple Pay:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

< button style = "-webkit-appearance: -apple-pay-button;" > < / button >

Существуют другие типы кнопок с разными стилями. Вот такие кнопки вы могли видеть, покупая что-то в Safari:

Исходя из Apple Pay on the Web Human Interface Guidelines, необходимо отображать кнопки Apple Pay всегда, когда пользователь использует поддерживаемое устройство. Для проверки, поддерживает ли устройство покупателя Apple Pay, вызовите ApplePaySession.canMakePayments():

if ( window . ApplePaySession && ApplePaySession . canMakePayments ( ) )

После того, как покупатель нажмет или кликнет на кнопку Apple Pay необходимо предоставить расчетный лист Apple Pay. Если у клиента нет привязанной карты, можно принять в Apple Pay. Safari подскажет, что нужно сделать, прежде чем продолжить транзакцию. Это правила Apple Pay, поэтому для настройки необходимо использовать Apple Pay JS ApplePaySession API. Напоминание о транзакции можно выполнить с помощью стандартного Payment Request API.

Создание PaymentRequest

После клика или нажатия на кнопку Apple Pay вы инициируете транзакцию путем создания нового PaymentRequest:

request = new PaymentRequest ( methods , details , options ) ;

Конструктор PaymentRequest принимает 3 аргумента: поддерживаемые вами методы оплаты, детали для отображения покупателю (варианты доставки и общая сумма, например) и любые необходимые вам опции.

Способы оплаты

Способы оплаты представляют собой инструменты, с помощью которых можно принимать платежи покупателей через Payment Request. Вы указываете принимаемые способы оплаты в виде последовательности словарей PaymentMethodData, каждый из которых содержит идентификатор (supportedMethods) и связанные с ним данные.

merchantCapabilities : [ "supports3DS" , "supportsCredit" , "supportsDebit" ] , supportedNetworks : [ "amex" , "discover" , "masterCard" , "visa" ] ,

Safari поддерживает только способ оплаты Apple Pay, но в других браузерах способов может быть больше. Если вы указываете в запросе несколько способов оплаты, браузер сам решает, какой представить покупателю на основе доступности устройства и настроек пользователя.

Детали платежа

Детали платежа представляет словарь PaymentDetailsInit. Он содержит общую сумму транзакции, отображаемые элементы, специальные модификаторы для способа оплаты (подробнее о модификаторах ниже). Как выглядят валидные детали платежа за предмет стоимостью $20 плюс налог и 2 варианта доставки:

Что такое модификаторы?

В детали платежа можно подключить последовательность modifiers (необязательно). Модификаторы обновляют отображаемые в транзакции элементы и общую сумму при наступлении условий, указанных для выбранного способа оплаты. В Apple Pay с помощью модификаторов можно настраивать цену в зависимости от типа выбранной карты оплаты в списке Apple Pay. Например, следующий модификатор применяет скидку $1.00, если покупатель выбирает в Apple Pay дебетовую карту:

Модификаторы предоставляют функциональность из события paymentmethodselected для Apple Pay JS. Подробности читайте в ApplePayModifier.

Опции оплаты

Опции оплаты представлены в словаре PaymentOptions. Запросить имя покупателя, email, телефон или тип доставки можно следующим образом:

Если requestShipping установить в true, в списке отобразятся опции доставки, указанные в Payment Details. Вы получите запрошенную информацию, как только покупатель разрешит оплату.

Исключения

Safari может вызвать исключение при создании нового PaymentRequest. Исключения могут быть вызваны следующими причинами:

Frame не в безопасном контексте

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Frame является общим subframe

Не определены способы оплаты

Неправильный идентификатор способа оплаты

Вызов JSON.stringify() на данных способа оплаты не удался

Указана неправильная денежная мумма (отрицательная общая сумма или несколько валют)

Метод canMakePayment()

После создания PaymentRequest его можно спросить, а сможет ли ваш клиент разрешить транзакцию, учитывая принимаемые вами способы оплаты. Для этого необходимо вызвать метод canMakePayment(), который возвращает promise (который резолвится в true или false). В Safari когда Apple Pay является одним из способов оплаты, canMakePayment() резолвится в true только в том случае, если у покупателя добавлена активная карта в Apple Pay. Это эквивалент работы ApplePaySession.canMakePaymentsWithActiveCard() в Apple Pay JS.

Как мы говорили в разделе «отображение кнопок Apple Pay», Apple Pay Human Interface Guidelines требует показывать кнопку Apple Pay, если покупатель использует поддерживаемые устройства, независимо от того, если ли у них активная добавленная карта или нет. Поэтому не нужно прятать кнопку Apple Pay, когда canMakePayment() резолвится в false. Всегда показывайте кнопку Apple Pay, если ApplePaySession.canMakePayments() возвращает true. Всегда предоставляйте список Apple Pay, когда покупатель кликает или нажимает на кнопку. Safari уведомит клиента, если у него не добавлена карта, прежде чем проводить транзакцию. Подробнее читайте в Human Interface Guidelines > Apple Pay on the Web.

Метод show()

После нажатия или клика на кнопку Apple Pay необходимо представить список Apple Pay. Для этого необходимо вызвать метод show(). Метод возвращает promise, который резолвится в PaymentResponse, как только покупатель разрешил оплату. Если покупатель отменил транзакцию, promis отклоняется с AbortError.

Можно вызвать show() с promise для PaymentDetailsUpdate (необязательно). Иногда вы можете находиться в процессе вычисления деталей оплаты, когда покупатель нажимает или кликает кнопку Apple Pay. В таком случае можно создать новый PaymentRequest с прейсхолдерами деталей, после чего вызвать show() с promise, чтобы позже подгрузить обновленные детали. После резолвинга promise Safari отобразит обновленные детали в списке Apple Pay.

Safari может отклонить promise, возвращенный show() с исключением. Исключения могут быть вызваны следующими причинами:

Show() не был вызван активацией пользователя (кликом или нажатием)

Запрос уже был прерван

Сессия Apple Pay уже активна

Неправильные данные платежа (например, не заполнены обязательные поля)

Метод abort()

Прервать транзакцию можно с помощью метода abort(). При этом Safari очищает список Apple Pay и отклоняет promise, возвращенный show() с AbortError. Если транзакция уже была отклонена, или show() еще не был вызван, вызов abort() выбросит InvalidStateError.

Валидация продавца

Чтобы Safari могу представить список Apple Pay, необходимо получить сессию платежа от Apple. Этот процесс называют валидацией продавца.

После вызова show() Safari отправляет событие merchantvalidation в ваш объект PaymentRequest. Событие определяет атрибут validationURL, представляющий Apple URL, с которым связывается ваш сервер для получения сессии платежа. Необходимо вызвать метод события complete() с promise, который вы будете резолвить этой сессией оплаты, как только получите ее.

Как выглядит обработчик события merchantvalidation:

const sessionPromise = fetchPaymentSession ( event . validationURL ) ;

События доставки

После получения сессии продавца Safari отобразит список Apple Pay для покупателя. Если вы запрашивали доставку, покупатель сможет выбрать представленные способы доставки и адрес. После того, как пользователь заполнит эти поля, Safari отправляет событие shippingoptionchange или shippingaddresschange в ваш объект PaymentRequest.

Shippingoptionchange

Как только пользователь выбирает опцию доставки, Safari отправляет событие shippingoptionchange. В обработчике события можно определить выбранный способ доставки через атрибут shippingOption в PaymentRequest. Чтобы обновить детали платежа выбранным способом доставки, вызовите updateWith() на объекте события с promise, который резолвится в PaymentDetailsUpdate.

При запросе доставки в Apple Pay всегда необходимо следить за shippingoptionchange и вызывать updateWith() с promise, который резолвится в течение 30 секунд. В противном случае время транзакции истекает.

Shippingaddresschange

При использовании Apple Pay Safari может редактировать некоторые детали адреса доставки. Например, в США предоставляются только город, штат, ZIP-код из 5 цифр и округ. Safari предоставляет полный, неотредактированный адрес доставки, как только покупатель разрешает платеж.

При запросе доставки в Apple Pay всегда необходимо следить за shippingaddresschange и вызывать updateWith() с promise, который резолвится в течение 30 секунд. В противном случае время транзакции истекает.

Обработка разрешения платежа

Когда покупатель разрешает платеж, Safari резолвит promise , полученный вами от вызова show() с PaymentResponse. В зависимости от того, что запрошено в вашем PaymentOptions ответ может содержать выбранный вариант доставки, адрес доставки, имя, email и телефон покупателя.

Ответ также хранит в себе идентификатор способа оплаты, используемый для проведения транзакции (methodName) и связанные с ним details. Если в качестве способа оплаты выбран Apple Pay, связанные details – это словарь ApplePayPayment. ApplePayPayment содержит токен Apple Pay, с помощью которого вы обрабатываете разрешение платежа. Он также содержит счет и контактную информацию для доставки в виде ApplePayPaymentContacts, если вы запрашивали их в ApplePayRequest.

У вас есть все кусочки для выполнения транзакции Apple Pay через Payment Request. Как выглядит сессия Apple Pay через Payment Request:

Что делать, если не проходит оплата через Apple Pay? Возможно, вы что-то сделали не так в настройках или выбранный вами терминал для оплаты покупок, увы, не работает с технологией бесконтактных платежей, или, может, у вас на счету закончились средства (ну с кем не бывает). Но пойдем по порядку.

Не получается оплатить через Apple Pay - что я делаю не так?

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

Если с этим разделом всё ясно, проблем нет, но оплатить через Apple Pay так и не получается, обратимся к самому началу. Вы уверены, что ваше устройство совместимо с Эппл Пей? Не допустили ли вы ошибки в момент привязки своей карты?

Прикрепляем карту на Айфон (самый популярный гаджет):

Зайдя в программу Wallet, нажимаем пункт "Добавить. "
Если вы хотите добавить карту, которая уже используется вами в iTunes, введите код безопасности и не мудрите.
Кнопка "Далее". Банк проверит, можете ли вы добавить эту карту: есть ли на ней средства и сотрудничает ли этот банк с Эппл. Может потребуется еще какая-то информация для проверки, тогда надо будет вернуться в раздел с настройками и добавить ее.
Если не возникло никаких недоразумений с банком, то можно приступать к использованию сервиса.

Но если какие-то вопросы у вас всё же остались, если нам не удалось помочь вам в решении вашей проблемы, вы всегда можете написать нам комментарий или обратиться в техподдержку Эппл за более детальной консультацией.

Не проходит оплата : 6 комментариев

у меня не проходит только оплата проездов - метро, маршрутки. выдаёт "некорректная карта" в магазинах все работает отлично. Ответить ↓

У вас не так написано что карта не проходит)) а скорее карта в стоп-листе Ответить ↓

Доброго времени суток. У меня на iPhone 6s привязаны Карты виза и Мастеркард, добавились без проблем. Какое-то время всё оплачивала с телефона и в магазине по терминалу и на сайтах при помощи Apple pay. Потом в один момент в тех же магазинах, где раньше расплачивалась, перестала проходить оплата. Пишет поднесите к терминалу и ничего не происходит. Но оплата на сайтах прекрасно работает. Пыталась решить проблему сама. Делала жёсткий сброс, меняла регион, делала сброс настроек сети. Ничего не помогло. Подскажите, как решить проблему? Ответить ↓

Юлия, здравствуйте. Рекомендуем вам обратиться с этой проблемой в тех. поддержку. О том, как это сделать, вы можете узнать здесь. Ответить ↓

Добрый вечер у меня Карты VISA и Masterkard привязаны,добавились в валлет без проблем.Но оплата не проходит,пишет поднесите к терминалу.Подскажите пожалуйста что делать? Ответить ↓

Добрый день. У меня iPhone XS Max. Привязала 2 карты, одна кредитная (русский стандарт банк) , вторая дебетовая (Сбербанк). В магазинах расплачивалась без проблем, все оплаты проходили. Через неделю буквально перестала проходить оплата кредитной карты. Я решила удалить ее и привязать заново, но уже выскакивает надпись, что данная карта не действительна, но такого не может быть т.к. сама пластиковая карта на кассе проходит без проблем. Со второй картой такая же история произошла, но уже позже. Ответить ↓

Читайте также: