payeth-checkout/src/index.ts

Inline Payeth Checkout SDK

/**
 *
 * @param {Object} Payload
 *
 * @param {string} key
 * @param {number} amount
 * @param {string} currency
 * @param {string} email
 * @param {string} nanameme
 *
 */

 interface Payload {
  key: string;
  amount: number;
  currency?: string | "";
  email?: string | "";
  name?: string | "";
  onSuccess: Function;
  onCancel: Function;
}

export class PayethCheckoutInline {
  key: string;
  amount: number;
  currency?: string | "";
  email?: string | "";
  name?: string | "";
  iframe?: HTMLIFrameElement;
  sdkUrl: string = "https://payeth-checkout-qa.herokuapp.com/";
  onSuccess: Function;
  onCancel: Function;

  constructor(payload: Payload) {
    this.key = payload.key;
    if (this.key.length < 1) {
      throw new Error("Key cannot be empty");
    }
    this.amount = payload.amount;
    if (this.amount <= 0) {
      throw new Error("Amount must be greater than 0");
    }
    this.currency = payload.currency == undefined ? "" : payload.currency;
    this.email = payload.email == undefined ? "" : payload.email;
    this.name = payload.name == undefined ? "" : payload.name;

    this.onSuccess = payload.onSuccess;
    if (this.onSuccess == undefined || typeof this.onSuccess != "function") {
      throw new Error("onSuccess must be a function");
    }

    this.onCancel = payload.onCancel;
    if (this.onCancel == undefined || typeof this.onCancel != "function") {
      throw new Error("onCancel must be a function");
    }

    let params: string = "";

    params += `?x_public_key=${this.key}`;
    params += `&amount=${this.amount}`;
    if (this.currency.length > 0) {
      params += `&currency=${this.currency}`;
    }
    if (this.email.length > 0) {
      params += `&customer_email=${encodeURI(this.email)}`;
    }
    if (this.name.length > 0) {
      params += `&customer_name=${encodeURI(this.name)}`;
    }

    const checkoutUrl = this.sdkUrl + params;

    let iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.style.border = "none";
    iframe.style.width = "100vw";
    iframe.style.height = "100vh";
    iframe.style.position = "absolute";
    iframe.style.top = "0";
    iframe.style.zIndex = "24500302";
    iframe.allow = "payment";

    // create second iframe
    iframe.src = checkoutUrl;
    this.iframe = iframe;
    document.body.appendChild(iframe);

    var eventMethod = window.addEventListener as any
      ? "addEventListener"
      : "attachEvent";
    var eventer = window[eventMethod as any] as any;
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    const self = this;
    eventer(
      messageEvent,
      function (e: any) {
        var key = e.message ? "message" : "data";
        var data = e[key];
        self.handleMessage(data);
      },
      false
    );
  }

  initiate() {
    this.iframe!.style.display = "flex";
  }

  handleMessage(value: any) {
    switch (value) {
      case "payeth.modal.cancelled":
        this.closeModal();
        break;
      case "payeth.modal.success":
        this.paymentSuccess();
        break;
    }
  }

  closeModal() {
    this.iframe!.style.display = "none";
    this.onCancel();
    this.iframe!.contentWindow?.postMessage('payeth.modal.close.handle', '*');
  }

  paymentSuccess() {
    this.iframe!.style.display = "none";
    this.onSuccess();
    this.iframe!.contentWindow?.postMessage('payeth.modal.close.handle', '*');
  }
}