Esta página foi traduzida pela API Cloud Translation.

Criar uma experiência de pagamento rápido na Web com o Google Pay

A API Google Pay oferece aos usuários a oportunidade de pagar em qualquer lugar, usando as informações de pagamento armazenadas nas respectivas Contas do Google. Neste laboratório, você vai usar a biblioteca de cliente do Google Pay para Web para melhorar a experiência de pagamento de um exemplo de loja on-line simplificada, criando uma experiência mais rápida, prática e segura, o que, por sua vez, gera mais conversões e clientes mais satisfeitos.

A Auto T-Shirt Shop é uma loja inovadora que aproveita os últimos avanços em inteligência artificial e usa informações como preferências de estilo, clima, época do ano e tendências da moda para sugerir o item mais adequado para você comprar.

As métricas de engajamento dessa loja são muito altas. Infelizmente, as métricas também refletem um grande número de abandonos durante o processo de pagamento. Determinado a resolver isso, um dos proprietários do projeto se lembra de ter visto um vídeo mostrando os resultados promissores que o Google Pay trouxe a sites semelhantes, e decide confiar em você para cuidar da integração.

O que você criará

Este codelab orienta você na integração do Google Pay com um site existente. Isso inclui determinar se um usuário pode pagar usando uma forma de pagamento aceita pelo Google Pay, o posicionamento e o design do botão de pagamento e a execução da transação.

O que você vai aprender

Como integrar o Google Pay a uma página de finalização da compra
Como escolher entre suas formas de pagamento preferidas
Como determinar se um usuário está pronto para pagar com o Google Pay

O que é necessário

Um computador com acesso à Internet
Conhecimento básico de JavaScript

Executar o site de amostra em glitch.com

Para que você possa começar o mais rápido possível, este codelab foi disponibilizado em glitch.com. O Glitch é um ambiente sem custo financeiro baseado na Web que oferece um editor de código e recursos de hospedagem e implantação que podem ser usados para criar e veicular aplicativos da Web.

Para começar, use o botão abaixo para provisionar um novo ambiente de desenvolvimento no Glitch já configurado com uma cópia deste codelab.

Iniciar o ambiente de desenvolvimento em Glitch.com

A partir daqui, você pode usar o editor de código no Glitch para modificar seus arquivos. Comece a veicular o aplicativo usando o menu Mostrar na parte de cima e escolha Em uma nova janela.

Confira o site de exemplo

Como você pode ver, o repositório apresenta uma estrutura de arquivos descomplicada. O objetivo principal deste codelab é permitir que você adapte essa integração aos seus aplicativos atuais e futuros, independentemente da estrutura, das bibliotecas ou das ferramentas com as quais decidir trabalhar.

Conheça o site

Esse marketplace de demonstração foi criado de uma forma que se parece humildemente à aparência do seu aplicativo existente ou em potencial hoje, antes de você adicionar um meio de compra. Na verdade, embora recomendemos que você trabalhe com esse aplicativo de demonstração, você pode usar o codelab para integrar o Google Pay aos seus aplicativos atuais.

Agora, se ainda não tiver feito isso, abra o site de demonstração como está no momento. Para fazer isso, clique no botão Mostrar se você estiver usando o Glitch ou abra o URL em que o servidor da Web local está sendo executado.

O site de demonstração não tem nada de surpreendente, certo? Uma página de detalhes do produto, com uma foto, o preço, uma descrição, alguns seletores e um botão para levar você a uma forma de pagamento imaginária e comum.

O objetivo deste laboratório é substituir esse fluxo por uma experiência de dois cliques com tecnologia do Google Pay.

Vamos planejar isso!

Para entender melhor essa integração, o processo é dividido nas seguintes etapas fundamentais:

Carregar a biblioteca
Determine a capacidade de pagar com o Google Pay.
Mostre o botão para pagar com o Google Pay.
Crie e envie o pedido de pagamento.
Coletar os resultados

Adicione a tag`script`

A primeira coisa que você precisa fazer para começar a usar a API Google Pay é carregar a biblioteca JavaScript. Para isso, inclua uma tag script no arquivo HTML de onde você pretende chamar a API, incluindo um atributo src que aponta para a biblioteca JavaScript externa.

Para este codelab, abra o arquivo index.html. Você vai notar que a tag de script já foi incluída:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

Além de src, você adicionou outros dois atributos.

O async permite que seu script seja carregado e executado de forma assíncrona com o restante da página, para que o tempo de carregamento inicial do documento não seja afetado.
O onload ajuda a adiar a execução do código que depende dessa biblioteca até que o script seja carregado. Depois disso, a função especificada nesse atributo é executada. Nesse caso, a função é onGooglePayLoaded.

Instancie o cliente de API

Depois que o script for carregado, tudo estará pronto para você começar a usar essa biblioteca. Comece instanciando o objeto cliente, que você usará para fazer chamadas à API Google Pay mais tarde.

Edite o arquivo index.js, que já faz parte da estrutura de arquivos deste projeto. Substitua a função onGooglePayLoaded pelo código a seguir.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

O cliente de pagamento é inicializado com um objeto PaymentOptions. Definir o environment como TEST permite que você experimente informações de pagamento fictícias em toda a integração. Quando tudo estiver pronto para criar operações que apoiem transações reais, você poderá atualizar a propriedade environment para PRODUCTION.

Visão geral

Agora carregamos a biblioteca de cliente JavaScript da API Google Pay. Agora, vamos configurar para fazer chamadas de API para nós.

Todas as mudanças de código a seguir para o restante do codelab serão feitas no arquivo index.js.

O esqueleto

Cada vez que você se comunica com a API do Google Pay, há vários parâmetros de configuração que devem ser incluídos nas solicitações, como a versão da API segmentada. Para os fins deste codelab, esse objeto também contém informações sobre as formas de pagamento aceitas no seu aplicativo. A estrutura final é semelhante a esta:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

A propriedade allowedPaymentMethods tem uma lista de formas de pagamento. Para cada forma de pagamento, você precisa incluir as seguintes propriedades:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

Somente as propriedades type e parameters são necessárias para determinar se o usuário em questão pode pagar com o Google Pay.

A configuração da forma de pagamento

Neste exemplo, você só vai aceitar uma configuração, permitindo pagamentos com cartões Mastercard e Visa, tanto no formato tokenizado quanto no formato de número de conta principal (PAN).

É assim que sua configuração deve ser definida em index.js:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

Sobre mecanismos de autenticação de cartão: ao efetuar pagamentos, os cartões podem ser selecionados com base em como as informações da transação são autenticadas no processador ou gateway:

Ao usar a autenticação de número da conta principal (PAN), o número da conta do cartão, o mês e o ano de vencimento são enviados ao processador de pagamentos. Isso permite que os clientes usem qualquer cartão previamente protegido associado às próprias Contas do Google.
A autenticação dinâmica baseada em criptograma funciona em combinação com a tokenização do cartão, um mecanismo que substitui as informações do cartão do cliente por um valor aleatório que ninguém além do emissor do cartão do cliente pode entender. Isso, em combinação com criptogramas dinâmicos, garante que o token enviado ao processador seja sempre diferente para cada transação, aumentando significativamente a segurança nessas operações.

Para resumir

Vamos recapitular.

Você definiu uma forma de pagamento a ser aceita no seu site e vai trabalhar com a versão 2.0 da API. Esta é a aparência da configuração resultante:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

Agora que você tem a configuração básica pronta, vamos para a parte divertida.

Um dos principais objetivos do Google Pay é oferecer uma experiência de pagamento mais rápida e prática para os usuários. Isso não se aplica apenas a situações em que uma pessoa pode usar o Google Pay, mas também àquelas em que não pode. Usar a solicitação isReadyToPay permite que você determine a disponibilidade para pagar com o Google Pay e uma oportunidade para modificar a experiência no seu site conforme necessário.

O usuário consegue pagar com o Google Pay?

A primeira coisa a fazer é verificar se um usuário específico que está prestes a pagar no seu site pode usar o Google Pay para fazer isso. Essa solicitação exige que você especifique a versão da API Google Pay e as formas de pagamento permitidas no seu site. Isso é exatamente o que o objeto de configuração base definido na etapa anterior contém.

Em index.js dentro da função onGooglePayLoaded(), cole o seguinte:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

Se a chamada falhar ou retornar sem resposta, não haverá mais ações a serem tomadas no contexto do Google Pay. Nessa situação, a próxima etapa mais adequada seria mostrar uma UI adicional que aceite outras formas de pagamento.

Por outro lado, se a resposta for bem-sucedida, agora está tudo pronto para você permitir que os usuários se beneficiem do uso do Google Pay. Assim, você pode prosseguir e adicionar um botão para iniciar o processo de pagamento na ativação do usuário (por exemplo, um clique de botão).

Adicionar um botão para pagar com o Google Pay

Embora seja possível usar qualquer botão que siga as diretrizes da marca do Google Pay para iniciar o processo de pagamento, recomendamos que você gere um usando a API Google Pay. Assim, você não só garante o uso correto das diretrizes da marca, mas também se beneficia de outras melhorias criadas diretamente no botão, como a localização.

Para gerar um botão, use o método createButton no objeto PaymentsClient, incluindo ButtonOptions para configurar o botão.

Em index.js dentro da função createAndAddButton(), cole o seguinte:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

A única propriedade obrigatória ao usar createButton é onClick, que é necessária para determinar o objeto ou a função de callback a ser acionada sempre que os usuários ativarem o botão. buttonColor e buttonType permitem personalizar a aparência do botão. Ajuste-os de acordo com o tema e os requisitos de interface do seu aplicativo.

Depois que o botão for criado, basta adicioná-lo a um nó adequado no DOM. Neste exemplo, um nó div identificado com buy-now é usado para essa finalidade.

Veja que você também definiu uma função para tratar eventos de clique de botão. Na próxima seção, você usará esta função para solicitar uma forma de pagamento.

Prepare a solicitação de pagamento

Neste ponto, você carregou a API Google Pay e determinou que o usuário do seu site pode usar o Google Pay para fazer um pagamento. Como resultado, você mostrou o botão de pagamento do Google Pay na UI, e agora o usuário está pronto para iniciar a transação. Agora é hora de carregar a planilha final com as formas de pagamento disponíveis para os usuários conectados.

Assim como você fez antes, durante a definição da solicitação isReadyToPay, essa chamada também requer as propriedades do objeto de configuração base definido anteriormente (apiVersion, apiVersionMinor e allowedPaymentMethods), além de algumas novas. Desta vez, há uma nova propriedade, tokenizationSpecification, e parameters adicionais nas formas de pagamento que são relevantes para essa solicitação. Além disso, transactionInfo e merchantInfo precisam ser adicionados.

Inclua as informações adicionais obrigatórias nas formas de pagamento

Comece criando uma cópia da forma de pagamento com cartão base usada anteriormente. Essa forma de pagamento com cartão agora requer uma propriedade tokenizationSpecification para definir como tratar os dados relacionados à forma de pagamento selecionada, bem como outros requisitos de dados necessários para a transação real: neste exemplo, são necessários um endereço de cobrança completo e um número de telefone.

A propriedade `tokenizationSpecification`

A especificação de tokenização determina como a forma de pagamento selecionada pelos clientes é tratada e usada para concluir uma transação.

Existem dois tipos diferentes de estratégias de manipulação com suporte. Se você estiver processando a transação de pagamento em servidores compatíveis com PCI DSS, use o tipo de especificação DIRECT. Neste exemplo, você usa um gateway de pagamento para processar o pagamento e, portanto, define o tipo de especificação PAYMENT_GATEWAY.