tap-payment-popupjs/dist/umd/index.js

library for loading TAP's payment checkout gateway.

(function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a.PaymentSDK={}))})(this,function(a){"use strict";const r={checkoutURL:"https://checkout.touchandpay.me/"};class h{constructor(t){this.iframe=null,this.background=null,this.isIframeOpen=!1,this.transactionDefaults=t,this.checkoutRemoved=!1,this.fallback=f(),this.messageHandler=null,this.initializeCheckout(),this.listenForEvents()}setTransaction(t){this.transactionDefaults&&this.resetCheckout(),this.transactionDefaults=t,this.updateIframe()}initializeCheckout(){this.createPopupBackground()}getTransactionParameters(){if(!this.transactionDefaults)return null;const t=["onClose","callback"];return m(this.transactionDefaults,t)}updateIframe(){const t=this.getTransactionParameters();setTimeout(()=>{this.iframe.contentWindow.postMessage({params:t},"*")},3e3)}listenForEvents(){this.messageHandler=t=>{this.checkoutRemoved||this.handleCheckoutEvents(t)},window.addEventListener("message",this.messageHandler,!1)}openIframe(){this.showCheckout()}createPopupBackground(){const t=document.createElement("iframe");t.setAttribute("frameBorder","0"),t.setAttribute("allowtransparency","true"),t.id=u(),t.name="checkout-background-"+t.id,t.style.cssText=`
      z-index: 999999999999999;
      background: rgba(0, 0, 0, 0.75);
      border: none;
      overflow-x: hidden;
      overflow-y: hidden;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      display: none;
      transition: opacity 0.3s;
    `,this.background=t,document.body.appendChild(t);const n=this.background.contentWindow.document;n.open(),n.write(P()),n.close();const i=document.createElement("iframe");i.setAttribute("frameBorder","0"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.id=u(),i.name="checkout-"+i.id,i.style.cssText=`
      z-index: 999999999999999;
      background: transparent;
      border: none;
      overflow-x: hidden;
      overflow-y: hidden;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      display: none;
    `,i.src=r.checkoutURL+"popup",this.iframe=i,document.body.appendChild(i)}showCheckout(){!this.iframe||this.isIframeOpen||(this.background.style.display="",this.background.style.visibility="visible",this.iframe.style.display="",this.iframe.contentWindow.postMessage("render","*"),this.isIframeOpen=!0)}removeLoader(){this.iframe.style.visibility="visible";const t=this.background.contentWindow.document.getElementById("app-loader");t&&(t.style.display="none")}handleCheckoutEvents(t){if(t.origin+"/"===r.checkoutURL&&this.iframe.contentWindow===t.source){const n=t.data||t.message;try{n&&n.response.success.status===1&&(this.closeCheckout(!0),this.handleSuccess(n))}catch{}switch(n){case"loaded:transaction":this.removeLoader();break;case"close":this.closeCheckout();break}}}closeCheckout(t=!1){this.background.style.opacity=0,this.iframe.style.display="none",this.iframe.contentWindow.postMessage("close","*"),this.isIframeOpen=!1,!t&&this.transactionDefaults.onClose&&this.transactionDefaults.onClose.call(this),setTimeout(()=>{this.resetBackground()},300)}resetCheckout(){this.resetIframe(),this.resetBackground()}resetIframe(){this.iframe.style.visibility="hidden",this.transactionDefaults=null,this.updateIframe()}resetBackground(){this.background.style.display="none",this.background.style.opacity=1,this.background.contentWindow.document.getElementById("app-loader").style.display="block"}handleSuccess(t){this.transactionDefaults.callback&&this.transactionDefaults.callback.call(this,t)}destroy(){this.messageHandler&&(window.removeEventListener("message",this.messageHandler),this.messageHandler=null),this.iframe&&(this.iframe.remove(),this.iframe=null),this.background&&(this.background.remove(),this.background=null),this.isIframeOpen=!1,this.checkoutRemoved=!0}}let c;const l={isInitialized:!1,initialize(e){c=new h(e),console.log("TAPPaymentPop initialized"),this.isInitialized=!0},setup(e){const t={apiKey:e.apiKey||"",transID:e.transID||"",amount:e.amount||"",email:e.email||"",env:e.env||"",phone:e.phone||"",superAgentFee:e.superAgentFee||"",savePaymentDetails:e.savePaymentDetails||!1,customerReference:e.customerReference||"",onClose:e.onClose||"",callback:e.callback||"",customPayload:{email:e.email,...e.customPayload||{}}};if(p(t))return this.isInitialized?(console.log("Setting transaction parameters"),c.setTransaction(t)):(console.log("Initializing inline payment with parameters"),this.initialize(t)),c},destroy(){c&&(c.destroy(),c=null),this.isInitialized=!1}};function d(){return typeof window<"u"?window:{}}if(typeof d()<"u"){const e=d();e.TAPPaymentPop=l,e.onload=()=>{l.isInitialized||l.initialize()}}function u(){let e="";const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n<5;n++)e+=t.charAt(Math.floor(Math.random()*t.length));return e}function f(){const e="onload"in document.createElement("iframe");return e||console.warn("This browser does not support iframes. Please redirect to standard"),!e}function m(e,t){const n=JSON.parse(JSON.stringify(e));return t.forEach(i=>{delete n[i]}),Object.keys(n).forEach(i=>{(n[i]===null||n[i]===void 0||n[i].length===0)&&delete n[i]}),n}function p(e){if(y(e),!e.apiKey)throw new Error("Please provide your public key via the key attribute");if(!e.amount)throw new Error("Please provide transaction amount via the amount");if(!e.email)throw new Error("Please provide customer email via the email or customerCode attribute");if(e.savePaymentDetails){if(!e.customerReference)throw new Error("Please provide customerReference when savePaymentDetails is true.");if(!e.phone)throw new Error("Please provide phone when savePaymentDetails is true.")}return!0}function y(e){const t={email:"email",amount:"number",superAgentFee:"number",onClose:"function",callback:"function"};for(const s in e)e.hasOwnProperty(s)&&n(s,e[s]);function n(s,o){if(t[s]&&o)switch(t[s]){case"email":b(o)||i(s);break;case"number":g(o)||i(s);break;case"function":w(o)||i(s);break;case"object":k(o)||i(s);break;case"array":v(o)||i(s)}}function i(s){const o=t[s];throw alert(`Attribute ${s} must be a valid ${o}`),new Error(`Attribute ${s} must be a valid ${o}`)}}function b(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}function g(e){const t=typeof e=="string"?parseFloat(e):e;return!isNaN(t)&&isFinite(t)&&t>0}function w(e){return typeof e=="function"}function k(e){return e!==null&&typeof e=="object"}function v(e){return Array.isArray(e)}function P(){return`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Loading...</title>
      <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { display: flex; justify-content: center; align-items: center; height: 100vh; background: rgba(0, 0, 0, 0.50); }
        .loader { width: 50px; height: 50px; border: 5px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
      </style>
    </head>
    <body>
      <div class="loader" id="app-loader"></div>
    </body>
    </html>`}a.TAPPaymentPop=l,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.js.map