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

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

Eiji Kitamura

Дата публикации: 27 сентября 2017 г. Последнее обновление: 16 октября 2026 г.

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

Если вы только начинаете работать с Web Payments, сначала прочитайте обзорную статью.

Типы платежных приложений

Способ оплаты может поддерживаться платежным приложением для Android, веб-версией платежного приложения или обоими вариантами.

• Платежное приложение для Android. Установленное приложение, которое Chrome запускает с помощью намерения Android. Chrome проверяет название пакета приложения и сертификат подписи.
• Веб-приложение для оплаты. Сервис-воркер, который Chrome запускает в модальном окне. Пользователям не нужно ничего устанавливать.

Платежные приложения Android доступны в Chrome на Android и в WebView. Веб-приложения для оплаты доступны в Chrome на всех платформах, но не в WebView.

Если для способа оплаты доступны оба типа приложений и в манифесте веб-приложения для prefer_related_applications задано значение true, Chrome скрывает веб-приложение. В противном случае пользователи могут увидеть оба приложения в интерфейсе Payment Request API и выбрать одно из них.

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

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

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

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

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

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

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

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

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

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

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

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

[merchant] requests payment:

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, по которому браузер может получить манифест способа оплаты.

Настройте сервер способа оплаты так, чтобы он возвращал заголовок 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

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

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

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

[payment handler] /payment-manifest.json:

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

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

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

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

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

[payment handler] /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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome считывает разные поля в зависимости от типа платежного приложения. Для платежного приложения Android Chrome считывает только related_applications. Для веб-приложений Chrome считывает name, icons, serviceworker, payment и prefer_related_applications.

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

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

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

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

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

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

[payment handler] /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"
  }]
}]

Если prefer_related_applications – это true и доступно платежное приложение для определенной платформы, Chrome скрывает веб-версию платежного приложения. В противном случае Chrome также ищет веб-версию платежного приложения.

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

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

[payment handler] /manifest.json:

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

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

Особые оптимизации

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

Когда в Chrome вызывается метод show() объекта PaymentRequest, Payment Request API показывает интерфейс, предоставляемый браузером. Он называется интерфейсом запроса платежа. В этом интерфейсе пользователи могут выбрать платежное приложение. После нажатия кнопки Продолжить в интерфейсе Payment Request запускается выбранное платежное приложение.

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

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

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

Когда веб-приложение для платежей регистрируется по запросу?

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

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

Как создать веб-приложение для платежей

Когда продавец вызывает show(), Chrome отправляет событие paymentrequest вашему сервисному работнику. Вызовите openWindow() внутри respondWith(), чтобы показать интерфейс оплаты, а затем обработайте ответ.

Полное описание API можно найти в документации по Web-Based Payment Handler API на сайте MDN.

Дальнейшие действия

• Руководство для разработчиков платежных приложений Android
• Как предоставить информацию о доставке и контактные данные из платежного приложения Android