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