Google Pay

A mesma instância do InyoTokenizer pode renderizar um botão do Google Pay ao lado do seu formulário de cartão. Adicione a opção googlePay: uma public key, um ambiente (definido pela URL do script) e um par de callbacks atendem os dois meios de pagamento, e um token do Google Pay é cobrado exatamente como um token de cartão.

Configure o tokenizador antes: veja Tokenizando Cartões. Esta página cobre só o que a opção googlePay adiciona.

O Google Pay precisa estar habilitado para a sua conta de merchant, e a origem do checkout precisa estar registrada na Inyo (veja Whitelist de Domínios). As configurações de merchant do Google Pay — merchant ID, nome do merchant exibido na tela de pagamento, bandeiras aceitas e ambiente — são gerenciadas pela Inyo para cada conta de merchant; você não as configura. Sem um nome de merchant, o Google exibe o nome cadastrado no console dele.

Como Funciona

sequenceDiagram
    participant S as Comprador
    participant P as Sua página<br/>+ inyo.js
    participant G as Google Pay
    participant I as Inyo
    participant B as Seu backend
    Note over P,I: Carregamento da página
    P->>I: Busca as configurações<br/>do Google Pay
    P->>G: Este dispositivo<br/>pode pagar?
    G-->>P: Sim
    P-->>S: Exibe o botão
    Note over S,I: O comprador paga
    S->>P: Clica no botão
    P->>G: Abre a tela de pagamento
    S->>G: Escolhe o cartão<br/>e aprova
    G-->>P: Dados de pagamento<br/>criptografados
    P->>I: Tokeniza
    I-->>P: Token
    Note over P,B: Cobrança
    P->>B: successCallback<br/>envia o token
    B->>I: POST /v2/payment
    I-->>B: Resultado do pagamento

Exemplo

<div id="payment-form">
  <!-- campos do cartão com data-field, como acima -->
</div>
<div id="google-pay-button"></div>

document.addEventListener('DOMContentLoaded', () => {
  const cart = { total: '99.99' };  // o estado do carrinho do seu checkout

  const tokenizer = new InyoTokenizer({
    targetId: '#payment-form',
    publicKey: 'YOUR_PUBLIC_KEY',
    threeDSData: { enable: true, enablePostMessage: true },
    successCallback: handleSuccess,   // recebe tokens de cartão e de Google Pay
    errorCallback: handleError,
    googlePay: {
      targetId: '#google-pay-button',
      // chamada a cada clique: mostra sempre o total atual do carrinho
      transactionInfo: () => ({ totalPrice: cart.total, currencyCode: 'USD', countryCode: 'US' }),
      availabilityCallback: (available) => {
        // false: este navegador ou dispositivo não pode pagar com Google Pay; nenhum botão foi renderizado
      }
    }
  });

  document.getElementById('pay-btn').addEventListener('click', () => {
    tokenizer.tokenizeCard();
  });
});

Não há método a chamar para o Google Pay: o botão executa todo o fluxo e entrega o token ao successCallback, no mesmo formato de resposta de um token de cartão. A resposta do Google Pay traz também additionalData.walletToken (veja Callback de Sucesso).

O valor na tela é apenas exibido. O token do Google Pay não carrega valor: o valor cobrado é o que o seu backend envia ao POST /v2/payment. Use sempre os seus próprios registros, nunca um valor vindo do navegador.

Retorne o total por uma função, e não por um objeto fixo, sempre que o carrinho puder mudar (cupons, frete, quantidades), para que o comprador aprove o valor que você vai cobrar. Mantenha a função rápida — de preferência síncrona, lendo o estado do carrinho: os navegadores só deixam a tela do Google Pay abrir pouco depois do clique, então uma consulta async lenta pode impedir que ela abra.

Parâmetros do Google Pay (googlePay)

Comportamento

• Disponibilidade: o botão só aparece quando o navegador e o dispositivo do comprador podem pagar com Google Pay. Caso contrário nada é renderizado e o errorCallback não é chamado; use o availabilityCallback para adaptar o layout.
• Somente cartões tokenizados no dispositivo: o Google Pay é oferecido com cartões tokenizados no dispositivo do comprador, que carregam seu próprio criptograma de autenticação. Nenhum desafio 3DS é executado no Google Pay, então o threeDSData não se aplica a ele. Na prática, o botão aparece principalmente em dispositivos Android com um cartão no Google Wallet.
• Tokens de uso único: o storeLaterUse vale apenas para cartões. Um token do Google Pay é de uso único.
• Iframes: se o seu checkout roda dentro de um iframe, adicione allow="payment" ao elemento <iframe>.
• Sandbox: o script de sandbox usa o ambiente de teste do Google Pay. Os cartões da conta Google do comprador retornam dados de pagamento de teste e nunca são cobrados.

Cobrando um Token do Google Pay

Envie o additionalData.token ao seu backend e crie o pagamento como um pagamento com cartão:

"paymentMethod": {
  "type": "CARD",
  "cardTokenId": "TOKEN_DO_successCallback"
}

É o mesmo fluxo de um token de cartão, com três diferenças:

• Sem 3DS: o threeDSData não se aplica. O cartão do Google Pay já traz o próprio criptograma de autenticação, então nenhum desafio é executado.
• Uso único: o storeLaterUse não se aplica. Um token do Google Pay é sempre de uso único; tokenize de novo a cada pagamento.
• Valor: o valor exibido na tela do Google Pay é só para exibição. O valor cobrado é sempre o que o seu backend envia ao POST /v2/payment, tirado dos seus próprios registros.

Para identificar um token do Google Pay, verifique additionalData.walletToken.walletType === "GOOGLE_PAY" na resposta do successCallback.

Códigos de Erro do Google Pay

Estes códigos chegam ao mesmo errorCallback: