Documentación de Integración del Botón de ETpay

Esta guía explica cómo integrar el botón de ETpay en su tienda en línea para aceptar pagos de manera rápida y sencilla.

Requisitos Previos

1. Obtener el data-id de ETpay: El identificador (data-id) es proporcionado por nuestro equipo una vez que el comercio ha sido registrado e integrado con nosotros. Este identificador es único para cada comercio y se envía por correo electrónico después del proceso de integración.

Pasos para la Integración

1. Incluir el Botón de ETpay

Agregue el siguiente código HTML en la página de pago de su e-commerce, donde desea que aparezca el botón de pago.

Opción 1: Integración con Monto Fijo

Si el monto del pago es siempre el mismo, puede integrarlo de la siguiente manera:

<!-- Incluir el botón de ETpay -->
<etpay-checkout-button order-id="###" amount="###" data-id="####" ></etpay-checkout-button>
<!-- Incluir el archivo JavaScript generado -->
<script src="<https://product.etpay.com/mx/widget/etpay-checkout-button.min.js>"></script>

• amount: Especifica el monto total que se cobrará en la transacción, en este caso, 100.
• data-id: Este identificador es proporcionado por el equipo de ETpay. Reemplace "####" con el valor específico asignado a su comercio.
• order-id: Este identificador es proporcionado por el comercio, para identificar la compra. Reemplace "####" con el valor específico asignado a su comercio.

Opción 2: Integración con Monto Dinámico

Si su integración requiere que el monto del pago sea dinámico, asegúrese de que la variable que contiene el monto esté definida antes de renderizar el componente de ETpay. No se puede renderizar el componente sin tener la variable dinámica del monto lista.

A continuación se muestra un ejemplo de cómo integrar el botón con un monto dinámico:

 <div class="button-div" id="payment-button-container"></div>

<script>
  // Define el monto de manera dinámica
  const amount = 1;

  // Espera a que el DOM esté completamente cargado
  document.addEventListener("DOMContentLoaded", () => {
    // Crea el elemento <ETpay-checkout-button>
    const paymentButton = document.createElement("etpay-checkout-button");

    // Asigna el monto y el data-id al botón
    paymentButton.setAttribute("amount", amount);
    paymentButton.setAttribute("order-id", "####");
    paymentButton.setAttribute("data-id", "####");
    

    // Agrega el botón al contenedor
    document
      .getElementById("payment-button-container")
      .appendChild(paymentButton);
  });
</script>

<!-- Incluir el archivo JavaScript generado -->
<script src="<https://product.etpay.com/mx/widget/etpay-checkout-button.min.js>"></script>

En este ejemplo:

• El monto (amount) se define de forma dinámica y se asigna al atributo amount del botón de ETpay.