JS HtechPay

Descripción

La siguiente biblioteca se encarga de incorporar la carta de pago directamente en la estructura de la página web del comercio, lo que permite la visualización y la interacción del usuario con la pasarela de pago de forma integrada. Este enfoque ayuda a mantener la coherencia visual y funcional del sitio, proporcionando una transición sin inconvenientes entre la navegación habitual del usuario y el proceso de pago.

Esta biblioteca no solo facilita la inserción de la carta de pagos, sino que va más allá al priorizar la seguridad en todos los aspectos del proceso. Desde el cifrado de datos hasta el cumplimiento de estándares como PCI-DSS, se garantiza una integración segura y confiable que cumple con las más estrictas normas de seguridad de la industria, proporcionando tranquilidad tanto a su comercio como a los usuarios finales.

Además de su enfoque en la seguridad, la biblioteca proporciona formas de comunicación claras y sencillas para que el comercio obtenga todos los datos necesarios de las transacciones y que su comercio personalice y responda a datos clave, como el estado de la transacción y/o eventos que suceden dentro de la carta de pago. Esta flexibilidad permite una mayor personalización y adaptación del flujo de trabajo de pago de acuerdo con las necesidades específicas de su comercio, mejorando así la versatilidad y la experiencia del usuario.

📘
Para una versión UMD desde un CDN para cargar la biblioteca sin un bundler ver más abajo.

Requerimientos

De acuerdo con nuestra Política de soporte de versiones, actualmente admitimos todas las versiones LTS de Node.js 18+.

Instalación

npm install htech-pay

Uso

Variable	Tipo	Valores	Descripción
id	string		Id de transacción
eviroment	string	stage / prod	Ambiente de trabajo
onViewForm	funcion		Se ejecuta al cargar el formulario
onPaymentResult	funcion		Devuelve el resultado de la transacción
isPaymentWithToken	boolean	true / false	Indica si el pago a realizar es con token
theme	string	dark / default / null	Indica el tema que rederiza la carta de pago
destroy	funcion		Función que desmonta el formulario

onPaymentResult

Función encargada de devolver el resultado de la transacción, los valores devueltos son:

Variable	Tipo	Descripción
amount	string	Monto de la transaccón
status	string	Estatus de la transaccion approved = Pago exitoso rejected = Pago rechazo
currency	string	Código de la moneda cobrada
referenceNumber	string	Número de referencia de la transacción procesada con el banco hecha por nuestro sistema.
authorizationNumber	string	Numero de autorización de la transacción
id	string	Id de la transacción

📘
La información cargada en los formularios va acorde al id generado.

Ejemplo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>HtechPay</title>
  </head>
  <body>
    <!-- En este contenedor se montara el componente de htechPay -->
    <div id="form-container"></div>

    <script type="module">
      import { htechPay } from "htech-pay"; // importar función htechPay.
      let _htechPay;

      async function setup() {
        _htechPay = await htechPay(
          "id", //id generado
          {
            environment: "stage", // Ambiente de trabajo.
            onViewForm: () => {
              // Evento lanzado en cuanto carga la carta de pago.
              console.log("El formulario está visible");
            },
            onPaymentResult: (result) => {
              //Evento en devuelve el resulado de la transaccion.
              console.log("Resultado del pago:", result);

              // Desmonta el componente de htechPay después del resultado.
              _htechPay.destroy(); //Funcion para desmontar el componente de htechPay.
            },
            isPaymentWithToken: false, // Variable que indica si el pago es un pago con token.
            theme: "", //Variable para indicar el tema.
          }
        );

        // Monta el iframe dentro del div
        _htechPay.mount("#form-container");
      }

      setup();
    </script>
  </body>
</html>

Ejemplo cambio de tema

📘
Recomendación: si se requiere alternar cualquier valor, por ejemplo, el tema se recomienda desmontar el componente de htechPay y volver a ejecutar la configuración como en el siguiente ejemplo.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>HtechPay</title>
  </head>
  <body>
  
    <button id="btn-theme">default</button>
    <!-- Boton para cambio de tema -->
    <div id="form-container"></div>

    <script type="module">
      import { htechPay } from "htech-pay"; // importar funcion htechPay
      const themeBtn = document.getElementById("btn-theme"); // Varible boton
      let theme = "";

      let _htechPay;

      async function setup() {
        _htechPay = await htechPay(
          "id", //id generado
          {
            environment: "stage",
            onViewForm: () => {
              console.log("El formulario está visible");
            },
            onPaymentResult: (result) => {
              console.log("Resultado del pago:", result);
              _htechPay.destroy(); 
            },
            isPaymentWithToken: false,
            theme, //Variable para indicar el tema
          }
        );

        // Monta el iframe dentro del div
        _htechPay.mount("#form-container");
      }

      setup();

      function resetForm() {   //Funcion para resetear la configuracion de htechPay
        _htechPay?.destroy(); //Funcion para desmontar el componente de htechPay
        setup();  //Actualizar configuracion y volver a montar el componente de htechPay
      }

      themeBtn.addEventListener("click", () => {  //Funcion para cambiar el valor del tema
        theme = theme === "" ? "dark" : "";
        themeBtn.textContent = theme || "default";
        resetForm();
      });
    </script>
  </body>
</html>

📘
La información cargada en los formularios va acorde al id generado

Versión UMD desde un CDN

Si se desea cargar la biblioteca sin un bundler, también se expone el archivo umd desde la siguiente URL.

https://unpkg.com/htech-pay/dist/htechPay.umd.js

Ejemplo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>HtechPay</title>
  </head>
  <body>
    <!-- Contenedor donde se montará el componente de HTechPay -->
    <div id="form-container"></div>

    <!-- Cargar la versión UMD de la biblioteca desde un CDN -->
    <script src="https://unpkg.com/htech-pay/dist/htechPay.umd.js"></script>

    <script>
      let _htechPay;

      async function setup() {
        //  Se llama al objeto global de HtechPay
        _htechPay = await HtechPay.htechPay(
          "id", // ID generado
          {
            environment: "stage",
            onViewForm: () => console.log("El formulario está visible"),
            onPaymentResult: (result) => {
              console.log("Resultado del pago:", result);
              _htechPay.destroy();
            },
            isPaymentWithToken: false,
            theme: "",
          }
        );

        // Montar el iframe dentro del div
        _htechPay.mount("#form-container");
      }

      setup();
    </script>
  </body>
</html>

Las demas configuraciones funcionan igual que la version de npm, solo cambia su forma de cargar la biblioteca.

Link NPM

https://www.npmjs.com/package/htech-pay

HtechPay

Test 2