Módulo de cliente do Google Pay pronto

Camaradas, estou introduzindo um módulo JavaScript pronto para efetuar pagamentos usando o Google Pay. O módulo envolve o uso de npm com importação e exportação em um ambiente de desenvolvimento moderno; no entanto, aqueles que desejam um ES5 limpo, eu acho, podem refazê-lo facilmente.

Link para o módulo . O código possui a documentação e os comentários necessários. Vou dar algumas explicações aqui.



Devo dizer que a documentação do Google no botão de pagamento não foi a mais fácil, a lista de erros retornados pela API do Google Pay também não é a mais completa. Portanto, diferente de trabalhar com ApplePay, com o Google Pay, tive que desenhar um pouco antes do módulo realmente funcionar.

O trabalho consiste em duas etapas: primeiro, precisamos decidir se o botão será exibido ou não (nem todos os navegadores suportam o Google Pay) e, em seguida, executar o próprio processamento de pagamento.

1. Botão de exibição

export function showGooglePayButton(options, callbacks) { //   const check = checkParams("showGooglePayButton", options, callbacks); if (!check) { return false; } else { options = check.options; } const paymentsClient = new google.payments.api.PaymentsClient({environment: options.environment}); //      ,   API callbacks.setPaymentClient(paymentsClient); const request = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [options.googleBaseCardPaymentMethod] }; paymentsClient.isReadyToPay(request) .then(function(response) { if (response.result) { callbacks.success(); return true; } else { console.log("    Google Pay  "); callbacks.fail(); } }) .catch(function(err) { console.log("showGooglePayButton ERROR"); callbacks.fail(); }); } 

Nada complicado aqui. Nas opções, passamos dois parâmetros - googleBaseCardPaymentMethod e environment.

googleBaseCardPaymentMethod é um objeto que lista tipos e parâmetros de pagamento (mais detalhes sobre a pesquisa permitida aqui ). Se não estiver definido, chamamos o setter padrão no código, retornando um objeto típico para nós:

 const setGoogleBaseCardPaymentMethod = () => { return { type: "CARD", parameters: { allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"] } } }; 

ambiente é um ambiente, PRODUÇÃO ou TESTE

Na chamada do retorno de chamada bem-sucedido, na verdade chamamos o botão (ou mostramos o já desenhado). Esta é a sua escolha. Lembre-se de que o Google exige correspondência com seus guias .

2. Processamento

Para exibir o botão Google Pay, a API do seu navegador criou o objeto paymentClient , que agora, junto com outros parâmetros, precisa ser passado para a função de processamento. Vejamos outros parâmetros:

googleBaseCardPaymentMethod - veja acima
googlePayPublicKey, merc_id, merc_name - para funcionar com sucesso com o Google Pay, você deve ter um comerciante registrado. Seus parâmetros temos apoio.

Além disso, transferimos retornos com êxito e com falha, assim como dados para efetuar um pagamento (veja abaixo).

Portanto, para efetuar um pagamento, precisamos pegar o objeto paymentClient criado anteriormente e chamar o método loadPaymentData com o objeto paymentDataRequest : const paymentDataRequest = getGooglePaymentDataRequest () :

 const getGooglePaymentDataRequest = () => { const cardPaymentMethod = Object.assign( {}, baseMethod, { tokenizationSpecification: token } ); const paymentDataRequest = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods : [cardPaymentMethod], /* for demo (enviroment TEST): merchantInfo : { merchantId: '12345678901234567890', merchantName: 'JOHN SMITH' }, */ /* for prod (enviroment PRODUCTION): merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, */ merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, transactionInfo : { currencyCode: options.currency, totalPriceStatus: 'FINAL', totalPrice: "" + options.sum } }; return paymentDataRequest; }; 

Para um ambiente de teste, o Google oferece seu próprio objeto merchantInfo. Ele precisa ser usado com o merchantId escrito no exemplo, merchantName não é significativo.

Além disso, precisamos de um objeto token :

 const token = { /* for demo (enviroment TEST): parameters: { "protocolVersion": "ECv1", "publicKey": yourTestPublicKey } */ /* for prod (enviroment PRODUCTION): parameters: { "protocolVersion": "ECv1", "publicKey": params.googlePayPublicKey } */ type: 'DIRECT', parameters: { "protocolVersion": "ECv1", "publicKey": options.googlePayPublicKey } }; 

→ Leia mais sobre os parâmetros aqui

Além disso, quando o objeto é formado, usando o método loadPaymentData , uma solicitação é enviada ao servidor do Google, o quadro com os cartões salvos é aberto e, após a conclusão da operação, o quadro é fechado:

 paymentsClient.loadPaymentData(paymentDataRequest) .then(function(paymentData) { const googleToken = JSON.parse(paymentData.paymentMethodData.tokenizationData.token); // your own client-back ajax request here } 

Após a execução bem-sucedida do método (ou seja, ligar para os cartões salvos e passar na verificação), podemos fazer uma solicitação AJAX para nosso próprio back-end para efetuar um pagamento usando o Google Pay. Nesta solicitação, precisaremos transferir o googleToken , que veio do Google, bem como a chave pública.

É isso, nosso pagamento do Google Pay ocorreu após o processamento na parte traseira!