neopayment

Acepta pagos con Google Pay™ a través de Neopayment

Permite que tus clientes paguen de forma rápida y segura usando las tarjetas guardadas en su cuenta de Google.

Este documento proporciona una guía completa para integrar Google Pay™ con la pasarela de pago Neopayment. Google Pay™ ofrece un método de pago seguro y rápido que mejora la conversión al permitir a los clientes finalizar la compra sin introducir manualmente los datos de su tarjeta.

Antes de proceder con la integración, consulte la siguiente documentación de Google Pay™:

Si está evaluando la plataforma en lugar de implementarla ahora mismo, consulte la descripción general de la pasarela de pago de marca blanca.

La pasarela de pago Neopayment admite las siguientes funciones con Google Pay™:

  • Pagos con tarjeta a través de las redes Visa y Mastercard

  • Métodos de autenticación PAN_ONLY y CRYPTOGRAM_3DS

  • Autenticación 3D Secure para mayor seguridad

  • Métodos de pago alojado e integración directa mediante API

Uso de marcas y logotipos

Al integrar Google Pay™ en tu sitio web o aplicación, debes cumplir con los requisitos de marca de Google:

  • Incluye el símbolo de marca registrada (™) después de «Google Pay» la primera vez que aparezca en cada página o pantalla.

  • Utiliza el logotipo y los botones oficiales de Google Pay™, tal como se indica en las Directrices de marca de Google Pay.

  • No modifiques los colores, las proporciones ni la apariencia del botón o el logotipo de Google Pay™.

  • Mantén un espacio libre adecuado alrededor del botón de Google Pay™ (mínimo 14 dp en todos los lados).

  • Utiliza únicamente las variantes de botón aprobadas (fondos negros o blancos con la proporción correcta entre altura y anchura).

Implementación oficial del botón

Al mostrar el botón de Google Pay en tu proceso de pago, utiliza los recursos oficiales:

				
					<!-- Example of proper Google Pay button implementation -->
<button type="button" class="gpay-button">Buy with Google Pay</button>

Para conocer los requisitos detallados de la marca, consulte las Directrices de marca de Google Pay para web o las Directrices de marca de Google Pay para Android, según su plataforma.

Opciones de Integración

Neopayment ofrece dos métodos para integrar Google Pay™:

Integración en página de pago alojada:

La opción más sencilla con una configuración mínima, donde Neopayment se encarga de mostrar el botón de Google Pay™ y procesar la transacción.

Integración mediante API de servidor a servidor:

Opción avanzada que proporciona mayor control sobre la experiencia de pago, requiriendo la implementación directa de la API de Google Pay™.

La siguiente tabla compara estos métodos de integración:

Característica

Página de pago alojada

Integración mediante API Servidor a Servidor

Complejidad de la implementación

Baja

Alta

Alojamiento del botón de Google Pay™

Neopayment

Comercio

Implementación del API de Google Pay API

No requerida

Requerida

Gestión 3DS

Automática

Implementación Manual

Personalización

Limitada

Control total

Registro en Google requerido

No

Si

Integración de página de pago alojada

La opción de página de pago alojada es la forma más sencilla de implementar Google Pay™, ya que Neopayment se encarga de todos los detalles de la integración de Google Pay™.

Pasos de integración

  1. Solicita la activación de Google Pay™: Solicita la activación de Google Pay™ para tu cuenta.

  2. Implementa el flujo de página de pago estándar: Utiliza la integración estándar de la página de pago de Neopayment.

  3. No se requiere código adicional: El botón de Google Pay™ aparecerá automáticamente en los navegadores y dispositivos compatibles.

Flujo de pago

  • El cliente inicia la compra en tu sitio web.

  • Tu servidor crea un pedido mediante la API de Neopayment.

  • El cliente es redirigido a la página de pago de Neopayment.

  • Si el dispositivo del cliente es compatible con Google Pay™, el botón aparece automáticamente.

  • El cliente selecciona Google Pay™ y completa el pago.

  • El cliente es redirigido de vuelta a tu sitio web con el resultado del pago.

Antes de proceder con la integración, consulte la siguiente documentación de Google Pay™:

Integración de API de servidor a servidor

La integración de servidor a servidor proporciona un control total sobre la experiencia de pago, pero requiere la implementación directa de la API de Google Pay™

Requisitos previos

  • Regístrate en Google: Crea una cuenta de desarrollador de Google Pay™.

  • Solicita acceso a la API: Solicita acceso a la API para obtener tu ID de comerciante de la pasarela de pago.

  • Implementa la API de Google Pay™: Sigue la guía de implementación de Google.

Pasos de integración

1. Configurar la API de Google Pay™: Configura el cliente de la API de Google Pay™ en tu sitio web/aplicación.

2. Configurar las especificaciones de tokenización:

				
					const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'neopayment',
    'gatewayMerchantId': 'YOUR_MERCHANT_ID'
  }
};

3. Configura los métodos de pago permitidos:

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

4. Configuración de la dirección de facturación:

				
					const paymentDataRequest = {
  // Other configuration...
  
  // Optional billing address configuration
  billingAddressParameters: {
    format: 'MIN', // or 'FULL' if you need detailed address
    phoneNumberRequired: false
  }
};

5. Gestionar el token de pago: Enviar el token cifrado de Google Pay™ a la API de Neopayment.

6. Procesar el pago: Utilice el endpoint /api/v2/transactions/googlepay para completar la transacción.

Antes de proceder con la integración, consulte la siguiente documentación de Google Pay™:

Implementación del botón Google Pay™

				
					// Load Google Pay API
const googlePayClient = new google.payments.api.PaymentsClient({
  environment: 'PRODUCTION' // or 'TEST' for sandbox
});

// Create button
const button = googlePayClient.createButton({
  onClick: onGooglePayButtonClicked,
  buttonType: 'pay'
});
document.getElementById('google-pay-container').appendChild(button);

Procesamiento de pagos

Cuando un cliente seleccione Google Pay™, envíe el token de pago a su servidor y luego reenvíelo a Neopayment:

				
					// On your client
function onGooglePayButtonClicked() {
  googlePayClient.loadPaymentData(paymentDataRequest)
    .then(function(paymentData) {
      // Send paymentData.paymentMethodData.tokenizationData.token to your server
      fetch('/process-google-pay', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({googlePayToken: paymentData.paymentMethodData.tokenizationData.token})
      });
    });
}

// On your server
app.post('/process-google-pay', (req, res) => {
  const googlePayToken = req.body;
  
  // Forward to Neopayment API
  // Note: Your API endpoint may vary based on your specific integration
  const response = await fetch('https://{{NEOPAYMENT_HOST}}/api/v2/transactions/googlepay', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer eyJhdWQiOiI5ZjU5N2RkOS01NWM5LTQxN2EtYjU4OC1lZDIwMDg2MmQ2Mm....', // Oauth2 token
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      amount: '9999',
      currency: 'USD',
      description: 'Order #12345',
      googlepay: googlePayToken,
      metadatas: {
        payment_reference: 'MY PAYMENT IDENTIFICATION',
        mycustomkey: 'MY CUSTOM VALUE'
      }
    })
  });
  
  // Handle response
});
				
			
				
					{
  "signature": "MEUCIQC6kBeqoF6Oel7Uo4jeYpnaiTfcoH3tOedkUHD30unY6gIgaGMhOHkafr4ilfiCDoQehdrdLzm2CyAyg4aDnVDPD7k=",
  "intermediateSigningKey": {
    "signedKey": "{\"keyValue\":\"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEuaVH9ZFNEVhlsvnl7RVWWUfjZkm80NCpJ7Ss86mCjx7/cM85TDSaBcPbHQU0Kiymy7OopVlIKfl97009NQujig\\u003d\\u003d\",\"keyExpiration\":\"1783075458000\"}",
    "signatures": [
      "MEUCIQCofhWIUzAz4iVh9bC29Rx1QJGTRAjHnhbCGdFd6a0DcwIgUAyI6Q3XBIP8gKEuLaJu3UzUdIzJReSTqvc+W3hb2Yc="
    ]
  },
  "protocolVersion": "ECv2",
  "signedMessage": "{\"encryptedMessage\":\"Yf1nt863wY4Vp5RKTbYVnNAxfUGlI/o2QIkHUdjZx1ttqU0oeirus9p9zWCAsF7LVIPXirzhn7DHC6X3a3TgUkNDVtSpalIGWR34p20e5lzzJozQZjYlrmt2OhBmmjE0A8+amqzCF8YU2y1ejXDkpFng7+93xJdWMRLg0eiQEVDemo3zsHuZoX88DJYkqKlhszRBJbtMVOw0MoxLFC7wILJjXYq/EiO00Q5Y6MgyizYBfvCuyANBx/iZQ/g/9kPaoKB9T4mLde8hzDvH3lpmIRyoerjqthEYHUlVBhV1yRmX1RmYjclfbGnxcnY9CYCFIUv70AxZYoJt94EnCURocl4iwzkfWqjTFxlIpR8rXz1HSYQuFOhVIp4pth32iFbbIwUkTExZPb0s1fmNHjI9JTfoxJs5Up217m1nGhmGLegcf4GPQTxLkeFt8ZJel6Vhbl9r+Y8yTHXpVpttx99FRK5J7KrbQ55kiw3ppeBv7TW0lRK6WFHmS4/myWg7/5A3Ov3k5zFg2wQITdZ7jfoZSVGfofBXeq8cK9x5x+wwIAg1+rHzxGlZJbeY0bwyLHhO+8hoI+0kKMWNbBu9re8yoHzcoeND3bQvYzm+O8E19Fxzl0kVj72mrPVHQ9BI1gbqZkbib8LoTdo07NOBQdmZp6vkXjd96ZUuYVORIDX4ne/ZbX2OWrg\\u003d\",\"ephemeralPublicKey\":\"BLTtUymN+XhTSWuXikReP0Smdzi3HuuXlrYOgxYfJ2xpjEkTQQ6eCbj8vjE2h9Ytbm2dgPn99lldUcGjG4Do+3Q\\u003d\",\"tag\":\"x32K59A7E+xFK3G+CVEf1Jf2P1VVWRSFsOADLF1NltQ\\u003d\"}"
}

Autenticación segura 3D

3D Secure (3DS) mejora la seguridad de los pagos y puede ser necesario dependiendo del tipo de tarjeta utilizada con Google Pay™.

Requisitos de 3DS según el tipo de tarjeta

Google Pay™ admite dos tipos de credenciales de tarjeta:

PAN_ONLY

Datos de la tarjeta física almacenados en Google Pay™

  1. 3DS requerido: Sí, se aplica el flujo estándar de 3DS

  2. Implementación: Gestionar el flujo de desafío de 3DS cuando lo indique la API

CRYPTOGRAM_3DS

Tarjeta virtual tokenizada almacenada en el dispositivo

  1. 3DS requerido: No, la autenticación la realiza Google Pay™
  2. Implementación: No se requieren pasos adicionales
  3.  

Manejo de 3DS para tarjetas PAN_ONLY

Al procesar una tarjeta PAN_ONLY a través de Google Pay™, es posible que deba gestionar la autenticación 3DS:

  • Página de pago alojada: La autenticación 3DS se gestiona automáticamente.

  • API de servidor a servidor: Debe implementar la gestión de la autenticación 3DS.

Flujo 3DS para la integración de servidor a servidor

Si el pago requiere autenticación 3DS, la API devolverá una respuesta con los detalles de 3DS:

				
					{
  "status": "ok",
  "message": "success",
  "data": {
    "id": 25776,
    "identifier": 130025776,
    "service_id": 54,
    "settlement_id": null,
    "merchant_id": "123000010",
    "terminal_id": "METRO001",
    "processor": "simulator",
    "type": "sale",
    "status": "authenticating",
    "ballot": "84948640",
    "pan": "528150******0033",
    "exp_date": "2027-07-01 00:00:00",
    "currency_code": "840",
    "card_holder": "PRUEBA 3DS",
    "amount": 115,
    "tax": 0,
    "tip": 0,
    "reversal_tx": null,
    "adjustment_tx": null,
    "response_code": null,
    "authorization_number": null,
    "reference_number": null,
    "brand_reference": null,
    "processed_at": null,
    "compensated_at": null,
    "created_at": "2024-11-26T22:10:01.000000Z",
    "updated_at": "2024-11-26T22:10:03.000000Z",
    "metadatas": {
      "ip": "181.198.252.169",
      "3ds_params": "{\"deviceChannel\":\"browser\",\"browserIP\":\"127.0.1.1\",\"browserJavaEnabled\":false,\"browserJavascriptEnabled\":true,\"browserLanguage\":\"es\",\"browserColorDepth\":24,\"browserScreenHeight\":1080,\"browserScreenWidth\":1920,\"browserTZ\":\"1\",\"browserUserAgent\":\"Mozilla\\/5.0 (X11; Linux x86_64) AppleWebKit\\/537.36 (KHTML, like Gecko) Chrome\\/130.0.0.0 Safari\\/537.36\",\"challengeWindowSize\":1920,\"purchaseDate\":\"24Nov26221101\",\"threeDSRequestorDecMaxTime\":10,\"acquirerCountry\":\"PA\",\"purchaseAmount\":115,\"purchaseCurrency\":\"840\",\"cardHolderName\":\"PRUEBA 3DS\",\"acctNumber\":\"5281509242240033\",\"cardExpiryDate\":\"2707\"}",
      "webhook": "https://webhook.site/152ab34c-700a-4973-a1b3-34f7fbedbc37",
      "card_brand": "MASTERCARD",
      "3ds_version": "2.2.0",
      "3ds_authentication_form": "https://cbotest.cobalt.tech/3ds/authenticate/25776"
    }
  }
}

Debes:

  1. Mostrar el desafío 3DS al cliente (usando el formulario 3D HTML proporcionado en metadatas.3ds_atuhentication_form)

  2. Verificar el estado final del pago

Probando su integración

Antes de su lanzamiento, pruebe exhaustivamente la integración de Google Pay™ utilizando una combinación del entorno de pruebas de Google y las herramientas de prueba de Neopayment.

Entorno de prueba de Google Pay™

Google Pay™ proporciona un entorno de prueba específico que muestra automáticamente tarjetas de prueba simuladas en la hoja de pago. Para usar este entorno, configure el parámetro de entorno en ‘TEST’:

				
					const googlePayClient = new google.payments.api.PaymentsClient({
  environment: 'TEST'
});

Cuando el entorno está configurado en ‘TEST’, la hoja de pago de Google Pay mostrará un conjunto de tarjetas de prueba específicamente para pruebas de integración, sin necesidad de que añadas tarjetas reales a tu cuenta de Google.

Tarjetas de prueba

Tu integración utilizará las tarjetas de prueba simuladas de Google en el entorno de prueba. Estas tarjetas simuladas ofrecen:

  • Redes de tarjetas Visa y Mastercard

  • Método de autenticación PAN_ONLY

  • Una dirección de facturación en EE.UU

  • Varias direcciones de envío

Los tokens generados con estas tarjetas simuladas pueden ser procesados por el entorno de prueba de Neopayment, ya que acepta cualquier formato de tarjeta válido.

Proceso de prueba

Al probar la integración de Google Pay™ con Neopayment, puede utilizar un enfoque simplificado:

  1. Pruebas de interfaz de usuario y flujo de pago:

    1. Utilice el entorno de prueba de Google con tarjetas simuladas para verificar que el botón de Google Pay™ se muestre correctamente.

    2. Pruebe el flujo de la hoja de pago y la experiencia del usuario.

    3. Confirme que su servidor recibe los datos de pago tokenizados.

  2. Pruebas de extremo a extremo:

    1. Procese los tokens generados a partir de las tarjetas simuladas de Google en el entorno de prueba de Neopayment.

    2. Pruebe diversos escenarios de pago, incluyendo autorización, cobro y reembolsos.

    3. Una vez que su integración esté aprobada para producción, realice las pruebas finales con tarjetas reales en el entorno de producción.

Pasos de prueba

  1. Configurar el entorno de prueba: Configura tu integración para usar el entorno de prueba de Google Pay™.

  2. Probar el flujo de la hoja de pago: Verifica que la interfaz de usuario funcione correctamente.

  3. Probar el manejo de tokens: Asegúrate de que tu servidor reciba y gestione correctamente los tokens de pago cifrados.

  4. Probar el manejo de errores: Verifica que tu aplicación gestione correctamente los diferentes escenarios de respuesta.

  5. Completar la lista de verificación de integración: Verifica todos los elementos de la lista de verificación de integración de Google Pay antes de solicitar acceso a producción.

Solución de problemas

Si encuentra problemas durante las pruebas:

  1. Verifique que haya configurado correctamente los parámetros de la pasarela (gateway: ‘neopayment’).

  2. Asegúrese de usar el entorno de TEST para las pruebas de la interfaz de usuario.

  3. Compruebe que su servidor reciba correctamente el token de pago cifrado.

  4. Revise las respuestas de la API para detectar mensajes de error específicos.

Si el problema persiste, póngase en contacto con el soporte de Neopayment.

Recursos adicionales

Para obtener ayuda adicional con la integración de Google Pay™, póngase en contacto con el soporte de Neopayment.

Simplificamos tus cobros desde el primer día. Elige la solución ideal para tu negocio y empieza a recibir pagos sin complicaciones.

Contáctanos

NUESTRAS SOLUCIONES

Otros Medios de Cobro 

Nuestros medios de cobro integran todo en un solo ecosistema digital, para que cada transacción sea una oportunidad, no un riesgo.

POS Físicos

Terminales diseñadas para cobros presenciales con tarjeta.

Conocer Más

Links de Pago

Creación y gestión de links de pago completamente personalizables.

Conocer Más

Planes de Recurrencia

Creación de planes recurrentes totalmente personalizados.

Conocer Más

Formulario de Pago Personalizado

Captura segura de datos de tarjeta con marca blanca y estilos propios.

Conocer Más

Reembolsos y Reversos

Gestione reembolsos y reversos en segundos, con total control y validación antifraude.

Conocer Más