collect-africa-js
Version:
Collect Africa Checkout library
3 lines (2 loc) • 7.81 kB
JavaScript
!function(){"use strict";class t{constructor(t){this.clientConfiguration=t,this._handleMessageAddEventListener=t=>this.handleMessageAddEventListener(t);const e=this.validateConfiguration(this.clientConfiguration);if(void 0!==e)throw new Error(`Configuration is invalid: ${e.toString()}`);if("undefined"==typeof window)throw new Error("Window object does not exist");this.hostUrl="https://"+(this.clientConfiguration.publicKey.startsWith("pk_live_")?"checkout.collect.africa":"staging-checkout.collect.africa"),this.hostKey="collect-pv-data",this.collectAppID=Math.floor(1e4+9e3*Math.random()),this.collectAppLoader=document.createElement("div"),this.collectAppWidget=document.createElement("iframe")}setup(){this.collectAppLoader.id="collect-pv-build-"+this.collectAppID,this.collectAppLoader.style.position="fixed",this.collectAppLoader.style.left="0px",this.collectAppLoader.style.top="0px",this.collectAppLoader.style.height="100%",this.collectAppLoader.style.width="100%",this.collectAppLoader.style.overflow="hidden",this.collectAppLoader.style.zIndex="9999999",this.collectAppLoader.style.backgroundColor="rgba(0, 0, 0, 0.75)",this.collectAppLoader.innerHTML='<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Collect Africa Payview Spinner</title> <style> .ct-px__app-loader { margin: 200px 0; text-align: center; color: white; } @keyframes ct-px__app-loader__spinner { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes ct-px__app-loader__spinner { 0% { opacity: 1; } 100% { opacity: 0; } } .ct-px__app-loader__spinner { position: relative; display: inline-block; } .ct-px__app-loader__spinner div { left: 95px; top: 35px; position: absolute; -webkit-animation: ct-px__app-loader__spinner linear 1s infinite; animation: ct-px__app-loader__spinner linear 1s infinite; background: white; width: 10px; height: 30px; border-radius: 40%; -webkit-transform-origin: 5px 65px; transform-origin: 5px 65px; } .ct-px__app-loader__spinner div:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-delay: -0.916666666666667s; animation-delay: -0.916666666666667s; } .ct-px__app-loader__spinner div:nth-child(2) { -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation-delay: -0.833333333333333s; animation-delay: -0.833333333333333s; } .ct-px__app-loader__spinner div:nth-child(3) { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-delay: -0.75s; animation-delay: -0.75s; } .ct-px__app-loader__spinner div:nth-child(4) { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: -0.666666666666667s; animation-delay: -0.666666666666667s; } .ct-px__app-loader__spinner div:nth-child(5) { -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation-delay: -0.583333333333333s; animation-delay: -0.583333333333333s; } .ct-px__app-loader__spinner div:nth-child(6) { -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .ct-px__app-loader__spinner div:nth-child(7) { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.416666666666667s; animation-delay: -0.416666666666667s; } .ct-px__app-loader__spinner div:nth-child(8) { -webkit-transform: rotate(210deg); transform: rotate(210deg); -webkit-animation-delay: -0.333333333333333s; animation-delay: -0.333333333333333s; } .ct-px__app-loader__spinner div:nth-child(9) { -webkit-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } .ct-px__app-loader__spinner div:nth-child(10) { -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: -0.166666666666667s; animation-delay: -0.166666666666667s; } .ct-px__app-loader__spinner div:nth-child(11) { -webkit-transform: rotate(300deg); transform: rotate(300deg); -webkit-animation-delay: -0.083333333333333s; animation-delay: -0.083333333333333s; } .ct-px__app-loader__spinner div:nth-child(12) { -webkit-transform: rotate(330deg); transform: rotate(330deg); -webkit-animation-delay: 0s; animation-delay: 0s; } .ct-px__app-loader__spinner { width: 40px; height: 40px; -webkit-transform: translate(-20px, -20px) scale(0.2) translate(20px, 20px); transform: translate(-20px, -20px) scale(0.2) translate(20px, 20px); } </style> <div id="ct-px__app-loader" class="ct-px__app-loader"> <div id="spinner" class="ct-px__app-loader__spinner"> <div></div><div></div><div></div><div></div><div></div><div></div><div> </div><div></div><div></div><div></div><div></div><div></div> </div> </div>',this.collectAppWidget.id="collect-pv-widget-"+this.collectAppID,this.collectAppWidget.name="checkout-collect-pv-widget-"+this.collectAppID,this.collectAppWidget.src=this.hostUrl,this.collectAppWidget.allowPaymentRequest=!0,this.collectAppWidget.allowtransparency=!0,this.collectAppWidget.style.position="fixed",this.collectAppWidget.style.left="0px",this.collectAppWidget.style.top="0px",this.collectAppWidget.style.margin="0px",this.collectAppWidget.style.padding="0px",this.collectAppWidget.style.height="100%",this.collectAppWidget.style.width="100%",this.collectAppWidget.style.overflow="hidden",this.collectAppWidget.style.zIndex="9999999",this.collectAppWidget.style.visibility="visible",this.collectAppWidget.style.backgroundColor="transparent",this.collectAppWidget.style["-webkit-tap-highlight-color"]="transparent",this.collectAppWidget.style.border="0px none transparent",this.collectAppWidget.onload=()=>{var t;null===(t=this.collectAppWidget.contentWindow)||void 0===t||t.postMessage({key:this.hostKey,email:this.clientConfiguration.email,firstName:this.clientConfiguration.firstName,lastName:this.clientConfiguration.lastName||"",reference:this.clientConfiguration.reference,amount:this.clientConfiguration.amount,currency:this.clientConfiguration.currency||"NGN",paymentLinkCode:this.clientConfiguration.paymentLinkCode||"",invoiceCode:this.clientConfiguration.invoiceCode||"",planCode:this.clientConfiguration.planCode||"",itemImage:this.clientConfiguration.itemImage||"/development/shoe.png",publicKey:this.clientConfiguration.publicKey},this.hostUrl),window.addEventListener("message",this._handleMessageAddEventListener,!1)}}open(){document.body.appendChild(this.collectAppLoader),document.body.appendChild(this.collectAppWidget)}async close(){"function"==typeof this.clientConfiguration.beforeClose&&await this.clientConfiguration.beforeClose("Before close checkout"),document.body.removeChild(this.collectAppLoader),document.body.removeChild(this.collectAppWidget),window.removeEventListener("message",this._handleMessageAddEventListener,!1),"function"==typeof this.clientConfiguration.onClose&&this.clientConfiguration.onClose("closed checkout")}handleMessageAddEventListener(t){t.origin===this.hostUrl&&t.data.key===this.hostKey&&("loading"===t.data.type&&(this.collectAppLoader.querySelector("div#ct-px__app-loader").style.display="none"),"close"===t.data.type&&this.close(),"success"===t.data.type&&"function"==typeof this.clientConfiguration.onSuccess&&this.clientConfiguration.onSuccess(t.data.data||""),"error"===t.data.type&&"function"==typeof this.clientConfiguration.onError&&this.clientConfiguration.onError(t.data.data||""))}validateConfiguration(t){const e=[];return t.email||e.push("email is required"),t.firstName||e.push("first name is required"),t.reference||e.push("reference is required"),t.amount||e.push("amount is required"),t.amount<1e4&&e.push("amount must be greater than 100 NGN"),t.publicKey||e.push("public key is required"),e.length>0?e:void 0}}"undefined"!=typeof window&&(window.CollectCheckout=t)}();
//# sourceMappingURL=collect-widget.js.map