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

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

Eiji Kitamura

Опубликовано: 27 сентября 2017 г., Последнее обновление: 1 июля 2025 г.

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

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

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

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

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

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

Примечание: *Safari поддерживает Apple Pay, но не поддерживает платежные приложения сторонних разработчиков.

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

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

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

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

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

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

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

Идентификатор способа оплаты — это строка, основанная на URL-адресе. Например, идентификатор Google Pay — https://google.com/pay . Разработчики платежных приложений могут выбрать любой URL-адрес в качестве идентификатора способа оплаты, если они контролируют его и могут предоставлять произвольный контент и HTTP-заголовки. В этой статье мы будем использовать 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 HEAD запрос на URL-адрес идентификатора платежного метода . URL-адрес идентификатора платежного метода отвечает HTTP-заголовком Link , указывающим на URL-адрес, по которому браузер может получить манифест платежного метода.

Примечание: В Chrome допускается до трех перенаправлений на одном и том же сайте для одного и того же идентификатора способа оплаты.

Настройте сервер обработки платежей таким образом, чтобы он отправлял HTTP-заголовок Link с атрибутом rel="payment-method-manifest" и URL-адресом манифеста платежного метода . Например, если манифест находится по адресу https://bobbucks.dev/pay/payment-manifest.json , заголовок ответа будет включать:

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

URL-адрес может представлять собой полное доменное имя или относительный путь. Для примера просмотрите сетевой трафик по адресу https://bobbucks.dev/pay . Также можно использовать команду curl :

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

Примечание: Подробнее о методах оплаты можно узнать в документации W3C .

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

Примечание: Запрос не обязательно отправляется на идентификатор способа оплаты, в зависимости от комбинации идентификатора и браузера. Например, Chrome не отправляет запрос для https://play.google.com/billing и — в некоторых случаях — для https://google.com/pay .

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

Поля манифеста способа оплаты

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

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

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

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

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

Примечание: Chrome поддерживает только одно приложение для оплаты по умолчанию для каждого способа оплаты.

Шаг 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() запускается при нажатии пользователем жеста (например, щелчка мыши).
• Существует только одно платежное приложение, которое:
  • Поддерживает запрошенный идентификатор способа оплаты.

Примечание: В настоящее время Safari поддерживает только Apple Pay, поэтому он всегда запускает приложение напрямую, минуя интерфейс запроса платежа.

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

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

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

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

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

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

• Платежные приложения для Android: руководство для разработчиков
• Руководство для разработчиков веб-приложений для осуществления платежей