UNPKG

@ravenpay/bankbox-me-sdk

Version:
9 lines (8 loc) 9.31 kB
/** * @license * author: Ezeani Emmanuel <emmanuel.ezeani@getravenbank.com> * BankboxMeSdk.js v0.1.36 * Released under the MIT license. */ var BankboxMeSdk=function(){"use strict";class e extends EventTarget{constructor(){super(),this.handledEvents=new Set,this.isIframe=window!==window.parent,this.listenToMessages(),this.setupClearInterval()}emit(e,t){const i=new CustomEvent(e,{detail:t});this.dispatchEvent(i),this.isIframe?window.parent.postMessage({type:e,data:t},"*"):this.broadcastToIframes(e,t)}subscribe(e,t){this.addEventListener(e,(e=>{t(e)}))}listenToMessages(){window.addEventListener("message",(e=>{if(!e.data||!e.data.type)return;const{type:t,data:i}=e.data;this.handledEvents.has(t)||(this.handledEvents.add(t),this.dispatchEvent(new CustomEvent(t,{detail:i})))}))}broadcastToIframes(e,t){document.querySelectorAll("iframe").forEach((i=>{var n;null===(n=i.contentWindow)||void 0===n||n.postMessage({type:e,data:t},"*")}))}setupClearInterval(){setInterval((()=>{this.handledEvents.clear()}),600)}}const t=new e;return class{constructor(e){var i;this.config={},this.windowSize={width:window.innerWidth,height:window.innerHeight},this.paymentOption={},this.isBluethoothConnected=!1,this.constants={success:"success",fail:"fail",error:"error",event_hook:"bankbox_events",style_config:"style_config",load:"load",sdkOpen:"sdk:open",bluethoothConnected:"sdk:bluetooth_connected",sdkPaymentData:"sdk:payment_data",systemReady:"sdk:system_ready",sdkClose:"sdk:close"},this.injectAnimationStyle=()=>{const e="moveBankBoxMeInnerWrapUp-style";if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.innerHTML="\n @keyframes moveBankBoxMeInnerWrapUp {\n 0% {\n transform: translateY(7%) translateX(-50%);\n }\n 100% {\n transform: translateY(0%) translateX(-50%);\n }\n }\n ",document.head.appendChild(t)}},this.appName=e.appName,this.environment=e.environment,this.widgetOptions=e.widgetOptions,this.containerId=null!==(i=e.containerId)&&void 0!==i?i:"bankbox-container",this.iframe=null,this.container=null,this.$event=t,this.messageHandlers=new Map,this.targetOrigin=this.getTargetOrigin(),this.isInitialized=!1,this.config=e,this.registerCoreListeners(e)}getTargetOrigin(e){var t,i,n;let s="development"===this.environment?"http://localhost:3000":"sandbox"===this.environment?"https://bankbox-me.netlify.app":`https://${null!==(t=this.appName)&&void 0!==t?t:"bankly"}.bankbox.me`;const o=[];return(null==e?void 0:e.email)&&o.push(`email=${e.email}`),(null==e?void 0:e.amount)&&o.push(`amount=${e.amount}`),(null===(i=this.widgetOptions)||void 0===i?void 0:i.isPersistent)&&o.push("persist=true"),(null===(n=this.widgetOptions)||void 0===n?void 0:n.stream)?o.push("stream=true"):o.push("stream=false"),o.length>0&&(s+=`?${o.join("&")}`),s}registerCoreListeners(e){e.onSuccess&&t.subscribe(this.constants.success,(t=>{var i;return null===(i=e.onSuccess)||void 0===i?void 0:i.call(e,t.detail)})),e.onBluethoothConnected&&t.subscribe(this.constants.bluethoothConnected,(t=>{var i;return null===(i=e.onBluethoothConnected)||void 0===i?void 0:i.call(e,t.detail)})),e.onFail&&t.subscribe(this.constants.fail,(t=>{var i;return null===(i=e.onFail)||void 0===i?void 0:i.call(e,t.detail)})),e.onError&&t.subscribe(this.constants.error,(t=>{var i;return null===(i=e.onError)||void 0===i?void 0:i.call(e,t.detail)})),e.onLoad&&t.subscribe(this.constants.load,(()=>{var t;return null===(t=e.onLoad)||void 0===t?void 0:t.call(e)}))}initWindowResizeListener(){window.addEventListener("resize",(()=>{var e,t;this.windowSize={width:window.innerWidth,height:window.innerHeight},this.container&&(this.container.style.width=(null===(e=this.widgetOptions)||void 0===e?void 0:e.width)?null===(t=this.widgetOptions)||void 0===t?void 0:t.width:this.windowSize.width>900?"50%":"100%")}))}initializeListeners(){t.subscribe(this.constants.event_hook,this.handleIncomingMessage.bind(this)),t.subscribe(this.constants.bluethoothConnected,this.handleBluethoothConnected.bind(this)),t.subscribe(this.constants.systemReady,this.handleBankboxReady.bind(this)),this.initWindowResizeListener(),this.injectAnimationStyle()}initializeIframe(e){if(!this.container&&(this.container=document.getElementById(this.containerId),!this.container)){const e=document.createElement("div");e.style.position="fixed",e.style.top="0",e.id="bankbox-overlay",e.style.left="0",e.style.width="100%",e.style.display="flex",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.5)",e.style.backdropFilter="blur(10px)",e.style.zIndex="9998",document.body.appendChild(e),this.container=document.createElement("div"),this.container.id=this.containerId,this.container.style.position="fixed",this.container.style.bottom="0",this.container.style.left="50%",this.container.style.width=this.windowSize.width>900?"50%":"100%",this.container.style.transform="translateX(-50%)",this.container.style.height="98%",this.container.style.zIndex="9999",this.container.style.display="none",this.container.style.overflow="hidden",this.container.style.backgroundColor="white",this.container.style.boxShadow="0 -2px 10px rgba(0, 0, 0, 0.1)",this.container.style.borderTopLeftRadius="30px",this.container.style.borderTopRightRadius="30px",this.container.style.animation="moveBankBoxMeInnerWrapUp 0.5s ease-in-out backwards",document.body.appendChild(this.container);const t=document.createElement("span");t.innerText="×",t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.width="30px",t.style.height="30px",t.style.border="none",t.style.borderRadius="50%",t.style.display="grid",t.style.placeItems="center",t.style.backgroundColor="black",t.style.color="white",t.style.fontSize="20px",t.style.cursor="pointer",t.style.zIndex="10000",t.addEventListener("click",(()=>{this.container.style.display="none",e.style.display="none"})),this.container.appendChild(t)}this.iframe||(this.iframe=document.createElement("iframe"),this.iframe.style.display="none",this.iframe.style.width="100%",this.iframe.style.height="100%",this.iframe.style.border="none",this.iframe.src=this.getTargetOrigin(e),this.iframe.allow="bluetooth; usb",this.iframe.onload=()=>{this.isInitialized=!0,this.$event.emit("load",null),window.addEventListener("message",this.handleIncomingMessage.bind(this))},this.iframe.onerror=e=>{this.$event.emit("error",{type:"iframe_error",message:"Failed to load Bankbox iframe",error:e})},this.container.appendChild(this.iframe))}reinjectOverlay(){const e=document.getElementById("bankbox-overlay");if(e)e.style.position="fixed",e.style.top="0",e.id="bankbox-overlay",e.style.left="0",e.style.width="100%",e.style.display="flex",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.5)",e.style.backdropFilter="blur(10px)",e.style.zIndex="9998",document.body.appendChild(e);else{const e=document.createElement("span");e.style.position="fixed",e.style.top="0",e.id="bankbox-overlay",e.style.left="0",e.style.width="100%",e.style.display="flex",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.5)",e.style.backdropFilter="blur(10px)",e.style.zIndex="9998",document.body.appendChild(e)}}mount(e){if(null==e?void 0:e.containerId){const t=document.getElementById(null==e?void 0:e.containerId);if(!t)throw new Error(`Container element with id '${null==e?void 0:e.containerId}' not found`);this.container=t}else this.initializeIframe(e);if(!this.container)throw new Error("Container element not found");this.container.style.display="block",this.iframe&&!this.iframe.parentElement&&this.container.appendChild(this.iframe),this.iframe.style.display="block",this.reinjectOverlay()}open(e){return this.mount(e),this.paymentOption=null!=e?e:{},this.sendMessage({type:this.constants.sdkOpen,data:void 0}),this.initializeListeners(),setTimeout((()=>{this.paymentOption.amount||this.initPayment(e)}),1e3),{isBluethoothConnected:this.isBluethoothConnected}}initPayment(e){this.sendMessage({type:this.constants.sdkPaymentData,data:e,message:"SDK Payment Data Recieved"})}close(){this.container&&(this.container.style.display="none");const e=document.getElementById("bankbox-overlay");e&&(e.style.display="none"),this.iframe&&(this.iframe.style.display="none"),this.sendMessage({type:this.constants.sdkClose,data:void 0})}handleBluethoothConnected(e){this.isBluethoothConnected=!0,this.initPayment(this.paymentOption)}handleIncomingMessage(e){var t,i;if(e.origin!==this.targetOrigin)return;const n=null!==(t=e.details)&&void 0!==t?t:e.data;if(null==n?void 0:n.type)switch(n.type){case"bankbox:ready":this.handleBankboxReady();break;case"rrn_data":this.$event.emit(null===(i=n.message)||void 0===i?void 0:i.status,n.data);break;case"bankbox:close":this.close();break;default:this.$event.emit(n.type,n.data)}}handleBankboxReady(){this.sendMessage({type:"sdk:init",data:Object.assign({environment:this.environment},this.widgetOptions)})}sendMessage(e){t.emit(e.type,e)}destroy(){var e;window.removeEventListener("message",this.handleIncomingMessage),(null===(e=this.iframe)||void 0===e?void 0:e.parentNode)&&this.iframe.parentNode.removeChild(this.iframe),t.emit(this.constants.event_hook,null),this.iframe=null,this.container=null,this.config={},this.appName="",this.isInitialized=!1}}}(); //# sourceMappingURL=index.min.js.map