Skip to content
class SezzleCheckoutButton {
constructor(options){
this.theme = options.theme || 'light';
this.template = options.template || 'Checkout with %%logo%%';
this.eventLogger = new EventLogger({
merchantUUID: options.merchantUUID,
widgetServerBaseUrl: options.widgetServerBaseUrl
});
}
parseButtonTemplate () {
const sezzleImage = {
light: 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor_WhiteWM.svg',
dark: 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg'
};
const chosenImage = sezzleImage[this.theme] || sezzleImage.light;
const templateString = this.template.replace('%%logo%%',`
`);
return templateString;
}
addButtonStyle() {
const sezzleButtonStyle = document.createElement('style');
sezzleButtonStyle.innerHTML = `
@import url(https://fonts.googleapis.com/css?family=Comfortaa);
.sezzle-checkout-button {
cursor: pointer;
font-family: "Comfortaa", cursive;
background-position: center;
transition: background 0.8s;
border: none;
vertical-align: middle;
}
.sezzle-button-light {
background-color: #392558;
color: white;
}
.sezzle-button-light:hover, .sezzle-button-light:focus {
background-color: #d784ff;
color: white;
}
.sezzle-button-light:active {
background-color: purple;
color: white;
}
.sezzle-button-dark {
background-color: #fff;
color: #392558;
}
.sezzle-button-dark:hover, .sezzle-button-dark:focus {
background-color: #eee;
color: #392558;
}
.sezzle-button-dark:active {
background-color: #ccc;
color: #392558;
}
.sezzle-checkout-button .sezzle-button-logo-img {
width: 70px;
position: relative;
top: -2px;
vertical-align: middle;
}
`;
document.head.appendChild(sezzleButtonStyle);
}
inheritButtonStyles (sezzleCheckoutButton) {
const shopifyButton = document.querySelector('[name="checkout"]');
if(shopifyButton){
const shopifyButtonStyles = getComputedStyle(shopifyButton);
sezzleCheckoutButton.style.fontSize = shopifyButtonStyles.fontSize;
sezzleCheckoutButton.style.height = shopifyButtonStyles.height;
sezzleCheckoutButton.style.padding = shopifyButtonStyles.padding;
sezzleCheckoutButton.style.margin = shopifyButtonStyles.margin;
sezzleCheckoutButton.style.borderRadius = shopifyButtonStyles.borderRadius;
}
}
createButton () {
const checkoutButtons = document.getElementsByName('checkout');
checkoutButtons.forEach(checkoutButton => {
const checkoutButtonParent = checkoutButton ? checkoutButton.parentElement : null;
if (checkoutButtonParent && !checkoutButtonParent.querySelector('.sezzle-checkout-button')) {
this.addButtonStyle();
const sezzleCheckoutButton = document.createElement('button');
sezzleCheckoutButton.className = `sezzle-checkout-button sezzle-button-${this.theme === 'dark' ? 'dark' : 'light'}`;
sezzleCheckoutButton.innerHTML = this.parseButtonTemplate();
sezzleCheckoutButton.addEventListener('click', function (e) {
this.eventLogger.sendEvent('checkout-button-onclick');
e.stopPropagation();
e.preventDefault();
location.replace('/checkout?skip_shopify_pay=true');
}.bind(this));
checkoutButtonParent.append(sezzleCheckoutButton);
this.inheritButtonStyles(sezzleCheckoutButton);
}
});
}
init() {
try{
this.createButton();
this.eventLogger.sendEvent("checkout-button-onload");
}catch(e){
this.eventLogger.sendEvent("checkout-button-error", e.message);
}
}
}
class EventLogger {
constructor(options){
this.merchantUUID = options.merchantUUID || '';
this.widgetServerEventLogEndpoint = options.widgetServerBaseUrl ? `${options.widgetServerBaseUrl}/v1/event/log` : 'https://widget.sezzle.com/v1/event/log';
}
sendEvent(eventName, description="") {
const body = [{
event_name: eventName,
description: description,
merchant_uuid: this.merchantUUID,
merchant_site: window.location.hostname,
}];
this.httpRequestWrapper('POST', this.widgetServerEventLogEndpoint, body);
};
async httpRequestWrapper(method, url, body = null) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
if (body !== null) {
xhr.setRequestHeader('Content-Type', 'application/json');
}
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject(new Error('Something went wrong, contact the Sezzle team!'));
}
};
xhr.onerror = function () {
reject(new Error('Something went wrong, contact the Sezzle team!'));
};
body === null ? xhr.send() : xhr.send(JSON.stringify(body));
}).catch(function(e) {
console.log(e.message);
});
}
}
- Choosing a selection results in a full page refresh.
- Press the space key then arrow keys to make a selection.