Javascript

Updated on 10 Feb 2023

Share
Dark
Light

Article Summary

Share feedback

Thanks for sharing your feedback!

With the information returned when registering an order, the fields zenkiOrderId (Unique identifier of the order generated by Zenkipay) and paymentSignature (Signing the payment order information) will be used to open the payment modal, for this in your HTML template you must add our script https://resources.zenki.fi/zenkipay/script/v2/zenkipay.js as shown below:

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

With our script you have access to a set of methods that allow you to operate with our payment modal from the global zenkipayobject, which offers 3 methods described below:

zenkipay.button

This method creates a payment button with Zenkipay and requires 3 parameters:

containerId: This is the ID of the HTML element in the DOM that will contain the Zenkipay payment button.
options: It is an object that contains the value of the as and the value of , as an optional property you can add the configuration of zenkiOrderId paymentSignaturethe styles of the orderId button, you can consult its definition here.
events: It is a callback function that notifies errors (if they occur) and the statuses of the payment process, you can check its definition here.

The following is an example of its implementation:

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

This method opens the Zenkipay payment modal and requires 2 parameters:

options: It is an object that contains the value of zenkiOrderId how orderId and the value of paymentSignature, you can consult its definition here.
events: It is a callback function that notifies errors (if they occur) and the statuses of the payment process, you can check its definition here.

The following is an example of its implementation:

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

This method closes the Zenkipay payment modal and does not receive any parameters.

The following is an example of its implementation:

zenkipay.closeModal();

Entities

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

Example

Below is a complete example:

<!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>

Was this article helpful?

What's Next

Angular

Table of contents

zenkipay.button
zenkipay.openModal
zenkipay.closeModal
Entities
Example