Javascript

Actualizado en 08 Feb 2023

Compartir
Oscuro
Ligero

Resumen del artículo

¿Te ha resultado útil este resumen?

Gracias por sus comentarios

Con la información devuelta al registrar una orden, se utilizarán los campos zenkiOrderId (Identificador único de la orden generado por Zenkipay) y paymentSignature (Firma de la información de la orden de pago) para abrir la modal de pago, para esto en tu plantilla HTML debes agregar nuestro script https://resources.zenki.fi/zenkipay/script/v2/zenkipay.js como se muestra a continuación:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script
      type="text/javascript"
      src="https://resources.zenki.fi/zenkipay/script/v2/zenkipay.js"
    ></script>
  </body>
</html>

Con nuestro script tienes acceso a un conunto de métodos que te permiten operar con nuestra modal de pago desde el objeto global zenkipay, el cual ofrece 3 métodos descritos a continuación:

zenkipay.button

Este método crea un botón de pago con Zenkipay y requiere 3 parámetros:

containerId: Es el ID del elemento HTML en el DOM que va a contener el botón de pago Zenkipay.
options: Es un objeto que contiene el valor del zenkiOrderId como orderId y el valor de paymentSignature, como propiedad opcional puedes agregar la configuración de los estilos del botón, puedes consultar su definición aquí.
events: Es una función callback que notifica los errores (en caso de que ocurran) y los estatuses del proceso de pago, puedes consultar su definición aquí.

A continuación se muestra un ejemplo de su implementación:

const zenkipayBtnContainerId = "pay-with-zenkipay-container";

const zenkipayOptions = {
  orderId: "REPLACE_WITH_YOUR_ZENKI_ORDER_ID",
  paymentSignature: "REPLACE_WITH_YOUR_PAYMENT_SIGNATURE",
  style: {
    shape: "pill",
    theme: "dark",
  },
};

zenkipay.button(zenkipayBtnContainerId, zenkipayOptions, handleOpenModalEvents);

function handleOpenModalEvents(error, details) {
  if (error) return console.error(error);
  console.log(details);
}

zenkipay.openModal

Este método abre la modal de pago de Zenkipay y requiere 2 parámetros:

options: Es un objeto que contiene el valor del zenkiOrderId como orderId y el valor de paymentSignature, puedes consultar su definición aquí.
events: Es una función callback que notifica los errores (en caso de que ocurran) y los estatuses del proceso de pago, puedes consultar su definición aquí.

A continuación se muestra un ejemplo de su implementación:

const btnZenkipay = document.getElementById("btn-pay-with-zenkipay");

btnZenkipay.addEventListener("click", () => {
  const zenkipayOptions = {
    orderId: "REPLACE_WITH_YOUR_ZENKI_ORDER_ID",
    paymentSignature: "REPLACE_WITH_YOUR_PAYMENT_SIGNATURE",
  };
  zenkipay.openModal(zenkipayOptions, handleOpenModalEvents);
});

function handleOpenModalEvents(error, details) {
  if (error) return console.error(error);
  console.log(details);
}

zenkipay.closeModal

Este método cierra la modal de pago de Zenkipay y no recibe ningún parámetro.

A continuación se muestra un ejemplo de su implementación:

zenkipay.closeModal();

Entidades

Zenkipay

declare class Zenkipay {
  button: (containerId: string, options: ZenkipayButtonOptions, events: ZenkipayEvent) => CloseModalFn;
  openModal: (options: ZenkipayOptions, events: ZenkipayEvent) => CloseModalFn;
  closeModal: () => void;
}

ZenkipayOptions

declare class ZenkipayOptions {
  orderId: string;
  paymentSignature: string;
}

ZenkipayButtonOptions

declare class ZenkipayButtonOptions extends ZenkipayOptions {
  style?: Style;
}

Style

declare class Style {
  theme?: Theme;
  size?: Size;
  shape?: Shape;
  expand?: Expand;
  type?: Type;
  colors?: Colors;
}

type Theme = "default" | "orange" | "purple" | "dark";
type Size = "default" | "sm";
type Shape = "default" | "pill";
type Expand = "default" | "block";
type Type = "default" | "cryptos";

declare class Colors {
  background?: string; // CSS format
  border?: string; // CSS format
  font?: string; // CSS format
}

ZenkipayEvent

type ZenkipayEvent = (error: Error | null, data: ZenkipayData) => void;

ZenkipayData

declare class ZenkipayData {
  postMsgType!: POST_MSG_TYPE;
  isCompleted!: boolean; // It's `true` when modal is closed
  data!: DoneMsg | null;
}

CloseModalFn

type CloseModalFn = () => void;

POST_MSG_TYPE

enum POST_MSG_TYPE {
  CANCEL = "cancel",
  DONE = "done",
  CLOSE = "close",
  ERROR = "error",
  PROCESSING_PAYMENT = "processing_payment",
}

DoneMsg

declare class DoneMsg {
  orderId!: string;
}

Ejemplo

A continuación se muestra un ejemplo completo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pay with Zenkipay</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      .container {
        gap: 2rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 2rem;
      }
      .button {
        gap: 8px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #fff;
        border-radius: 0.5rem;
        border-color: #000;
        border-style: solid;
        border-width: 1px;
        color: #533b7f;
        cursor: pointer;
        width: min-content;
        padding: 0.375rem 1rem;
      }
      .label {
        font-size: 1rem;
        font-weight: 500;
        line-height: 100%;
        white-space: nowrap;
      }
      .decorator {
        background-color: #533b7f;
        height: 100%;
        width: 1px;
      }
      .logo {
        height: 1.875rem;
      }
      .alert {
        color: #383d41;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <button id="btn-pay-with-zenkipay" class="button">
        <span class="label">Pay with Crypto</span>
        <span class="decorator"> </span>
        <img
          class="logo"
          alt="Zenkipay"
          src="https://resources.zenki.fi/zenkipay/script/v2/assets/images/logo-zenkipay-default.svg"
        />
      </button>
      <section id="message" class="alert"></section>
    </main>
    <script
      type="text/javascript"
      src="https://resources.zenki.fi/zenkipay/script/v2/zenkipay.js"
    ></script>
    <script type="text/javascript">
      const message = document.getElementById('message');

      const zenkipayOptions = {
        orderId: 'REPLACE_WITH_YOUR_ZENKI_ORDER_ID',
        paymentSignature: 'REPLACE_WITH_YOUR_PAYMENT_SIGNATURE',
      };

      const btnZenkipay = document.getElementById('btn-pay-with-zenkipay');
      btnZenkipay.addEventListener('click', () => {
        zenkipay.openModal(zenkipayOptions, handleOpenModalEvents);
      });

      function handleOpenModalEvents(error, details) {
        if (error) {
          const arr = [error.message];
          if (details && details.postMsgType) {
            arr.unshift(details.postMsgType.toUpperCase());
          }
          message.innerText = arr.join(': ');
          return;
        }

        const { postMsgType, data } = details;
        const arr = [postMsgType.toUpperCase()];
        if (data && data.orderId) {
          arr.push('orderID: ' + data.orderId);
        }
        message.innerText = arr.join(': ');
      }
    </script>
  </body>
</html>

¿Te ha sido útil este artículo?

What's Next

Angular

Tabla de contenido

zenkipay.button
zenkipay.openModal
zenkipay.closeModal
Entidades
Ejemplo