b24-payment-sdk/index.min.js

Connect your app to b24 payment gateway in easy way

let b24sdk={};if("undefined"!=typeof HTMLElement){class b24widget extends HTMLElement{constructor(){super();const shadow=this.attachShadow({mode:"open"}),div=document.createElement("div");div.setAttribute("class","containner containner-hide"),div.innerHTML='\n            \n            <style>\n\n            /* responsesive */\n            @media (min-width: 320px) {\n                .one-side{\n                width: 400px !important;\n                }\n                .two-side{\n                width: 400px !important;\n                }\n\n            }\n            \n            @media  (min-width: 768px) {\n                .one-side{\n                    width: 400px !important;\n                }\n                .two-side{\n                    width: 400px !important;\n                }\n            }\n\n            @media (min-width: 800px) {\n                .one-side{\n                    width: 400px !important;\n                }\n                .two-side{\n                    width: 800px !important;\n                }\n            }\n            \n            @media (min-width: 992px) {\n                .one-side{\n                width: 500px !important;\n                }\n                .two-side{\n                width: 1000px !important;\n                }\n\n            }\n\n            @media (min-width: 1200px) {\n                .one-side{\n                width: 500px !important;\n                }\n                .two-side{\n                width: 1000px !important;\n                }\n            }\n\n            .loading{\n                height: 100%;\n                width: 100%;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                position: absolute;\n                top: 0;\n                z-index: 9999;\n                opacity:100%;\n            }\n            .loading-hide {\n                opacity: 0 !important;\n                transition: all 0.3s ease-out !important;\n                z-index: -1;\n            }\n            .animate-loading {\n                animation: 0.5s linear 0s 1 slideInFromLeft;\n            }\n            @keyframes slideInFromLeft {\n                0% {\n                opacity: 0;;\n                }\n            \n                100% {\n                opacity: 1;\n                }\n            }\n            .loader {\n                width: 48px;\n                height: 48px;\n                border: 5px solid #375c94;\n                border-bottom-color: transparent;\n                border-radius: 50%;\n                display: inline-block;\n                box-sizing: border-box;\n                animation: 1s rotation 0s linear infinite;\n                }\n            \n                @keyframes rotation {\n                0% {\n                    transform: rotate(0deg);\n                }\n                100% {\n                    transform: rotate(360deg);\n                }\n                }\n\n                .containner {\n                    position: fixed;\n                    width: 100%;\n                    height: 100%;\n                    top: 0;\n                    left: 0;\n                    background-color: #607d8b30;\n                    opacity: 100%;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    z-index: 9999;\n                    opacity:100%;\n                }\n                .containner-hide {\n                    opacity: 0 !important;\n                    transition: all 0.1s ease-out !important;\n                    z-index: -1;\n                }\n                .modal{\n                    position: relative;\n                    border-radius: 1.8rem; \n                    background-color: #ffffff; \n                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n                    transform: scale(1);\n                    opacity: 100%;\n                    transition: all 0.3s ease-in;\n                    height: 620px;\n                    width: 800px;\n                    margin: 16px;\n                }\n                .modal-hide{\n                    opacity: 0 !important;\n                    transform: scale(0.9) !important;\n                    transition: all 0.1s ease-out !important;\n                }\n                .modal-body{\n                    flex: 1 1 auto; \n                    justify-content: center; \n                    text-align: center; \n                    width: 100%;\n                    height: 100%;\n                }\n                .iframe {\n                    border-radius: 1.8rem;\n                    border: none;\n                    width: 100%;\n                    height: 100%;\n                    z-index: 9999;\n                }\n                .iframe-hide {\n                    opacity: 0 !important;\n                    transition: all 0.1s ease-out !important;\n                    z-index: -1;\n                }\n\n            </style>\n\n            <div class="modal modal-hide two-side" id="modal">\n                \x3c!--content--\x3e\n                    \x3c!--body--\x3e\n                    <div class="modal-body">\n                        <iframe class="iframe iframe-hide" src=""\n                        \n                        >\n                        </iframe>\n                        <div class="loading">\n                        <span class="loader"></span>\n                        </div>\n                    </div>\n            </div>',shadow.appendChild(div)}}customElements.define("b24-root",b24widget),document.body.appendChild(document.createElement("b24-root")),window.addEventListener("message",(function(event){if("from"in event.data&&"b24checkout"===event.data.from&&"type"in event.data)if("resize"===event.data.type){console.log("resize",event.data);let modal=root_element().querySelector("#modal");1==event.data.data.only_one_panel?(modal.classList.add("one-side"),modal.classList.remove("two-side")):(modal.classList.add("two-side"),modal.classList.remove("one-side"))}else if("ready"===event.data.type)console.log("got ready event !"),root_element().querySelector(".loading").classList.add("loading-hide"),root_element().querySelector(".iframe").classList.remove("iframe-hide");else if("close"===event.data.type){b24sdk.callback&&b24sdk.callback(event.data),root_element().querySelector(".iframe").src="",root_element().querySelector(".containner").classList.add("containner-hide"),root_element().querySelector(".modal").classList.add("modal-hide"),root_element().querySelector(".iframe").classList.add("iframe-hide")}else if("success"===event.data.type)b24sdk.callback&&b24sdk.callback(event.data);else if("redirect"==event.data.type){if(!event.data.data.url||""==event.data.data.url)return;top&&(top.window.location=event.data.data.url),window.location=event.data.data.url}}))}else console.log("HTMLElement is not available.");let config={prod:{url:"https://checkoutpage.bill24.io"},demo:{url:"https://checkout-demo.bill24.io"}},env="demo",root_element=()=>document.getElementsByTagName("b24-root")[0].shadowRoot;b24sdk={init:function(options){console.log("config options : ",options);let transaction_id=options.tranId,referer_key=options.refererKey,is_popup=options.isPopup,lang=options.language||"km",environment=options.isProduction?"prod":"demo",theme=options.darkMode?"dark":"light",webUrl=options.webUrl||config[env].url;b24sdk.callback=options.callback||function(data){},env=environment;let url=`${webUrl}/checkoutv2/${transaction_id}?is_sdk=true&lang=${lang}&referer=${referer_key}&theme=${theme}`;if(console.log(0==is_popup||0==is_popup),0==is_popup||0==is_popup)return console.log("redirecting to ",url),void(window.location=`${webUrl}/checkoutv2/${transaction_id}?lang=${lang}&referer=${referer_key}&theme=${theme}`);let iframe=root_element().querySelector(".iframe");root_element().querySelector(".containner").classList.remove("containner-hide"),root_element().querySelector(".modal").classList.remove("modal-hide"),iframe.src=url,root_element().querySelector(".loading").classList.remove("loading-hide")}},"undefined"!=typeof window&&(window.B24PaymentSdk=b24sdk);export default b24sdk;