API Google Pay para Web 201: Avançado

1. Introdução

Este codelab é uma continuação do API Google Pay para Web 101: conceitos básicos e depende do código escrito nesse codelab. Para concluir este codelab, primeiro faça 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 Google Chrome ou outra maneira de testar um site local.
• Para produção, você vai precisar de um merchantId do Google Pay. Leva apenas um minuto para se registrar no Console do Google Pay e da Carteira. Então, faça isso agora.

Acompanhe usando o Firebase Studio

2. Personalização de botões

Esta é uma breve visão geral 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 compatíveis 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ático, preenchimento
buttonType	Opcional	comprar, pagar, assinar, reservar, doar, fazer pedido, simples

Procure o método renderGooglePayButton() no arquivo main.js e substitua 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);
}

Explicar códigos

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 registrar funções que serão executadas quando determinados eventos acontecerem. A primeira é a autorização de pagamento, e a segunda é a mudança nos dados de pagamento.

1. Encontre o comentário // todo: paymentDataCallbacks em main.js e substitua pelo código a seguir.

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

2. Em seguida, encontre a seção Event Handlers de main.js e anexe o seguinte código 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 pelo código abaixo. Neste codelab, vamos implementar todas 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.'
       },
     ],
   },
   

Explicar códigos

1. A propriedade PaymentDataCallbacks tem duas subpropriedades: uma para um callback de autorização de pagamento e outra para um callback de mudança de dados de pagamento.
2. Se você estiver implementando 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 em 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.

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

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);
  });
}

Explicar códigos

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 aproveitar essa oportunidade para processar a transação com seu gateway usando o token encontrado em paymentData em paymentData.paymentMethodData.tokenizationData.token.

5. Mudança nos dados de pagamento

Com as atualizações dinâmicas de preços, um comerciante pode atualizar 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 pelo código a seguir.

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 ao longo de 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.

Explicar códigos

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 especifica 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 Arquivo > Abrir arquivo... 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 de JavaScript.

– ou –

Testar com um servidor da Web local

Se você tiver o Python instalado, execute python3 -m http.server em um terminal no diretório 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
• Assista vídeos relacionados ao Google Pay no YouTube