class BoldCheckoutElement extends HTMLElement {
static get observedAttributes(){
return ["plugin_url", "test_mode", "is_light"];
}
constructor(){
super();
this.shadowDOM=this.attachShadow({ mode: "closed" });
this.templateHTML="";
this.cssText="";
this.loadTemplateAndCSS();
}
async loadTemplateAndCSS(){
const pluginUrl=this.getAttribute("plugin_url")||"";
try {
const cssResponse=await fetch(`${pluginUrl}../assets/css/bold-checkout-ui.css`);
this.cssText=await cssResponse.text();
this.render();
} catch (error){
console.error("Error loading templates:", error);
}}
connectedCallback(){
if(this.cssText){
this.render();
}}
attributeChangedCallback(name){
if(this.constructor.observedAttributes.includes(name)){
this.render();
}}
render(){
if(!this.cssText){
return;
}
this.templateHTML=this.innerHTML;
const pluginUrl=this.getAttribute("plugin_url")||"";
const testMode=["yes", "1", true, 1, "true"].includes(this.getAttribute("test_mode"));
const isLight=["yes", "1", true, 1, "true"].includes(this.getAttribute("is_light"));
const filledTemplate=this.fillTemplate(this.templateHTML, pluginUrl, isLight, testMode);
this.shadowDOM.innerHTML=`<style>${this.cssText}</style>${filledTemplate}`;
}
fillTemplate(templateHTML, pluginUrl, isLight, testMode){
let processedTemplate=templateHTML
.replace(/\{\{plugin_url\}\}/g, pluginUrl);
const parser=new DOMParser();
const doc=parser.parseFromString(processedTemplate, "text/html");
if(!testMode){
const testModeElement=doc.getElementById("bold_co_checkout_page_body_test_mode");
if(testModeElement){
testModeElement.remove();
}}
const containerBackgroundElement=doc.getElementById("bold_co_container_info_checkout_page");
if(isLight){
containerBackgroundElement.classList.add("is_light");
}else{
containerBackgroundElement.classList.remove("is_light");
}
processedTemplate=doc.body.innerHTML;
return processedTemplate;
}}
window.customElements.define("bold-checkout-element", BoldCheckoutElement);
(function (){
if(!window.bold){
window.bold={};}
const paymentInput=document.getElementById('payment_method_bold_co');
if(paymentInput){
paymentInput.addEventListener('change', bold_load_icon_basic);
}
jQuery(document.body).on('updated_checkout', function(){
window.boldUIKKitAlreadyProcessed=undefined;
bold_load_icon_basic();
});
})();
function bold_load_icon_basic(){
const label=document.querySelector('label[for="payment_method_bold_co"]');
if(label){
const boldIcon=label?.querySelector(':scope > img')?.src;
if(!window.bold.label){
window.bold.label=label.innerText.trim();
}
if(boldIcon){
window.bold.icon=boldIcon;
window.bold.isLight=boldIcon.indexOf('light')!==-1;
}
const timestamp=new Date().getTime();
const iconsIdContainer='bold-icon-checkout'+timestamp;
label.innerHTML=window.bold.label ? window.bold.label:label.innerText;
const divIcons=document.createElement('div');
divIcons.id=iconsIdContainer;
Object.assign(divIcons.style, {
float: 'right',
marginRight: '20px',
marginLeft: 'auto',
maxWidth: '40%'
});
label.appendChild(divIcons);
const existingScripts=Array.from(document.querySelectorAll(`script[src*="${BoldPlugin.checkoutUrl}/library/ui-kit.js"]`));
existingScripts.forEach(script=> script.remove());
const script=document.createElement('script');
script.src=`${BoldPlugin.checkoutUrl}/library/ui-kit.js?hideLogo&type=slider&target=${iconsIdContainer}${window.bold.isLight ? '&theme=dark':''}&v=${timestamp}`;
script.async=true;
script.onload=()=> {
label.querySelector('img')?.remove();
};
script.onerror=()=> {
const BoldImage=document.createElement('img');
BoldImage.src=window.bold.icon;
BoldImage.style.float='right';
BoldImage.style.marginRight='20px';
BoldImage.alt='Bold';
label.innerHTML=label.innerText;
label.appendChild(BoldImage);
};
document.body.appendChild(script);
}};