Google Pay™

Actualizado en 14 Nov 2024
4 Minutos para leer

Resumen del artículo

¿Te ha resultado útil este resumen?

Gracias por sus comentarios

Google Pay™

Google Pay es una plataforma de pagos digitales que permite realizar pagos seguros con tarjetas de crédito o débito vinculadas a la cuenta, ya sea en aplicaciones y sitios web. Facilita transacciones rápidas y seguras sin necesidad de ingresar datos manualmente en cada compra.

Operaciones soportadas

Operación	Descripción
✅ Autorización de pago	Bloquea fondos en la tarjeta del cliente.
✅ Captura de pago	Completa la transacción y transfiere los fondos.
✅ Pago directo	Combina autorización y captura en un solo paso.
✅ Reembolso	Devuelve el monto completo de una transacción.
✅ Reembolso parcial	Devuelve parte del monto capturado.
✅ Cancelación de autorización	Revierte una autorización que no fue capturada.

Redes de tarjetas soportadas

Se admiten las siguientes redes de tarjetas:

AMEX
MASTERCARD
VISA
JCB
DISCOVER
INTERAC

Compatibilidad

Para más información sobre la disponibilidad de Google Pay, consulta:

Guía de integración web

Para integrar Google Pay como método de pago con OrkestaPay, hay que seguir los siguientes pasos:

1. Configurar Google Pay™ como método de pago

Para realizar la integración de Google Pay, primero deberás de realizar una serie de configuraciones desde el portal de OrkestaPay. Visita nuestra guía de configuración de Proveedores y busca el apartado de Google Pay.

2. Tokenizar los datos de pago de Google Pay™

Para realizar la tokenización de los datos de pago hay que seguir los siguientes pasos:

Incluir scripts de OrkestaPay: Utilizar los scripts de OrkestaPay en tu aplicación web.
Inicializar parámetros: Aquí se definen las credenciales de OrkestaPay, así como datos referentes al pago a procesar.
Renderizar el botón de pago de Google Pay: Colocar el botón de Google Pay en tu frontend.

Recursos necesarios:

CSS

https://checkout.orkestapay.com/web/components/payment-methods/styles.css

https://checkout.orkestapay.com/script/orkestapay.js
https://checkout.orkestapay.com/web/components/payment-methods/main.js

Ejemplo de código

En el siguiente snippet de código hay ciertos parámetros que son necesarios de reemplazar:

public_key : Llave pública, estas credenciales las puedes obtener en el portal de OrkestaPay.
merchant_id: ID del comercio, estas credenciales las puedes obtener en el portal de OrkestaPay.
is_sandbox: Define si las credenciales que estás por operar son de pruebas o productivas.
country_code: Código del país con el que vas a generar tu transacción.
currency: Código de la moneda con la que vas a realizar el pago.
total_amount: Monto total de la transacción.

INFORMACIÓN
Para consultar las credenciales de OrkestaPay, puedes visitar nuestra guía Obtener llaves de API.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GooglePay web component</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://checkout.orkestapay.com/web/components/payment-methods/styles.css" />
    <style>
      .code {
        color: inherit;
        overflow-wrap: break-word;
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="row mt-5">
        <h1 id="card-title" class="col-12 text-center mb-4">OrkestaPay - GooglePay Web Component</h1>
      </section>

      <section class="row">
        <article id="button-container" class="col-12 col-md-6 offset-md-3"></article>
        <article class="pt-3 col-12">
          <div id="payment-method-details" class="w-100 alert" role="alert"></div>
        </article>
      </section>
    </main>

    <noscript> Please enable JavaScript to continue using this application. </noscript>

    <script type="text/javascript" src="https://checkout.orkestapay.com/script/orkestapay.js"></script>
    <script type="text/javascript" src="https://checkout.orkestapay.com/web/components/payment-methods/main.js"></script>
    <script type="text/javascript">
      const { public_key, merchant_id, is_sandbox, country_code, currency, total_amount } = initValues();

      (async function main() {
        initOrkestaPay({ is_sandbox, merchant_id, public_key });

        const googlePayButton = document.createElement("orkestapay-googlepay-button");
        await customElements.whenDefined("orkestapay-googlepay-button");

        googlePayButton.params = {
          payment_details: { country_code, currency, total_amount },
          theme: { button_color: "default" },
        };
        googlePayButton.addEventListener("paymentMethodCreated", handlePaymentMethodCreated);

        const container = document.getElementById("button-container");
        container.appendChild(googlePayButton);
      })();

      function handlePaymentMethodCreated({ detail }) {
        const code = document.createElement("code");
        code.innerHTML = JSON.stringify(detail, null, 2);
        code.classList.add("code");

        const paymentMethodDetails = document.getElementById("payment-method-details");
        paymentMethodDetails.classList.remove("alert-danger");
        paymentMethodDetails.classList.add("alert-success");
        paymentMethodDetails.replaceChildren(code);

        // Implementar lógica para enviar el "payment_method_id" al backend y continuar con el proceso de pago
      }

      function initValues() {
        return {
          public_key: "<REPLACE_WITH_YOUR_PUBLIC_KEY>",
          merchant_id: "<REPLACE_WITH_YOUR_MERCHANT_ID>",
          is_sandbox: true,
          country_code: "MX",
          currency: "MXN",
          total_amount: "100.00",
        };
      }
    </script>
  </body>
</html>

Nota
Este código es un ejemplo básico que debes adaptar a tu entorno real.

Ejemplo de respuesta (handlePaymentMethodCreated)

{
    "payment_method_id": "pym_0b7c26bd862c483393f5fdb0d0176055",
    "type": "GOOGLE_PAY",
    "card": {
        "bin": "411111",
        "last_four": "1111",
        "brand": "VISA",
        "card_type": "DEBIT",
        "holder_name": "",
        "holder_last_name": "",
        "expiration_month": "12",
        "expiration_year": "2026",
        "one_time_use": true
    },
    "status": "ACTIVE",
    "created_at": "1731521436082",
    "updated_at": "1731521436082"
}

3. Solicitar el pago

Con el payment_method_id de la respuesta, puedes continuar con el proceso regular de pago con OrkestaPay desde el backend.

Información
Para conocer más sobre la integración de pago directo, visita nuestra guía Integración de pago.

Otros recursos de Google Pay™

Google proporciona un conjunto de recursos adicionales para ayudarte con tus implementaciones:

¿Te ha sido útil este artículo?

What's Next

SDK's

Tabla de contenido

Google Pay™
Operaciones soportadas
Redes de tarjetas soportadas
Compatibilidad
Guía de integración web
Otros recursos de Google Pay™