Google Pay

La misma instancia de InyoTokenizer puede renderizar un botón de Google Pay junto a su formulario de tarjeta. Agregue la opción googlePay: una public key, un ambiente (definido por la URL del script) y un par de callbacks sirven a ambos medios de pago, y un token de Google Pay se cobra exactamente como un token de tarjeta.

Configure primero el tokenizador: vea Tokenización de Tarjetas. Esta página cubre solo lo que agrega la opción googlePay.

Google Pay debe estar habilitado para su cuenta de merchant, y el origen del checkout debe estar registrado en Inyo (vea Lista Blanca de Dominios). La configuración de merchant de Google Pay — merchant ID, nombre del merchant que se muestra en la pantalla de pago, redes de tarjeta aceptadas y ambiente — la gestiona Inyo para cada cuenta de merchant; usted no la configura. Sin un nombre de merchant, Google muestra el nombre registrado en su propia consola.

Cómo Funciona

sequenceDiagram
    participant S as Comprador
    participant P as Su página<br/>+ inyo.js
    participant G as Google Pay
    participant I as Inyo
    participant B as Su backend
    Note over P,I: Carga de la página
    P->>I: Obtiene la configuración<br/>de Google Pay
    P->>G: ¿Este dispositivo<br/>puede pagar?
    G-->>P: Sí
    P-->>S: Muestra el botón
    Note over S,I: El comprador paga
    S->>P: Hace clic en el botón
    P->>G: Abre la hoja de pago
    S->>G: Elige la tarjeta<br/>y aprueba
    G-->>P: Datos de pago<br/>cifrados
    P->>I: Tokeniza
    I-->>P: Token
    Note over P,B: Cobro
    P->>B: successCallback<br/>envía el token
    B->>I: POST /v2/payment
    I-->>B: Resultado del pago

Ejemplo

<div id="payment-form">
  <!-- campos de tarjeta con data-field, como arriba -->
</div>
<div id="google-pay-button"></div>

document.addEventListener('DOMContentLoaded', () => {
  const cart = { total: '99.99' };  // el estado del carrito de su checkout

  const tokenizer = new InyoTokenizer({
    targetId: '#payment-form',
    publicKey: 'YOUR_PUBLIC_KEY',
    threeDSData: { enable: true, enablePostMessage: true },
    successCallback: handleSuccess,   // recibe tokens de tarjeta y de Google Pay
    errorCallback: handleError,
    googlePay: {
      targetId: '#google-pay-button',
      // se llama en cada clic: muestra siempre el total actual del carrito
      transactionInfo: () => ({ totalPrice: cart.total, currencyCode: 'USD', countryCode: 'US' }),
      availabilityCallback: (available) => {
        // false: este navegador o dispositivo no puede pagar con Google Pay; no se renderizó ningún botón
      }
    }
  });

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

No hay ningún método que llamar para Google Pay: el botón ejecuta todo el flujo y entrega el token al successCallback, con el mismo formato de respuesta que un token de tarjeta. La respuesta de Google Pay también incluye additionalData.walletToken (vea Callback de Éxito).

El monto en la hoja es solo informativo. El token de Google Pay no lleva monto: el monto cobrado es el que su backend envía a POST /v2/payment. Tómelo siempre de sus propios registros, nunca del navegador.

Devuelva el total desde una función, y no con un objeto fijo, siempre que el carrito pueda cambiar (cupones, envío, cantidades), para que el comprador apruebe el monto que usted va a cobrar. Mantenga la función rápida — preferiblemente síncrona, leyendo el estado del carrito: los navegadores solo dejan abrir la hoja de Google Pay poco después del clic, por lo que una consulta async lenta puede impedir que se abra.

Parámetros de Google Pay (googlePay)

Comportamiento

• Disponibilidad: el botón solo aparece cuando el navegador y el dispositivo del comprador pueden pagar con Google Pay. De lo contrario no se renderiza nada y el errorCallback no se llama; use availabilityCallback para adaptar su diseño.
• Solo tarjetas tokenizadas en el dispositivo: Google Pay se ofrece con tarjetas tokenizadas en el dispositivo del comprador, que llevan su propio criptograma de autenticación. No se ejecuta ningún desafío 3DS para Google Pay, por lo que threeDSData no se aplica. En la práctica, el botón aparece principalmente en dispositivos Android con una tarjeta en Google Wallet.
• Tokens de un solo uso: storeLaterUse aplica solo a tarjetas. Un token de Google Pay es de un solo uso.
• Iframes: si su checkout se ejecuta dentro de un iframe, agregue allow="payment" al elemento <iframe>.
• Sandbox: el script de sandbox usa el ambiente de prueba de Google Pay. Las tarjetas de la cuenta de Google del comprador devuelven datos de pago de prueba y nunca se cobran.

Cobrar un Token de Google Pay

Envíe additionalData.token a su backend y cree el pago como un pago con tarjeta:

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

Es el mismo flujo que un token de tarjeta, con tres diferencias:

• Sin 3DS: threeDSData no se aplica. La tarjeta de Google Pay ya lleva su propio criptograma de autenticación, por lo que no se ejecuta ningún desafío.
• Uso único: storeLaterUse no se aplica. Un token de Google Pay es siempre de uso único; tokenice de nuevo para cada pago.
• Monto: el monto en la hoja de Google Pay es solo informativo. El monto cobrado es siempre el que su backend envía a POST /v2/payment, tomado de sus propios registros.

Para identificar un token de Google Pay, verifique additionalData.walletToken.walletType === "GOOGLE_PAY" en la respuesta del successCallback.

Códigos de Error de Google Pay

Estos códigos llegan al mismo errorCallback: