Integración del SDK de Google Pay (Web)

Esta guía cubre la integración de Google Pay en sitios web usando la librería JavaScript de Google Pay.

Para integrar Google Pay en apps móviles (Android e iOS), consulta la Integración Mobile.

1. Cargar la librería de Google Pay

Agregar el script de Google Pay en el HTML del sitio:

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

2. Configurar el PaymentDataRequest

Parámetros del Gateway (Conekta)

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'conektagpay',
    gatewayMerchantId: 'conekta'
  }
};

Parámetro	Valor	Descripción
`gateway`	`conektagpay`	Identificador de Conekta como procesador de pagos en Google Pay
`gatewayMerchantId`	`conekta`	Valor fijo, identificador de Conekta como gateway

Redes y métodos de autenticación

const allowedCardNetworks = ['VISA', 'MASTERCARD', 'AMEX'];
const allowedCardAuthMethods = ['CRYPTOGRAM_3DS'];

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks,
    assuranceDetailsRequired: true
  }
};

const cardPaymentMethod = {
  ...baseCardPaymentMethod,
  tokenizationSpecification: tokenizationSpecification
};

Request completo

const paymentDataRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [cardPaymentMethod],
  callbackIntents: ['PAYMENT_AUTHORIZATION'],
  emailRequired: true,
  shippingAddressRequired: true,
  shippingAddressParameters: {
    phoneNumberRequired: true
  },
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPrice: '100.00',        // Monto del cobro
    totalPriceLabel: 'Total',
    currencyCode: 'MXN',         // Moneda
    countryCode: 'MX'            // País
  },
  merchantInfo: {
    merchantId: '<GOOGLE_MERCHANT_ID>',   // ID de Google Pay & Wallet Console (producción)
    merchantName: 'Nombre del Merchant'
  }
};

Nota: En ambiente de pruebas (TEST), merchantId puede omitirse o usar cualquier valor. En producción se requiere el ID obtenido de la Google Pay & Wallet Console.

3. Inicializar el cliente y mostrar el botón

let paymentsClient;

function onGooglePayLoaded() {
  paymentsClient = new google.payments.api.PaymentsClient({
    environment: 'TEST', // Cambiar a 'PRODUCTION' en producción
    paymentDataCallbacks: {
      onPaymentAuthorized: function(paymentData) {
        return { transactionState: 'SUCCESS' };
      }
    }
  });

  // Verificar si Google Pay está disponible
  paymentsClient.isReadyToPay({
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [baseCardPaymentMethod]
  })
    .then(function(response) {
      if (response.result) {
        addGooglePayButton();
      }
    });
}

function addGooglePayButton() {
  const button = paymentsClient.createButton({
    onClick: onGooglePayClicked,
    buttonColor: 'black',
    buttonType: 'pay'
  });
  document.getElementById('google-pay-container').appendChild(button);
}

4. Capturar el PaymentData

Cuando el usuario autoriza el pago, Google Pay retorna un objeto PaymentData:

function onGooglePayClicked() {
  paymentsClient.loadPaymentData(paymentDataRequest)
    .then(function(paymentData) {
      // paymentData contiene el token encriptado y la info de la tarjeta
      processGooglePayPayment(paymentData);
    })
    .catch(function(err) {
      console.error('Error en Google Pay:', err);
    });
}

Estructura del PaymentData retornado por Google

{
  "apiVersion": 2,
  "apiVersionMinor": 0,
  "paymentMethodData": {
    "type": "CARD",
    "description": "Visa •••• 1234",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "cardFundingSource": "CREDIT"
    },
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "<TOKEN_ENCRIPTADO_BASE64>"
    }
  }
}

5. Enviar a la API de Conekta

Extraer los datos del paymentData y enviarlos al backend para crear el cargo:

function processGooglePayPayment(paymentData) {
  const pmd = paymentData.paymentMethodData;

  // IMPORTANTE: El token debe codificarse en base64 antes de enviarlo a Conekta
  const conektaPayload = {
    token: btoa(pmd.tokenizationData.token),
    card_network: pmd.info.cardNetwork,
    card_details: pmd.info.cardDetails,
    card_funding_source: (pmd.info.cardFundingSource || 'CREDIT').toLowerCase(),
    description: pmd.description
  };

  // Enviar al backend del merchant
  fetch('/api/create-charge', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(conektaPayload)
  });
}

Ver API de Conekta para el payload completo del cargo.