Google Pay para Web 201: avançado

1. Introdução

Este codelab é uma continuação de API Google Pay para Web 101: noções básicas e depende do código escrito nesse codelab. Para concluir este codelab, primeiro conclua o outro.

O que você vai aprender

• Como personalizar o botão do Google Pay
• Como iniciar o processo de pagamento
• Como confirmar o status de autorização de pagamento
• Como lidar com mudanças no endereço de entrega
• Como lidar com códigos de resgate

O que é necessário

• Um editor de texto de sua escolha para editar arquivos HTML e JavaScript.
• O navegador da Web Google Chrome ou outra maneira de testar um site local.
• Para a produção, você vai precisar de uma merchantId do Google Pay. O registro no Console do Google Pay e da Carteira leva apenas um minuto.

Acompanhe o processo usando o Project IDX

2. Personalização de botões

Esta é uma breve descrição do ButtonOptions. Consulte a documentação para uma explicação mais detalhada

Opção	Necessidade	Valores
onClick	Obrigatório	Nome do manipulador de eventos JavaScript
allowedPaymentMethods	Opcional	PaymentMethod[]
buttonColor	Opcional	padrão, preto, branco
buttonLocale	Opcional	Código ISO 639-1 de duas letras. As localidades com suporte incluem en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk e zh.
buttonRadius	Opcional	0 a 100
buttonRootNode	Opcional	HTMLDocument ou ShadowRoot
buttonSizeMode	Opcional	estática, preencher
buttonType	Opcional	reservar, comprar, finalizar a compra, doar, encomendar, pagar, simples, assinar

Procure o método renderGooglePayButton() no arquivo main.js e substitua-o pelo código listado aqui.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Explicação do código

1. O método da biblioteca createButton() usa um argumento de configuração ButtonOptions que permite definir a aparência e o comportamento do botão.

3. Callbacks de dados de pagamento

O cliente de pagamentos oferece um mecanismo para você registrar funções que serão usadas quando determinados eventos ocorrerem. A primeira é a autorização de pagamento, e a segunda é a alteração dos dados de pagamento.

1. Encontre o comentário // todo: paymentDataCallbacks em main.js e substitua-o por este código.

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. Em seguida, encontre a seção Event Handlers de main.js e anexe o código abaixo ao final da seção.

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. Por fim, encontre o comentário // todo: callbackIntents em main.js e substitua o comentário por este código. Neste codelab, vamos implementar as quatro intents.

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

Explicação do código

1. A propriedade PaymentDataCallbacks tem duas subpropriedades: uma para um callback de autorização de pagamento e a segunda para um callback de alteração de dados de pagamento.
2. Se você implementar callbacks, onPaymentAuthorized será obrigatório. Esse callback é invocado quando a lista callbackIntents contém PAYMENT_AUTHORIZATION no PaymentDataRequest.
3. onPaymentDataChanged é opcional. Esse callback é invocado quando a lista callbackIntents contém OFFER, SHIPPING_ADDRESS ou SHIPPING_OPTION no PaymentDataRequest.
4. Defina o callbackIntents no PaymentDataRequest para acionar os dois callbacks deste codelab.

4. Autorização de pagamento

A opção "Autorizar pagamentos" é usada para iniciar o processo de pagamento e confirmar o status de autorização de pagamento.

Encontre a função onPaymentAuthorized() em main.js que você adicionou na última etapa e substitua-a pelo código abaixo.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Explicação do código

1. A função de callback onPaymentAuthorized() é invocada com um argumento PaymentData e precisa retornar uma promessa. Neste exemplo, a função escolhe aleatoriamente se vai retornar sucesso ou um erro. No seu projeto, você vai usar essa oportunidade para processar a transação com seu gateway usando o token encontrado em paymentData em paymentData.paymentMethodData.tokenizationData.token.

5. Mudança de dados de pagamento

As atualizações dinâmicas de preços permitem que o comerciante atualize de maneira dinâmica as opções de envio e as informações da transação de acordo com o endereço de entrega escolhido. Além disso, é possível atualizar de maneira dinâmica as informações da transação de acordo com a opção de envio escolhida.

Encontre a função onPaymentDataChanged() em main.js que você adicionou na última etapa e substitua-a pelo código abaixo.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

O callback INITIALIZE pode ser acionado várias vezes em uma única chamada para loadPaymentData(). Portanto, é preciso garantir que você possa lidar com várias chamadas para ele. Por exemplo, quando o usuário muda de conta, onPaymentDataChanged() é chamado com INITIALIZE novamente com os dados da nova conta.

Explicação do código

1. A função onPaymentDataChanged() usa IntermediatePaymentData como argumento. Essa função é invocada quando o endereço de entrega ou as opções de envio são alteradas na página de pagamento.
2. A função onPaymentDataChanged() precisa retornar uma promessa que resolva um objeto PaymentDataRequestUpdate que especifique novas informações de transação, opções de envio e erro para atualizar a página de pagamento.
3. redemptionCodes são um conjunto de códigos promocionais inseridos na página de pagamento. Inclui códigos que já foram aprovados.

6. Conclusão

Parabéns por concluir este codelab. Você aprendeu a:

Executar o projeto

Testar com o Google Chrome

Usando o navegador da Web Google Chrome, abra index.html usando File > Open File... no menu principal do Chrome. O Chrome vai executar main.js quando o projeto for aberto dessa forma. Outros navegadores da Web podem não permitir a execução do JavaScript.

– ou –

Testar com um servidor da Web local

Se você tiver o Python instalado, execute python3 -m http.server em um prompt de terminal na pasta raiz pay-web-101.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Em seguida, acesse seu site em http://localhost:8000.

O que fazer depois disso

• Revisar a lista de verificação de integração

Outros recursos

• Participe da conversa no canal#payments do Discord
• Siga @GooglePayDevs no X
• Assistir vídeos relacionados ao Google Pay no YouTube