Saiba como a API Payment Request funciona de modo geral.
API Payment Request
Quando um cliente tenta comprar algo no seu site, ele precisa pedir para o cliente fornecer informações de pagamento e, opcionalmente, outras informações, como a preferência de frete. Você pode fazer isso de maneira fácil e rápida usando a API Payment Request (API PR).
Estrutura básica
A construção de um objeto PaymentRequest
requer dois parâmetros: formas de
pagamento e detalhes do pagamento. Além disso, um terceiro parâmetro de opções de pagamento é opcional. Uma solicitação básica pode 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 de métodos de pagamento aceitos em
uma variável de matriz. Cada elemento na matriz compreende dois componentes,
supportedMethods
e, opcionalmente, data
.
Para supportedMethods
, o comerciante precisa especificar um identificador de forma de pagamento,
como https://bobbucks.dev/pay
. A existência e o conteúdo de data
dependem do
conteúdo de supportedMethods
e do design do provedor do app de pagamento.
Ambas as 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 para a transação. Ele contém o valor necessário total
,
que especifica o valor total devido do cliente. Esse parâmetro também pode
listar os itens comprados.
No exemplo abaixo, a lista de itens comprados opcionais (apenas um item, neste caso) é mostrada, assim como o valor total devido. Em ambos os casos, a unidade monetária é 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' }
}
};
Verificar se a forma de pagamento está disponível
O Chrome verifica se o usuário e o ambiente estão prontos para fazer o pagamento
durante a criaçã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. A chamada
canMakePayment()
retorna true
se o navegador oferecer suporte a pelo menos um método
de 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
O 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 a interface do usuário do app de pagamento.
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 fica a critério do provedor do app de pagamento. Depois que o cliente concorda em fazer um pagamento, um objeto JSON é transmitido ao comerciante, contendo todas as informações necessárias para transferir dinheiro. O comerciante pode enviá-lo ao PSP para processar o pagamento.
Por fim, você pode fechar a interface da 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 os pagamentos na Web.