Como a API Payment Request funciona

Saiba como a API Payment Request funciona em alto nível.

Eiji Kitamura

API Payment Request

Quando um cliente tenta comprar algo do seu site, o site precisa perguntar que o cliente forneça informações de pagamento e, opcionalmente, outras informações como preferência de envio. Para isso, é fácil e rápido usar o API Payment Request (PR API).

Estrutura básica

A construção de um objeto PaymentRequest requer dois parâmetros: payment formas e detalhes de pagamento. Além disso, um terceiro parâmetro payment options é opcional. Uma solicitação básica poderia ser criada assim:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Vamos conferir como cada parâmetro é criado e usado.

Formas de pagamento

O primeiro parâmetro, paymentMethods, é uma lista das formas de pagamento aceitas no uma variável de matriz. Cada elemento da matriz é composto por dois componentes: supportedMethods e, opcionalmente, data.

Para o supportedMethods, o comerciante precisa especificar uma forma de pagamento. Identificador como https://bobbucks.dev/pay. A existência e o conteúdo do data dependem o conteúdo de supportedMethods e o design do provedor do app de pagamento.

As duas informações precisam ser fornecidas pelo provedor do app de pagamento.

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

Detalhes de pagamento

O segundo parâmetro, paymentDetails, é transmitido como um objeto e especifica detalhes de pagamento da transação. Ele contém o valor obrigatório total, que especifica o valor total devido pelo cliente. Esse parâmetro também pode pode listar os itens comprados.

No exemplo abaixo, a lista opcional de itens comprados (apenas um item, neste caso), assim como o valor total devido. Em ambos os casos, a moeda unidade é especificada com cada valor individual.

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' }
  }
};

Conferir se a forma de pagamento está disponível

O Chrome verifica se o usuário e o ambiente estão prontos para fazer pagamentos durante a construção de um objeto PaymentRequest.

Para verificar se o usuário e o ambiente estão prontos para fazer um pagamento, chame canMakePayment() antes de invocar o procedimento de pagamento. Ligando canMakePayment() retorna true se o navegador aceitar pelo menos um pagamento especificado no objeto.

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
});

Saiba mais sobre PaymentRequest.canMakePayment() no MDN

Método show()

Depois de definir os dois parâmetros e criar o objeto request, conforme mostrado acima, chame o método show(), que mostra o usuário do app de pagamento interface gráfica do usuário.

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

A aparência da interface do usuário do app de pagamento depende totalmente do app de pagamento de nuvem. Depois que o cliente concorda em fazer um pagamento, um objeto JSON é transmitido ao comerciante com todas as informações necessárias para transferir o dinheiro. O comerciante pode enviá-lo ao PSP para processar o pagamento.

Por fim, você pode fechar a interface de solicitação de pagamento concluindo o processo com response.complete('success') ou response.complete('fail'), dependendo do resultado retornado pelo PSP.

A seguir

Saiba mais sobre pagamentos na Web.