Как добавить Apple Pay на веб-сайт

Обновлено: 22.05.2024

Используйте эту страницу, чтобы узнать, как включить Apple Pay в Интернете с помощью Apple Pay JS или API запроса платежа. Эта демонстрация предварительно настраивает кнопку Apple Pay ниже со значениями по умолчанию. Узнайте больше, изменив значения в блоках кода на странице, чтобы настроить взаимодействие с платежными листами. Эта демонстрация отображает расшифровку ответов сервера после каждой транзакции для контекста. Щелкните или коснитесь вкладки "Показать расшифровку", чтобы просмотреть расшифровку транзакции.

Эта демонстрация не только позволяет вам опробовать API JavaScript для Apple Pay, но и может послужить учебным пособием по вашей собственной реализации. Предполагается, что вы уже настроили свою среду для обработки транзакций Apple Pay и знакомы с рекомендациями Apple Pay. Прежде чем начать интеграцию, мы рекомендуем ознакомиться с Руководством по началу работы с Apple Pay и Apple Pay в веб-интерфейсе пользователя. Дополнительные сведения о поддержке Apple Pay на вашем веб-сайте см. в разделе Apple Pay в Интернете.

Эта демонстрация генерирует исходный код, который вы можете скопировать в свой собственный проект. Нажмите или коснитесь вкладки «Показать исходный код», чтобы просмотреть исходный код. Демонстрация обновляет исходный код по мере изменения значений в блоках кода на странице. Если вы довольны конфигурацией, нажмите или коснитесь кнопки "Копировать" на вкладке "Показать исходный код", чтобы скопировать исходный код в буфер обмена.

Требования

В этой демонстрации используется Apple Pay JS версии 3, и для ее запуска необходимо использовать:

Устройства iOS с iOS 11 или более поздней версии
Safari 11 в macOS 10.13 или новее

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

Чтобы отобразить кнопку Apple Pay, используйте следующий код, чтобы загрузить сценарий кнопки на свою веб-страницу из сети доставки контента:

Кнопка Apple Pay с JavaScript предоставляет различные типы кнопок Apple Pay, которые можно использовать на своем веб-сайте для инициирования транзакции. Вы можете указать стиль, тип и локализацию кнопки Apple Pay с помощью атрибутов. Используйте CSS для установки других свойств, таких как размер и радиус угла. Использование официального элемента кнопки Apple Pay гарантирует, что ваш сайт будет отображаться в новейшем стиле, правильно отображаться на разных устройствах и соответствовать рекомендациям Apple. Рекомендации по дизайну см. в разделе «Руководство по пользовательскому интерфейсу» > Apple Pay > «Кнопки и метки».

Попробуйте: настройки дисплея

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

Угловой радиус кнопки

Угловой радиус: 3 пикселя

Отступ кнопки Y

Отступ кнопки Y: 0 пикселей

Заполнение кнопки X

Отступ кнопки X: 0 пикселей

Размер блока кнопок

Создать запрос на оплату

Когда ваш клиент нажимает кнопку Apple Pay или касается ее, вы должны сначала создать объект ApplePaySession, который включает словарь ApplePayPaymentRequest с подробными сведениями о транзакции, которые будут отображаться в платежном листе.

Запрос ApplePayPaymentRequest требует подробностей, включая: общую сумму платежа за транзакцию, валюту и поддерживаемые платежные сети. При желании вы можете передать lineItems, чтобы показать дополнительные сборы и скидки, а также shippingMethods, чтобы позволить покупателю выбирать из различных вариантов доставки. Если вам требуется адрес или контактная информация от вашего клиента, запросите их, передав значения в requiredShippingContactFields или requiredBillingContactFields .

Попробуйте: ApplePayPaymentRequest

Измените значения в ApplePayPaymentRequest, показанном ниже, и нажмите или коснитесь кнопки Apple Pay, чтобы просмотреть лист платежей. Выберите «Базовый запрос», чтобы просмотреть платежный лист только с обязательными полями. Выберите «Подробный запрос», чтобы отобразить код, включая необязательные поля, например элементы строки.

Завершить проверку продавца

Прежде чем вы сможете отобразить лист оплаты покупателю, вы должны создать действительный платежный сеанс, взаимодействуя с серверами Apple Pay. Из соображений безопасности это должен делать ваш сервер, а не клиентский код вашего браузера, в отличие от всего остального в этой демонстрации. Чтобы запустить процесс проверки продавца, вызовите метод begin для объекта сеанса, который вы создали выше.

После этого браузер вызовет обработчик onvalidatemerchant, который должен получить сеанс продавца с вашего сервера.

См. инструкции в документе «Запрос платежного сеанса Apple Pay», чтобы реализовать конечную точку сервера, отвечающую за получение объекта сеанса продавца с серверов Apple Pay. В случае успеха серверы Apple Pay вернут объект сеанса продавца, который затем ваш сервер должен передать обратно в качестве ответа браузеру.

После того как у вас есть объект ответа сеанса продавца в браузере, вы должны завершить обработчик onvalidatemerchant, передав этот объект методу completeMerchantValidation объекта сеанса. Браузер отобразит платежный лист.

В следующем коде показан пример проверки продавца:

Ответить на взаимодействие с платежным листом

После завершения проверки продавца Apple Pay предоставляет информацию о выбранных платежных листах вашего клиента, чтобы вы могли рассчитать окончательную стоимость транзакции. Окончательные детали транзакции могут зависеть от способа оплаты пользователя, платежного адреса, адреса доставки или способа доставки. Для обработки этих корректировок реализуйте необязательные обработчики onpaymentmethodselected, onshippingmethodselected и onshippingcontactselected. Когда браузер вызывает один из этих обработчиков, у вас есть 30 секунд, чтобы обработать его и вызвать соответствующую функцию обратного вызова, в противном случае время транзакции истекает. Все обратные вызовы принимают объект с ключами newTotal (обязательно) и newLineItems (необязательно). Кроме того, вы можете указать newShippingMethods для обновления методов доставки и ошибок, чтобы указать на проблемы с выбранным пользователем адресом доставки при вызове completeShippingContactSelection . Вы также можете вызывать обратные вызовы с пустым объектом или нулевым значением, если лист платежей не требует изменений.

< /tr> < /tr>

Обработчики событий	Функция обратного вызова	Обновить структуру	Обновить свойства
onpaymentmethodselected	completePaymentMethodSelection	ApplePayPaymentMethodUpdate	newTotal (обязательно) newLineItems (необязательно)
onshippingmethodselected	completeShippingMethodSelection	ApplePayShippingMethodUpdate	newTotal (обязательно) newLineItems (необязательно)
onshippingcontactselected	completeShippingContactSelection	ApplePayShippingContactUpdate	newTotal (обязательно) newLineItems (необязательно) newShippingMethods (необязательно) ошибки (необязательно)

Демонстрационное примечание. Тестовая транзакция всегда проходит с ответом об успехе по умолчанию при вызове completePaymentMethodSelection . Тестовая транзакция проходит в newLineItems и newTotal при вызове completeShippingMethodSelection . См. ответы в стенограмме.

Запрос адреса доставки

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

Отредактированная платежная информация включает только данные, необходимые для выполнения необходимых транзакционных задач, таких как расчет налогов или стоимость доставки, и может различаться в зависимости от географического региона пользователя.

В следующем коде показан пример отредактированной платежной информации:

Попробуйте: CompleteShippingContactSelection

Выберите "Успех" с обновлением позиций и общей суммой или без него. Выберите «Failure», чтобы увидеть ответ CompleteShippingContactSelection с пользовательскими ошибками. Вы можете отредактировать объект ответа ApplePayShippingContactUpdate ниже, чтобы поэкспериментировать с различными ответами. Нажмите или коснитесь кнопки Apple Pay ниже, чтобы увидеть, как в платежном листе отображаются обновления или ошибки адреса.

Узнайте, как настроить учетную запись разработчика для поддержки Apple Pay, убедитесь, что транзакции успешно завершены, и убедитесь, что реализация Apple Pay соответствует рекомендациям для приложений и Интернета.

Создайте свое приложение и веб-сайт.

Настройка учетной записи разработчика

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

Apple Pay для приложений

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

Apple Pay в Интернете

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

Apple Pay в сообщениях

Предоставьте клиентам возможность быстро и легко оплачивать покупки с помощью Apple Pay в приложении iMessage или непосредственно в сеансе Messages for Business.

Интеграция, тестирование и проверка.

Платформы электронной коммерции и поставщики платежных услуг

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

API регистрации продавца через веб-сайт Apple Pay

Одобренные платформы электронной коммерции и поставщики платежных услуг могут использовать API регистрации продавцов Apple Pay Web вместе со своими идентификаторами продавцов для регистрации и отмены регистрации веб-сайтов своих продавцов в Apple Pay.

Тестирование в песочнице

Песочница Apple Pay позволяет протестировать реализацию Apple Pay с тестовыми кредитными и дебетовыми картами.

Ознакомьтесь с рекомендациями.

Руководство по проверке App Store

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

Правила допустимого использования Apple Pay в Интернете

Перед развертыванием Apple Pay на своем веб-сайте убедитесь, что оно соответствует этим рекомендациям.

Рекомендации по дизайну

Узнайте, как оптимизировать дизайн и процесс оплаты для Apple Pay.

Поставщики платежных услуг

Поддержите Apple Pay быстро и надежно с помощью SDK или API от поставщика платежных услуг (PSP).

Энтони Хеддингс

Энтони Хеддингс
Писатель

Энтони Хеддингс (Anthony Heddings) – штатный облачный инженер LifeSavvy Media, технический писатель, программист и эксперт по платформе Amazon AWS. Он написал сотни статей для How-To Geek и CloudSavvy IT, которые были прочитаны миллионы раз. Подробнее.

Shutterstock/LightField Studios

Apple Pay – это способ ускоренной оплаты, который позволяет очень легко покупать товары как лично, так и через Интернет. Его легко интегрировать на большинство платформ электронной коммерции, и он повышает качество обслуживания клиентов в вашем интернет-магазине.

Как работает Apple Pay?

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

Apple Pay можно использовать на любом устройстве с Touch ID или Face ID, однако он будет работать только в Safari, а это означает, что пользователи других браузеров, таких как Chrome, скорее всего, выберут другой вариант при оплате. Поскольку это эксклюзивно для устройств Apple, вы, конечно же, захотите предложить другие варианты, такие как Google Pay, PayPal или обычные дебетовые карты.

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

Действительно, вы должны следовать первым двум правилам в любом случае. Последнее может выполняться некоторыми службами автоматически, но если вы делаете что-то вручную (например, с помощью Stripe API), вам, возможно, придется настроить это самостоятельно.

Если вы не хотите использовать какую-либо внешнюю службу, вы также можете настроить Apple Pay вручную с помощью API JavaScript от Apple. Это довольно сложно, и, учитывая, что для работы с кредитными картами вам, скорее всего, все равно понадобится внешний сервис, мы настоятельно рекомендуем использовать такой сервис, как Stripe.

Использование Shopify

Если вы используете Shopify, одного из крупнейших поставщиков услуг электронной коммерции, настройка очень проста и требует нажатия нескольких кнопок. В меню "Настройки" в левом нижнем углу консоли администратора нажмите "Платежи":

Затем в разделе кредитных карт нажмите «Управление», затем включите Apple Pay в разделе «Ускоренные
оплаты». Ваш магазин должен сразу же отобразить Apple Pay в качестве опции на поддерживаемых устройствах.

Shopify имеет много других преимуществ — конечно, вы можете использовать их для приема платежей по кредитным картам на своем веб-сайте, но они также поддерживают платежи с использованием биткойнов или других криптовалют, а также множество других вариантов, таких как ShopPay.

Мы настоятельно рекомендуем использовать Shopify, если вы собираетесь продавать товары через Интернет. Это не только самая крупная платформа, отличная от Amazon, но и удобство работы для конечного пользователя лучше, чем что-либо еще, особенно в сочетании с простотой использования Apple Pay.

Использование WooCommerce

Еще одно популярное решение для электронной коммерции — WooCommerce, работающее на WordPress. Вы можете легко добавить к нему поддержку Apple Pay.

Если вы используете платежи WooCommerce, вам просто нужно включить «Кнопки запроса платежа» в разделе «Платежи» > «Настройки». WooCommerce должен автоматически зарегистрировать ваш домен в Apple и выполнить все необходимые настройки для его работы.

Если вы используете Stripe для оформления покупок в WooCommerce, он должен быть включен автоматически, хотя вы должны убедиться, что «Кнопки запроса платежа» отмечены в разделе WooCommerce > Настройки > Платежи > Stripe.

Настройка касс с Stripe

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

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

Если вы используете Stripe API на своем сайте, вам потребуется выполнить небольшую настройку. Во-первых, вам нужно подтвердить свой домен в Apple. Загрузите файл ассоциации домена и разместите его по следующему адресу:

Затем вам нужно будет отправить запрос в Stripe API для проверки. Вы найдете ключ sk_live_ на панели управления Stripe.

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

› Как использовать Docker для упаковки приложений CLI
› Как развернуть сервер GitLab с помощью Docker
› Что будет в React 18?
› Как развернуть веб-сервер Caddy с помощью Docker
› CloudFoundry или Kubernetes: какую облачную платформу выбрать?
› Что нового в TypeScript 4.6?

Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать CloudSavvy IT.

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

Наши услуги

Наша команда готова помочь вам в преобразовании и создать индивидуальные решения, необходимые для улучшения каждого аспекта вашего бизнеса за счет экспоненциального повышения эффективности базовых процессов. Мы‌‌предлагаем‌‌услуги‌‌которые распространяют ИИ по всей вашей компании, распространяя его преимущества на все отделы, не оставляя камня на камне:

Программное обеспечение для обработки платежей и платежные шлюзы
Программное обеспечение для торговых точек
Онлайн-платежные терминалы
Цифровой кошелек
Пользовательское платежное приложение
Решения для бесконтактных платежей

Возможности

Онлайн-платежи дают широкие возможности для расширения ваших возможностей в Интернете. Чтобы максимизировать эффективность и гарантировать надежность вашего решения, мы включили следующие функции:

Меры безопасности: шифрование SSL/TLS, токенизация.

Соответствие PCI DSS, EMV, PA-DSS

Возможность оплаты по всему миру

Интеграция API со сторонними шлюзами, агрегаторами и другими платформами

Разработка веб- и мобильных платежей

Запланируйте звонок с нашими
менеджерами, чтобы узнать подробности

Наши технологии

Мы предлагаем широкий спектр технологий, подходящих для разработки решений для мобильных и веб-платежей.

Отзывы

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

Рафаэль

Нью-Джерси, США

Основатель и генеральный директор Zivugtech

Проект:	Zivugtech - Система управления кадровым агентством
Отрасль:	Кадры и подбор персонала

Мой проект с GBKSOFT дал мне возможность разрабатывать свое программное обеспечение, сохраняя напряженный график. Ана, которая была моим менеджером проекта, была очень профессиональной и всегда понимала мое видение и то, что я хотел. Я бы снова порекомендовал GBKSOFT любой другой компании или человеку, у которого есть видение своего веб-приложения. Спасибо, GBKSOFT!

С 2015 года

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