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 Versión UMD desde un CDN.

Requerimientos

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

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

Instalación

npm install htech-pay

Compatibilidad por versión

A partir de la versión 1.0.7, el id de la orden puede entregarse al momento de ejecutar la transacción, en lugar de ser obligatorio antes de montar el formulario.

Funcionalidad	1.0.6 (versión anterior)	1.0.7 (`latest`)
`id` en la configuración inicial	Obligatorio	Opcional*
`processPayment(id)`	No disponible	Disponible
`processPaymentToken(id)`	No disponible	Disponible
Tipo `checkout` / pago con token en `checkout`	No disponible	Disponible
Tipos `default` y `widget`	Disponible	Disponible

* El id sigue siendo obligatorio en el tipo por defecto (default). Ver Montar el formulario sin id.

📘
Las integraciones existentes sobre 1.0.6 siguen funcionando sin cambios al actualizar a 1.0.7. Las funcionalidades nuevas son aditivas: si continúa enviando el id en la configuración inicial y llama processPayment() sin argumentos, el comportamiento es idéntico.

Configuración básica

 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);
            },
          },
        );

Uso

Variables y funciones de configuración.

Variable	Tipo	Valores	Descripción
id	string		Id de transacción. Obligatorio en el tipo `default`. En los tipos `widget` y `checkout` puede omitirse y entregarse después en `processPayment` / `processPaymentToken`.
eviroment	string	stage / prod	Ambiente de trabajo.
type	string	widget / checkout / default / null	Tipo o diseño de la carta de pago, si no se agrega tipo se mostrara el diseño por defecto (default).
onViewForm	función		Se ejecuta al cargar el formulario.
onPaymentResult	función		Devuelve el resultado de la transacción.
theme	string	dark / default / null	Indica el tema que rederiza la carta de pago, el tipo widget no contiene un tema.
isPaymentToken	boolean	true / false	Variable que indica si el pago se realizará con un ID que contiene un token de una tarjeta guardada.
onClose	función		Se ejecuta si el usuario cierra el modal donde se solicita el cvv en el tipo por defecto (default)

Variables y funciones de implementación

Variable	Tipo	Parámetros	Descripción
mount	función	selector	Función que monta el formulario. Recibe el ID del contenedor donde se montará.
destroy	función		Función que desmonta el formulario.
validateForm	función		Función que retorna si existen errores en los campos de la carta de pago y si la carta de pago es valida.
processPayment	función	id	Función que ejecuta el proceso de pago y retorna el resultado de la transacción. El parámetro `id` es opcional y solo es necesario si no se envió el `id` en la configuración inicial.
validateFormCvv	función		Función que retorna si existen errores en el input del cvv, este input se utiliza unicamente en el pago con token con tipo widget.
processPaymentToken	función	id	Función que ejecuta el proceso de pago de un id con token y retorna el resultado de la transacción. El parámetro `id` es opcional y solo es necesario si no se envió el `id` en la configuración inicial.

onPaymentResult

Función encargada de devolver el resultado de la transacción. La función onPaymentResult puede utilizarse en cualquier caso de uso; siempre contendrá el resultado de la transacción, sin importar el tipo de formulario o el tipo de pago.

Los valores devueltos son:

Campo	Descripción
`ResponseCode`	Código de respuesta que indica el resultado de la transacción (en este caso, "00" indica aprobación).
`ResponseDescription`	Descripción asociada al código de respuesta.
`AuthorizationNumber`	Número de autorización de la transacción.
`ReferenceNumber`	Número de referencia asociado a la transacción.
`Status`	Estado de la transacción, en este caso, "approved" indica que la transacción ha sido completada con éxito.
`Order`	Encapsula los datos de la orden.
`Id`	Id único de la transacción asignado por nuestro sistema.
`Amount`	Monto total de la orden.
`Currency`	Código de moneda según el estándar ISO 4217.
`Token`	Token asignado a la tarjeta con la que se procesó el pago.

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

mount

La función mount se encarga de montar el formulario de pago dentro de un contenedor del DOM proporcionado por el integrador. Recibe como parámetro un selector CSS en formato string (por ejemplo, "#container") o directamente un elemento del DOM.

Si se proporciona un string, la función intentará localizar el elemento utilizando document.querySelector. Si se proporciona un elemento del DOM, lo utilizará directamente como punto de montaje.

En caso de que el contenedor no exista o no pueda encontrarse, la función lanzará un error indicando que no fue posible montar el formulario.

Una vez validado el contenedor, el iframe del formulario de pago será adjuntado como hijo de dicho elemento.

Esta implementación permite integrarse con cualquier framework o aplicación JavaScript que tenga acceso al DOM.

<div id="form-container"></div>

_htechPay.mount("#form-container");

destroy

La función destroy desmonta el formulario de pago del DOM y realiza la limpieza de los recursos internos

Ejemplo de uso basico

<!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 librería 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.
            },
            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 de configuración, 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(); 
            },
            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>

Tipo widget

El tipo widget es un diseño más minimalista, pequeño y adaptable para interfaces reducidas. Se compone de un input que contiene los campos necesarios para la transacción de la orden generada.

Al tratarse de un diseño reducido, se exponen funciones para realizar la transacción, ya que este tipo no cuenta con un botón de pago, como sucede en el diseño por defecto.

Configuracion para tipo widget

await htechPay(
          "id", // Id de la orden
          {
            environment: "stage", // ambiente
            type: "widget",
          },
        );

validateForm

Función que retorna si existen errores en los campos de la carta de pago y si la carta de pago es válida

 const validation = await _htechPay.validateForm();

Valores del objeto

Valor	Tipo	Descripción
IsValid	Boolean	Valor que indica si los campos ingresados en la carta de pago son válidos
errors	object	Devuelve los campos indicando cual contiene errores, el valor true indica que el campo contiene errores.

processPayment

Función encargada de ejecutar la transacción al igual que el evento onPaymentResult tambien devuelve el resultado de la transacción.

Es recomendable usar en conjunto con la función validateForm

const validation = await _htechPay.validateForm();

if (validation.isValid) {
    const paymentResult = await _htechPay.processPayment();
  }

Parámetro id

🚧
Disponible a partir de la versión 1.0.7.

La función acepta de forma opcional el id de la orden a cobrar. Es el mecanismo que permite montar el formulario antes de haber generado la orden.

const paymentResult = await _htechPay.processPayment("id-generado");

Escenario	Resultado
`id` en la configuración inicial y `processPayment()` vacío	Se cobra el `id` de la configuración inicial.
Sin `id` inicial y `processPayment(id)`	Se cobra el `id` recibido en la función.
`id` en ambos lados con el mismo valor	Se cobra ese `id`.
`id` en ambos lados con valores distintos	La transacción se detiene y se devuelve un error.
Sin `id` en ninguno de los dos lados	La transacción se detiene y se devuelve un error.

Ver Montar el formulario sin id para el detalle de los errores devueltos.

Valores de retorno de la funcion processPayment

Campo	Descripción
`ResponseCode`	Código de respuesta que indica el resultado de la transacción (en este caso, "00" indica aprobación).
`ResponseDescription`	Descripción asociada al código de respuesta.
`AuthorizationNumber`	Número de autorización de la transacción.
`ReferenceNumber`	Número de referencia asociado a la transacción.
`Status`	Estado de la transacción, en este caso, "approved" indica que la transacción ha sido completada con éxito.
`Order`	Encapsula los datos de la orden.
`Id`	Id único de la transacción asignado por nuestro sistema.
`Amount`	Monto total de la orden.
`Currency`	Código de moneda según el estándar ISO 4217.
`Token`	Token asignado a la tarjeta con la que se procesó el pago.

Ejemplo de uso

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>HtechPay - Widget Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }

      #payButton {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }

      #payButton:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      #result {
        margin-top: 20px;
        background: #f4f4f4;
        padding: 15px;
        white-space: pre-wrap;
      }
    </style>
  </head>

  <body>
    <h1>Pago con HtechPay (Widget)</h1>

    <!-- Contenedor donde se montará el iframe -->
    <div id="form-container"></div>

    <!-- Botón para procesar pago -->
    <button id="payButton">Pagar</button>

    <!-- Resultado -->
    <div id="result"></div>

    <script type="module">
      import { htechPay } from "htech-pay"; // importar librería htechPay.

      let _htechPay;

      const payButton = document.getElementById("payButton");
      const resultContainer = document.getElementById("result");

      function showLoading() {
        payButton.disabled = true;
        payButton.innerText = "Procesando...";
      }

      function hideLoading() {
        payButton.disabled = false;
        payButton.innerText = "Pagar";
      }

      async function setup() {
        _htechPay = await htechPay(
          "15628012-c8fb-4871-bd48-440a5da1a824", // ID de la orden
          {
            environment: "qa",
            type: "widget",
          },
        );

        _htechPay.mount("#form-container");
      }

      payButton.addEventListener("click", async () => {
        if (!_htechPay) return;

        // Validar formulario
        const validation = await _htechPay.validateForm();

        if (!validation.isValid) {
          console.log("Errores:", validation.errors);
          return;
        }

        if (validation.isValid) {
            showLoading();
            //Ejecutar transaccion 
            const paymentResult = await _htechPay.processPayment();
            //Mostrar resultado
            resultContainer.textContent = JSON.stringify(paymentResult, null, 2);
            hideLoading();
            //Quitar formulario
           _htechPay.destroy();
        }
      });

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

Tipo checkout

🚧
Disponible a partir de la versión 1.0.7.

El tipo checkout muestra el formulario de tarjeta completo, con el mismo detalle visual que el tipo por defecto, pero sin botón de pago propio: la transacción la dispara el comercio desde su propia interfaz mediante processPayment.

Es el tipo indicado cuando el comercio ya tiene su propio botón de "Pagar" dentro de su flujo de compra, o cuando necesita mostrar el formulario antes de haber generado la orden.

Característica	default	widget	checkout
Diseño	Formulario completo	Campo compacto	Formulario completo
Botón de pago	Interno de la carta	Del comercio	Del comercio
Soporta `theme`	Sí	No	Sí
Puede montarse sin `id`	No	Sí	Sí

Configuración para tipo checkout

await htechPay(
          "id", // Id de la orden
          {
            environment: "stage", // ambiente
            type: "checkout",
            theme: "", // Variable para indicar el tema
          },
        );

Las funciones de validación y de pago son las mismas que en el tipo widget:

const validation = await _htechPay.validateForm();

if (validation.isValid) {
    const paymentResult = await _htechPay.processPayment();
  }

Montar el formulario sin id

🚧
Disponible a partir de la versión 1.0.7.

Hasta la versión 1.0.6, el id de la orden debía existir antes de montar la carta de pago. Esto obligaba al comercio a generar la orden en su backend antes de mostrar el formulario, incluso cuando el usuario todavía no había decidido pagar.

A partir de la versión 1.0.7, el formulario puede montarse sin id. El usuario captura los datos de su tarjeta mientras el comercio genera la orden en paralelo, y el id se entrega al momento de ejecutar la transacción.

Tipos que lo soportan

type	isPaymentToken	¿Puede montarse sin `id`?
`default`	false / true	No — el `id` es obligatorio
`widget`	false / true	Sí
`checkout`	false / true	Sí

❗️
El tipo por defecto (default) siempre requiere el id en la configuración inicial. Este tipo resuelve el pago con su propio botón dentro de la carta, por lo que no existe un momento posterior en el que el comercio pueda entregar el id. Si se monta sin id, la carta de pago mostrará un error de configuración.

Cómo se resuelve el id

El id puede entregarse en la configuración inicial, en la función de pago, o en ambas.

Configuración inicial	Función de pago	Resultado
`"abc"`	(vacío)	Se cobra `"abc"`
(vacío)	`"abc"`	Se cobra `"abc"`
`"abc"`	`"abc"`	Se cobra `"abc"`
`"abc"`	`"xyz"`	Error: el `id` no coincide. La transacción se detiene
(vacío)	(vacío)	Error: falta el `id`. La transacción se detiene

La validación de coincidencia existe para evitar que un error de integración cobre una orden distinta a la que el comercio cree estar cobrando.

Manejo de errores

Las funciones processPayment y processPaymentToken nunca lanzan una excepción: siempre resuelven con un objeto. Cuando el id no puede resolverse, ese objeto tiene la siguiente forma:

{
  status: "error",
  message: "orderId is required in processPayment or in htechPay setup"
}

Campo	Descripción
`status`	Contiene el valor `"error"` cuando la transacción no se ejecutó.
`message`	Descripción del motivo por el que la transacción se detuvo.

Mensajes posibles:

📘
Los mensajes devueltos en message están en inglés y utilizan el nombre interno orderId, que corresponde al mismo valor documentado como id en esta página.

Mensaje	Motivo
`orderId is required in processPayment or in htechPay setup`	No se envió el `id` ni en la configuración inicial ni en la función.
`orderId mismatch between setup and processPayment`	El `id` de la configuración inicial y el de la función son distintos.
`orderId is required in processPaymentToken or in htechPay setup`	Equivalente al primer caso, en el pago con token.
`orderId mismatch between setup and processPaymentToken`	Equivalente al segundo caso, en el pago con token.

Por lo tanto, la verificación se hace sobre el valor devuelto y no con un bloque try / catch:

const paymentResult = await _htechPay.processPayment(id);

if (paymentResult.status === "error") {
  console.error("La transacción no se ejecutó:", paymentResult.message);
  return;
}

console.log("Resultado del pago:", paymentResult);

Ejemplo de uso

En este ejemplo el formulario se monta al cargar la página, sin orden generada. La orden se solicita al backend del comercio en el momento en que el usuario da clic en pagar, y su id se entrega a processPayment.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>HtechPay - Checkout sin id</title>
  </head>

  <body>
    <h1>Pago con HtechPay</h1>

    <!-- Contenedor donde se montará el iframe -->
    <div id="form-container"></div>

    <!-- Botón del comercio para procesar el pago -->
    <button id="payButton">Pagar</button>

    <!-- Resultado -->
    <div id="result"></div>

    <script type="module">
      import { htechPay } from "htech-pay"; // importar librería htechPay.

      let _htechPay;

      const payButton = document.getElementById("payButton");
      const resultContainer = document.getElementById("result");

      async function setup() {
        // El formulario se monta sin id: la orden todavía no existe.
        _htechPay = await htechPay(null, {
          environment: "stage",
          type: "checkout",
        });

        _htechPay.mount("#form-container");
      }

      // Llamada al backend del comercio que genera la orden.
      async function createOrder() {
        const response = await fetch("/api/crear-orden", { method: "POST" });
        const { id } = await response.json();
        return id;
      }

      payButton.addEventListener("click", async () => {
        if (!_htechPay) return;

        // 1. Validar los campos capturados por el usuario.
        const validation = await _htechPay.validateForm();

        if (!validation.isValid) {
          console.log("Errores:", validation.errors);
          return;
        }

        payButton.disabled = true;

        // 2. Generar la orden solo cuando los datos ya son válidos.
        const id = await createOrder();

        // 3. Ejecutar la transacción entregando el id generado.
        const paymentResult = await _htechPay.processPayment(id);

        payButton.disabled = false;

        if (paymentResult.status === "error") {
          console.error("La transacción no se ejecutó:", paymentResult.message);
          return;
        }

        resultContainer.textContent = JSON.stringify(paymentResult, null, 2);
        _htechPay.destroy();
      });

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

📘
El evento onViewForm se ejecuta al cargar el formulario en todos los tipos, independientemente de que exista o no un id, y tanto en el pago con tarjeta como en el pago con token. La única excepción es el pago con token de tipo por defecto (default) cuando la tarjeta no requiere CVV: en ese caso no se muestra ningún formulario y la transacción se procesa directamente.

Guardar una tarjeta

Para guardar una tarjeta y relacionarla con un customer, deberás solicitar un id mediante una llamada backend a begin-transaction-create-card y posteriormente ejecutar la transacción.

El flujo es el mismo que la ejecución de una transacción normal; la única diferencia es que, en este caso, se utiliza el id generado a partir begin-transaction-create-card.

Guardar una tarjeta con tipo por defecto

Misma configuración y mismo proceso de pago

   _htechPay = await htechPay(
          "id", //id generado desde el begin-transaction-create-card 
          {
            environment: "stage", // Ambiente de trabajo.
            onPaymentResult: (result) => {
              //Evento en devuelve el resulado de la transaccion.
              console.log("Resultado de tarjeta guardada:", result);

              // Desmonta el componente de htechPay después del resultado.
              _htechPay.destroy(); //Funcion para desmontar el componente de

Guardar una tarjeta con tipo widget

Misma configuración y misma funcion de pago

await htechPay(
          "id", // Id de la orden
          {
            environment: "stage", // ambiente
            type: "widget",
          },
        );

const validation = await _htechPay.validateForm();

if (validation.isValid) {
    const paymentResult = await _htechPay.processPayment();
  }

Pago con token o tarjeta guardada.

El pago con token se realiza mediante un ID que contiene el token de una tarjeta guardada. Si es necesario solicitar el CVV, este se pedirá al usuario. Para el tipo widget, se mostrará un input con el mismo estilo que la tarjeta de pago de este tipo. Para el tipo por defecto, se mostrará un modal donde se solicitará el CVV.

Configuracion

await htechPay(
          "id", // Id de la orden
          {
            environment: "stage", // ambiente
            type: "widget", // tipo de formulario a mostrar
            isPaymentToken: true
          },
        );

Pago con Token con tipo por defecto

Para el pago con token en el tipo por defecto, al montar el componente con la configuración correspondiente, si es necesario solicitar el CVV para la transacción, se abrirá un modal donde se pedirá este valor. Una vez que el usuario ingrese la información y haga clic en el botón de confirmar CVV, se iniciará la transacción y el resultado será devuelto en la función onPaymentResult.

Para este caso tambien se ejecuta la funcion onClose si el usuario cierra el modal donde se solicta el cvv

Ejemplo de configuración

await htechPay(
          "id",
          {
            environment: "stage",
            isPaymentToken: true,
            onClose: () => {
            console.log("El usuario dio click a cerrar");
              }
          },
        );

Pago con Token con tipo widget

Para el pago con token de tipo widget, se exponen 2 funciones primordiales validateFormCvv y processPaymentToken .

validateFormCvv

Función que retorna si existen errores en los campos del input del cvv y si el valor es válido.

 const validation = await _htechPay.validateFormCvv();

Valores del objeto.

Valor	Tipo	Descripción
IsValid	Boolean	Valor que indica si los campos ingresados en la carta de pago son válidos
errors	object	Devuelve los campos indicando cual contiene errores, el valor true indica que el campo contiene errores.

processPaymentToken

Función encargada de ejecutar la transacción del pago con token y al igual que el evento onPaymentResult devuelve el resultado de la transacción.

Es recomendable usar en conjunto con la función validateFormCvv

const validation = await _htechPay.validateFormCvv();

if (validation.isValid) {
    const paymentResult = await _htechPay.processPaymentToken();
  }

Parámetro id

🚧
Disponible a partir de la versión 1.0.7.

Al igual que processPayment, esta función acepta de forma opcional el id de la orden a cobrar, con las mismas reglas de resolución y los mismos errores. Ver Montar el formulario sin id.

const paymentResult = await _htechPay.processPaymentToken("id-generado");

Valores de retorno de la funcion processPaymentToken

Campo	Descripción
`ResponseCode`	Código de respuesta que indica el resultado de la transacción (en este caso, "00" indica aprobación).
`ResponseDescription`	Descripción asociada al código de respuesta.
`AuthorizationNumber`	Número de autorización de la transacción.
`ReferenceNumber`	Número de referencia asociado a la transacción.
`Status`	Estado de la transacción, en este caso, "approved" indica que la transacción ha sido completada con éxito.
`Order`	Encapsula los datos de la orden.
`Id`	Id único de la transacción asignado por nuestro sistema.
`Amount`	Monto total de la orden.
`Currency`	Código de moneda según el estándar ISO 4217.
`Token`	Token asignado a la tarjeta con la que se procesó el pago.

Pago con Token con tipo checkout

🚧
Disponible a partir de la versión 1.0.7.

El pago con token en el tipo checkout muestra el campo de CVV dentro del mismo diseño de formulario completo. Expone las mismas funciones que el tipo widget: validateFormCvv y processPaymentToken.

await htechPay(
          "id", // Id de la orden, opcional
          {
            environment: "stage",
            type: "checkout",
            isPaymentToken: true,
          },
        );

const validation = await _htechPay.validateFormCvv();

if (validation.isValid) {
    const paymentResult = await _htechPay.processPaymentToken(id);
  }

❗️
Cuando el formulario de pago con token se monta sin id, la carta de pago no puede consultar la información de la orden y por lo tanto no sabe si esa tarjeta requiere CVV: el campo de CVV se mostrará siempre. Si su integración necesita conocer ese dato antes de mostrar el formulario, envíe el id en la configuración inicial.

❗️
Si existe un error en la configuración de la carta de pago, se mostrará un mensaje de Configuration error en la consola del navegador.
Por ejemplo, puede producirse un error si se utiliza un ID de pago con token mientras la variable isPaymentToken está configurada en false, o si se monta el tipo por defecto (default) sin enviar el id.

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();
            },
            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