Обзор 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-объект, содержащий всю необходимую информацию для перевода средств. Продавец может отправить его платежной системе для обработки платежа.

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

Следующий

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