Как работает API запроса платежа

Узнайте, как API запроса платежа работает на высоком уровне.

Eiji Kitamura

API запроса платежа

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

Базовая структура

Для создания объекта PaymentRequest требуются два параметра: способы оплаты и сведения о платеже . Кроме того, третий параметр вариантов оплаты является необязательным. Базовый запрос можно создать следующим образом:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Давайте посмотрим, как создается и используется каждый параметр.

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

Первый параметр, payMethods , представляет собой список поддерживаемых способов оплаты в переменной-массиве. Каждый элемент массива состоит из двух компонентов: supportedMethods и, необязательно, data .

Для supportedMethods продавцу необходимо указать идентификатор способа оплаты , например https://bobbucks.dev/pay . Существование и содержание data зависит от содержимого supportedMethods и дизайна поставщика платежного приложения.

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

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

Детали оплаты

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

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

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

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

Chrome проверяет, готовы ли пользователь и среда к совершению платежа, во время создания объекта PaymentRequest .

Чтобы проверить, готовы ли пользователь и среда к совершению платежа, вызовите canMakePayment() перед вызовом процедуры платежа. Вызов canMakePayment() возвращает true если браузер поддерживает хотя бы один метод оплаты, указанный в объекте.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

Узнайте больше о PaymentRequest.canMakePayment() на MDN.

Метод show()

После установки двух параметров и создания объекта request , как показано выше, вы можете вызвать метод show() , который отображает пользовательский интерфейс платежного приложения.

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

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

Примечание. basic-card устарел в Chrome 100. Если браузер не поддерживает ни один из указанных способов оплаты, он выдаст NotSupportedError . Обязательно сначала проверьте доступность способа оплаты с помощью canMakePayment() .

То, как будет выглядеть пользовательский интерфейс платежного приложения, полностью зависит от поставщика платежного приложения. После того, как покупатель соглашается произвести платеж, продавцу передается объект JSON, который содержит всю необходимую информацию для перевода денег. Затем продавец может отправить его PSP для обработки платежа.

Наконец, вы можете закрыть пользовательский интерфейс запроса платежа, завершив процесс с помощью response.complete('success') или response.complete('fail') в зависимости от результата, который возвращает PSP.

Дальше

Узнайте больше о веб-платежах .