Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Esta página foi traduzida pela API Cloud Translation.

Crie uma experiência de finalização de compra rápida na Web com o Google Pay

A API Google Pay permite que os usuários paguem em qualquer lugar usando as informações de pagamento armazenadas nas Contas do Google deles. Neste laboratório, você usará a biblioteca de cliente da Web do Google Pay para melhorar a experiência de finalização de compra em uma loja on-line simplificada, criando uma experiência mais rápida, conveniente e segura. Isso gerará mais conversões e clientes mais satisfeitos.

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

As métricas de engajamento para essa loja são ajustadas. Infelizmente, as métricas também refletem um grande número de abandonos durante o processo de finalização da compra. Determinado a se tratar disso, um dos proprietários do projeto se lembra de ter visto um vídeo que mostrava resultados promissores que o Google Pay produziu para sites semelhantes, por isso decidiu usá-lo e confia em você para cuidar da integração.

O que você criará

Esse codelab ajuda você a integrar o Google Pay a um site existente, inclusive a determinar se um usuário pode pagar usando uma forma de pagamento compatível, a colocação e o design do botão e a execução da transação.

O que você vai aprender

Como integrar o Google Pay a uma página de finalização de compra existente
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 começar a usar o mais rápido possível, este codelab foi disponibilizado no glitch.com. Ele é 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 disponibilizar 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 no Glitch.com

Depois disso, use o editor de código no Glitch para modificar seus arquivos. Para começar a exibir seu aplicativo, use o menu Mostrar na parte superior e escolha Em uma nova janela.

Veja o site de amostra

Como você pode ver, o repositório tem uma estrutura de arquivos simples. O principal objetivo deste codelab é oferecer a capacidade de adaptar essa integração aos seus aplicativos atuais e futuros, independentemente da estrutura, das bibliotecas ou das ferramentas que você escolher.

Explorar o site

Esse mercado de demonstração foi criado de maneira que se parece com uma aparência de um aplicativo atual ou em potencial, antes de você adicionar um meio de compra. Na verdade, recomendamos o uso desse aplicativo de demonstração, mas você pode usar este codelab para integrar o Google Pay aos seus aplicativos atuais.

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

O site de demonstração não é nada surpresa, certo? Uma página de detalhes do produto com uma imagem, o preço, uma descrição, alguns seletores e um botão para ir para uma forma de pagamento imaginária e comum.

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

Vamos planejar o processo!

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

Carregar a biblioteca
Determinar a capacidade de pagar com o Google Pay
Mostrar o botão para pagar com o Google Pay
Criar e enviar a solicitação de pagamento
Coletar os resultados

Adicione a tag `script`

Para começar a usar a API Google Pay, primeiro você precisa carregar a biblioteca JavaScript. Para fazer isso, inclua uma tag script no arquivo HTML em que você pretende chamar a API, incluindo um atributo src que direcione para a biblioteca JavaScript externa.

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

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

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

O async permite que o script seja carregado e executado assincronamente junto com o restante da página. Assim, o primeiro tempo de carregamento do documento não será afetado.
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 que você especificar nesse atributo será executada. Nesse caso, a função é onGooglePayLoaded.

Instanciar 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 neste 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. Se você definir environment como TEST, poderá testar informações de pagamento fictícias em toda a integração. Quando estiver tudo pronto para criar operações compatíveis com transações reais, atualize a propriedade environment para PRODUCTION.

Visão geral

A biblioteca de cliente JavaScript da API Google Pay foi carregada. Agora, vamos configurá-la para fazer chamadas de API para nós.

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

O esqueleto

Sempre que você se comunica com a API Google Pay, há vários parâmetros de configuração que precisam 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 na sua inscrição. A estrutura final tem esta aparência:

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

A propriedade allowedPaymentMethods utiliza uma lista de formas de pagamento. Para cada forma de pagamento, é necessário 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.

Configuração da forma de pagamento

Neste exemplo, você só aceitará uma configuração, permitindo pagamentos por cartão para Mastercard e Visa, nos formatos tokenizado e de número da conta principal (PAN, na sigla em inglês).

Veja como sua configuração 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 fazer pagamentos, os cartões podem ser selecionados com base na forma como as informações de transação são autenticadas com base no processador ou gateway:

Ao usar a autenticação do número de conta principal (PAN, na sigla em inglês), o número da conta do cartão e o mês e ano de expiração são enviados ao processador de pagamentos. Isso permite que seus clientes usem qualquer cartão protegido anteriormente associado às Contas do Google deles.
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 seu cliente por um valor aleatório que ninguém além do emissor do cartão do seu cliente entende. Isso, em combinação com criptogramas dinâmicos, garante que o token enviado ao processador seja sempre diferente para cada transação, o que aumenta significativamente a segurança nessas operações.

Para resumir

Vamos recapitular.

Você definiu uma forma de pagamento para ser aceita no seu site e trabalhará com a versão 2.0 da API. Esta será a 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 a configuração de base está pronta, vamos para a parte divertida.

Um dos principais objetivos do Google Pay é oferecer aos usuários uma experiência de finalização de compra mais rápida e conveniente. Isso se aplica não apenas a situações em que uma pessoa pode usar o Google Pay, mas também em situações em que não é possível fazer isso. O uso da solicitação isReadyToPay permite determinar a disponibilidade para pagar com o Google Pay e uma oportunidade para você modificar a experiência no seu site de acordo com isso.

Seu usuário pode pagar com o Google Pay?

A primeira coisa que você precisa 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 a especificação da versão da API Google Pay e as formas de pagamento permitidas para seu site. É exatamente isso 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 com uma resposta sem sucesso, nenhuma outra ação será realizada no contexto do Google Pay. Nesse caso, o próximo passo mais adequado seria mostrar outra IU compatível com outras formas de pagamento.

Por outro lado, se a resposta for bem-sucedida, você estará pronto para permitir que seus usuários se beneficiem do Google Pay. Assim, você poderá adicionar um botão para iniciar o processo de pagamento na ativação do usuário (por exemplo, o clique no botão).

Adicionar um botão para pagar com o Google Pay

Mesmo que você possa 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. Dessa forma, além de garantir o uso preciso das diretrizes da marca, você também se beneficia de outras melhorias incorporadas ao 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 necessária ao usar createButton é onClick, que é necessária para determinar o objeto ou a função de callback a ser acionado 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 IU do aplicativo.

Depois que o botão for criado, basta adicioná-lo a um nó apropriado 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 processar eventos de clique no botão. Na próxima seção, você usará essa função para solicitar uma forma de pagamento.

Preparar a solicitação de pagamento

Você carregou a API Google Pay e determinou que o usuário do seu site pode usar o serviço para efetuar um pagamento. Como resultado, você mostrou o botão de pagamento do Google Pay na IU, e agora o usuário está pronto para iniciar a transação. Agora é hora de carregar a página final de pagamentos contendo as formas de pagamento disponíveis para os diferentes usuários conectados.

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

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

Para começar, crie uma cópia da forma de pagamento por cartão base usada anteriormente. Essa forma de pagamento com cartão agora exige uma propriedade tokenizationSpecification para definir como lidar com os dados relacionados à forma de pagamento selecionada, além de outros requisitos de dados necessários para a transação real: neste exemplo, um endereço de faturamento completo e um número de telefone.

A propriedade `tokenizationSpecification`

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

Há dois tipos diferentes de estratégias de gerenciamento compatíveis. Se você estiver processando a transação de pagamento dentro dos 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. Portanto, você define o tipo de especificação PAYMENT_GATEWAY.