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

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

Эйдзи Китамура

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

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

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

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

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

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

Первый параметр, paymentMethods , представляет собой список поддерживаемых методов оплаты в переменной массива. Каждый элемент массива состоит из двух компонентов, 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() , который отображает пользовательский интерфейс платежного приложения.

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

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

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

Далее

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