Настройка способа оплаты

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

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

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

Поддержка браузера

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

Хром Сафари Firefox
Рабочий стол Андроид Рабочий стол мобильный Настольный/мобильный
API запроса платежа
API обработчика платежей
Платежное приложение iOS/Android ✔* ✔*

Как браузер обнаруживает платежное приложение

Каждое платежное приложение должно обеспечивать следующее:

  • Идентификатор способа оплаты на основе URL-адреса
  • Манифест метода оплаты (кроме случаев, когда идентификатор метода оплаты предоставлен третьей стороной)
  • Манифест веб-приложения
Диаграмма. Как браузер обнаруживает платежное приложение по идентификатору способа оплаты на основе URL-адреса.

Процесс обнаружения начинается, когда продавец инициирует транзакцию:

  1. Браузер отправляет запрос на URL-адрес идентификатора метода оплаты и получает манифест метода оплаты .
  2. Браузер определяет URL-адрес манифеста веб-приложения из манифеста способа оплаты и получает манифест веб-приложения.
  3. Браузер определяет, запускать ли платежное приложение ОС или веб-платежное приложение из манифеста веб-приложения.

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

Шаг 1. Укажите идентификатор способа оплаты.

Идентификатор способа оплаты — это строка на основе URL-адреса. Например, идентификатор Google Pay — https://google.com/pay . Разработчики платежных приложений могут выбрать любой URL-адрес в качестве идентификатора способа оплаты, если они контролируют его и могут предоставлять произвольный контент. В этой статье мы будем использовать https://bobbucks.dev/pay в качестве идентификатора способа оплаты.

Как продавцы используют идентификатор способа оплаты

Объект PaymentRequest состоит из списка идентификаторов способов оплаты , которые идентифицируют платежные приложения, которые продавец решает принять. Идентификаторы способов оплаты задаются как значение свойства supportedMethods . Например:

[продавец] запрашивает оплату:

const request = new PaymentRequest([{
  supportedMethods
: 'https://bobbucks.dev/pay'
}], {
  total
: {
    label
: 'total',
    amount
: { value: '10', currency: 'USD' }
 
}
});

Шаг 2. Отправьте манифест способа оплаты

Манифест метода оплаты — это файл JSON, который определяет, какое платежное приложение может использовать этот метод оплаты.

Предоставьте манифест способа оплаты

Когда продавец инициирует платежную транзакцию, браузер отправляет HTTP-запрос GET на URL-адрес идентификатора способа оплаты . Сервер отвечает телом манифеста метода оплаты.

Манифест метода оплаты имеет два поля: default_applications и supported_origins .

Имя свойства Описание
default_applications (обязательно) Массив URL-адресов, указывающий на манифесты веб-приложений, где размещены платежные приложения. (URL-адрес может быть относительным). Ожидается, что этот массив будет ссылаться на манифест разработки, производственный манифест и т. д.
supported_origins Массив URL-адресов, указывающий на источники, на которых могут размещаться сторонние платежные приложения, реализующие тот же метод оплаты. Обратите внимание, что способ оплаты может быть реализован несколькими платежными приложениями.
Поля манифеста способа оплаты

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

[обработчик платежей] /pay-manifest.json:

{
 
"default_applications": ["https://bobbucks.dev/manifest.json"],
 
"supported_origins": [
   
"https://alicepay.friendsofalice.example"
 
]
}

Когда браузер считывает поле default_applications , он находит список ссылок на манифесты веб-приложений поддерживаемых платежных приложений.

При необходимости направьте браузер на поиск манифеста способа оплаты в другом месте.

URL-адрес идентификатора способа оплаты может дополнительно отвечать заголовком Link , указывающим на другой URL-адрес, по которому браузер может получить манифест метода оплаты. Это полезно, когда манифест метода оплаты размещен на другом сервере или когда платежное приложение обслуживается третьей стороной.

Как браузер обнаруживает платежное приложение по идентификатору способа оплаты на основе URL-адреса с перенаправлениями

Настройте сервер способа оплаты так, чтобы он отвечал заголовком HTTP Link с атрибутом rel="payment-method-manifest" и URL-адресом манифеста метода оплаты .

Например, если манифест находится по адресу https://bobbucks.dev/payment-manifest.json , заголовок ответа будет включать:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

URL-адрес может быть полным доменным именем или относительным путем. Проверьте https://bobbucks.dev/pay/ на наличие сетевого трафика, чтобы увидеть пример. Вы также можете использовать команду curl :

curl --include https://bobbucks.dev/pay

Шаг 3. Отправьте манифест веб-приложения

Манифест веб-приложения используется для определения веб-приложения, как следует из названия. Это широко используемый файл манифеста для определения прогрессивного веб-приложения (PWA) .

Типичный манифест веб-приложения будет выглядеть так:

[обработчик платежей] /manifest.json:

{
 
"name": "Pay with Bobpay",
 
"short_name": "Bobpay",
 
"description": "This is an example of the Payment Handler API.",
 
"icons": [
   
{
     
"src": "images/manifest/icon-192x192.png",
     
"sizes": "192x192",
     
"type": "image/png"
   
},
   
{
     
"src": "images/manifest/icon-512x512.png",
     
"sizes": "512x512",
     
"type": "image/png"
   
}
 
],
 
"serviceworker": {
   
"src": "service-worker.js",
   
"scope": "/",
   
"use_cache": false
 
},
 
"start_url": "/",
 
"display": "standalone",
 
"theme_color": "#3f51b5",
 
"background_color": "#3f51b5",
 
"related_applications": [
   
{
     
"platform": "play",
     
"id": "com.example.android.samplepay",
     
"min_version": "1",
     
"fingerprints": [
       
{
         
"type": "sha256_cert",
         
"value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
       
}
     
]
   
}
 
]
}

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

Имя свойства Описание
name (обязательно) Используется в качестве названия платежного приложения.
icons (обязательно) Используется в качестве значка платежного приложения. Эти значки используются только в Chrome; другие браузеры могут использовать их в качестве запасных значков, если вы не укажете их как часть платежного средства.
serviceworker Используется для обнаружения сервисного работника, который работает как приложение для веб-платежей.
serviceworker.src URL-адрес для загрузки сценария сервисного работника.
serviceworker.scope Строка, представляющая URL-адрес, определяющий область регистрации сервисного работника.
serviceworker.use_cache URL-адрес для загрузки сценария сервисного работника.
related_applications Используется для обнаружения приложения, которое действует как платежное приложение, предоставляемое ОС. Более подробную информацию можно найти в руководстве для разработчиков платежных приложений Android .
prefer_related_applications Используется для определения того, какое платежное приложение запускать, когда доступны как платежное приложение, предоставляемое ОС, так и веб-платежное приложение.
Важные поля манифеста веб-приложения
Платежное приложение со значком.
Ярлык и значок платежного приложения.

Свойство name манифеста веб-приложения используется в качестве имени платежного приложения, свойство icons используется в качестве значка платежного приложения.

Как Chrome определяет, какое платежное приложение запустить

Запуск платежного приложения для конкретной платформы

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

  • Поле related_applications указывается в манифесте веб-приложения и:
    • Идентификатор пакета и подпись установленного приложения совпадают, а минимальная версия ( min_version ) в манифесте веб-приложения меньше или равна версии установленного приложения.
  • Поле prefer_related_applications имеет true .
  • Установлено платежное приложение для конкретной платформы, которое имеет:
    • Фильтр намерений org.chromium.action.PAY .
    • Идентификатор способа оплаты, указанный в качестве значения свойства org.chromium.default_payment_method_name .

Дополнительную информацию о том, как их настроить, можно найти в разделе «Платежные приложения для Android: руководство разработчика» .

[обработчик платежей] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
 
"platform": "play",
 
"id": "xyz.bobpay.app",
 
"min_version": "1",
 
"fingerprints": [{
   
"type": "sha256_cert",
   
"value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
 
}]
}]

Если браузер определил, что платежное приложение для конкретной платформы доступно, поток обнаружения на этом завершается. В противном случае он переходит к следующему шагу — запуску приложения для онлайн-платежей.

Запуск приложения для онлайн-платежей

Приложение для веб-платежей должно быть указано в поле serviceworker манифеста веб-приложения.

[обработчик платежей] /manifest.json:

"serviceworker": {
 
"src": "payment-handler.js"
}

Браузер запускает веб-платежное приложение, отправляя событие paymentrequest работнику службы. Сервисному работнику не обязательно регистрироваться заранее. Его можно зарегистрировать вовремя .

Понимание специальных оптимизаций

Как браузеры могут пропустить пользовательский интерфейс запроса платежа и запустить платежное приложение напрямую

В Chrome при вызове метода show() объекта PaymentRequest API запроса платежа отображает пользовательский интерфейс, предоставляемый браузером, который называется «Пользовательский интерфейс запроса платежа». Этот пользовательский интерфейс позволяет пользователям выбирать платежное приложение. После нажатия кнопки «Продолжить» в пользовательском интерфейсе запроса платежа запускается выбранное платежное приложение.

Пользовательский интерфейс запроса платежа вмешивается перед запуском платежного приложения.

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

Пропустите пользовательский интерфейс запроса платежа и запустите платежное приложение напрямую.

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

  • show() запускается жестом пользователя (например, щелчком мыши).
  • Существует только одно платежное приложение, которое:
    • Поддерживает запрошенный идентификатор способа оплаты.

Когда приложение для онлайн-платежей регистрируется по принципу «точно в срок» (JIT)?

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

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

Следующие шаги

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