class SquareCheckout {
|
constructor(config = {}) {
|
this.config = {
|
...squareConfig,
|
...config
|
};
|
|
this.payments = null;
|
this.card = null;
|
this.isInitialized = false;
|
this.cartItems = new Map();
|
this.checkout = document.querySelector('aside#cart');
|
|
this.isOpen = this.config.isOpen !== '1' || false;
|
//User Context
|
this.isLoggedIn = this.config.is_logged_in|| false;
|
this.userEmail = this.config.user_email || '';
|
this.savedCards = [];
|
this.selectedCardId = null;
|
this.cartId = null;
|
|
this.cache = new window.jvbCache('cart', {TTL: 8.64e+7});
|
this.a11y = window.jvbA11y;
|
this.initCart();
|
|
if (this.checkout) {
|
this.initElements();
|
this.init();
|
this.initListeners();
|
|
if (this.isLoggedIn) {
|
this.loadSavedCards();
|
}
|
}
|
|
this.stepMultiplier = 1;
|
|
//Handle the opening and closing of the checkout window
|
this.popup = new window.jvbPopup({
|
popup: this.checkout,
|
toggle: this.toggle,
|
name: 'Cart',
|
onOpen: this.maybeAddEmptyState.bind(this),
|
});
|
|
console.log(this.popup);
|
// this.toggle.hidden = false;
|
}
|
|
async initCart() {
|
this.cartItems = await this.cache.get('cart') ?? new Map();
|
console.log('cart',this.cartItems);
|
if (this.cartItems.size > 0) {
|
this.notifyRestoredCart();
|
}
|
}
|
|
handleClick(e) {
|
if (window.targetCheck(e, 'button') && window.targetCheck(e, 'div.quantity')) {
|
let quantity = window.targetCheck(e, 'div.quantity');
|
this.handleNumberClick(e, quantity);
|
}else if (window.targetCheck(e, '[data-add-to-cart]')) {
|
let add = window.targetCheck(e, '[data-add-to-cart]');
|
this.handleAddToCart(add);
|
} else if (window.targetCheck(e, '[data-remove-from-cart]')) {
|
let remove = window.targetCheck(e, '[data-remove-from-cart]');
|
this.handleRemoveFromCart(remove);
|
} else if (window.targetCheck(e, '[data-clear-cart]')) {
|
this.clearCart();
|
}
|
}
|
|
handleChange(e, container) {
|
console.log('Checkout change');
|
let input = window.targetCheck(e, '.quantity-input');
|
if (input) {
|
|
let item = e.target.closest('.quantity');
|
let value = input.value;
|
|
if (window.targetCheck(e, '.cart-items')) {
|
let main = document.querySelector(`.menu-section [data-id="${item.dataset.id}"] input`);
|
if (main) {
|
main.value = input.value;
|
}
|
}
|
|
if (value > 0) {
|
this.handleAddToCart(item);
|
} else {
|
this.handleRemoveFromCart(item);
|
}
|
}
|
}
|
|
handleNumberClick(e, container) {
|
console.log(container);
|
e.preventDefault();
|
let change = 0;
|
let action = '';
|
if (e.target.closest('.increase')) {
|
change += 1;
|
} else if (e.target.closest('.decrease')) {
|
change -=1;
|
}
|
if (change !== 0) {
|
let [
|
step,
|
input
|
] = [
|
parseInt(container.dataset.step),
|
container.querySelector('input'),
|
];
|
|
let value = (input.value === '') ? 0 : parseInt(input.value);
|
|
input.value = (value + (step * change * this.stepMultiplier));
|
|
input.dispatchEvent(new Event('change', {bubbles: true}));
|
this.handleNumberLimits(container);
|
}
|
}
|
|
handleNumberLimits(container) {
|
let [
|
min,
|
max,
|
input,
|
increase,
|
decrease
|
] = [
|
container.dataset.min,
|
container.dataset.max,
|
container.querySelector('input'),
|
container.querySelector('.increase'),
|
container.querySelector('.decrease')
|
];
|
let value = parseInt(input.value);
|
if (value < min) {
|
input.value = min;
|
decrease.disabled = true;
|
} else if (value > max) {
|
input.value = max;
|
increase.disabled = false;
|
} else if (increase.disabled) {
|
increase.disabled = false;
|
} else if (decrease.disabled) {
|
decrease.disabled = false;
|
}
|
}
|
|
maybeAddEmptyState() {
|
let empty = this.itemsList.querySelector('.empty');
|
if(empty) {
|
empty.remove();
|
}
|
|
if (this.cartItems.size === 0) {
|
this.checkoutPanel.disabled = true;
|
this.checkoutPanel.title = 'Add some things to your cart first!';
|
let empty = window.getTemplate('emptyCart');
|
this.itemsList.append(empty);
|
this.table.closest('table').hidden = true;
|
this.total.hidden = true;
|
this.a11y.announce('Nothing in Cart');
|
} else {
|
this.checkoutPanel.disabled = false;
|
this.table.closest('table').hidden = false;
|
this.total.hidden = false;
|
this.checkoutPanel.title = 'Checkout';
|
}
|
}
|
handleEscape(e) {
|
if (e.key === 'Escape') {
|
this.stepMultiplier = 1;
|
} else if (e.ctrlKey && e.shiftKey) {
|
this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 100, 1000);
|
} else if (e.shiftKey) {
|
this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 10, 1000);
|
}
|
}
|
|
handleAddToCart(item) {
|
let id = item.dataset.id;
|
this.createItemElement(item);
|
let price = parseFloat(item.dataset.price);
|
let quantity = parseInt(item.querySelector('.quantity-input')?.value)??1;
|
let total = parseFloat(price * quantity);
|
this.cartItems.set(id, {
|
post_id: id,
|
name: item.dataset.name,
|
price: price,
|
quantity: quantity,
|
total: total,
|
square_catalog_id: item.dataset.squareCatalogId
|
});
|
this.saveCart();
|
}
|
|
notifyRestoredCart() {
|
let restored = window.getTemplate('restoredCart');
|
this.checkout.querySelector('.tab-content[data-tab=cartItems]').insertBefore(restored, this.itemsList);
|
|
this.cartItems.forEach(item => {
|
console.log(item);
|
let element = window.getTemplate('cartItem');
|
let field = element.querySelector('.quantity');
|
let price = item.price;
|
let quantity = item.quantity;
|
[
|
field.dataset.id,
|
element.querySelector('label').textContent,
|
element.querySelector('.price').textContent,
|
field.dataset.price,
|
field.dataset.squareCatalogId,
|
element.querySelector('[name="quantity"]').value,
|
element.querySelector('.total').textContent
|
] = [
|
item['post_id'],
|
item.name,
|
window.formatPrice(price),
|
price,
|
item['square_catalog_id'],
|
quantity,
|
window.formatPrice(quantity * price)
|
];
|
this.table.append(element);
|
});
|
this.updateTotal();
|
}
|
|
handleRemoveFromCart(item) {
|
if (confirm('This will remove this item from the cart. Continue?')) {
|
if (!item.querySelector('[data-id]')) {
|
//it's a remove button
|
item = item.closest('.item')?.querySelector('.quantity.field');
|
}
|
let id = item.dataset.id;
|
this.cartItems.delete(id);
|
this.table.querySelector(`[data-id="${id}"]`)?.closest('tr').remove();
|
//Reset the field value to 0 too
|
let input = document.querySelector(`[data-id="${id}"] input`);
|
if (input){
|
input.value = 0;
|
}
|
this.maybeAddEmptyState();
|
this.saveCart();
|
}
|
}
|
|
clearCart() {
|
this.cartItems.clear();
|
window.removeChildren(this.table);
|
this.saveCart();
|
}
|
|
saveCart() {
|
this.updateTotal();
|
this.cache.set('cart', this.cartItems);
|
}
|
|
updateTotal() {
|
let total = 0;
|
this.cartItems.forEach(item => {
|
console.log(item);
|
total += item.total;
|
});
|
let tax = total * .05;
|
total = window.formatPrice(total + tax);
|
tax = window.formatPrice(tax);
|
window.eraseText(this.totalTax);
|
window.eraseText(this.grandTotal);
|
window.typeText(this.totalTax, tax);
|
window.typeText(this.grandTotal, total);
|
this.totalTax.classList.remove('typeText');
|
}
|
|
createItemElement(item) {
|
let element = this.itemsList.querySelector(`[data-id="${item.dataset.id}"]`);
|
let add = false;
|
let price = item.dataset.price;
|
let quantity = item.querySelector('[name="quantity"]')?.value??1;
|
if (!element) {
|
add = true;
|
element = window.getTemplate('cartItem');
|
let field = element.querySelector('.quantity');
|
[
|
field.dataset.id,
|
element.querySelector('label').textContent,
|
element.querySelector('.price').textContent,
|
field.dataset.price,
|
field.dataset.squareCatalogId
|
] = [
|
item.dataset.id,
|
item.dataset.name,
|
window.formatPrice(price),
|
price,
|
item.dataset.squareCatalogId
|
];
|
}else {
|
element = element.closest('tr');
|
}
|
|
[
|
element.querySelector('[name="quantity"]').value,
|
element.querySelector('.total').textContent
|
] = [
|
quantity,
|
window.formatPrice(quantity * price)
|
];
|
if (add) {
|
element.classList.add('adding');
|
this.table.append(element);
|
setTimeout(()=> {
|
element.classList.remove('adding');
|
}, 500);
|
}
|
|
}
|
|
async init() {
|
if (!window.Square) {
|
console.error('Square Web Payments SDK not loaded');
|
return;
|
}
|
|
try {
|
this.payments = window.Square.payments(
|
this.config.application_id,
|
this.config.location_id
|
);
|
|
await this.initializePaymentMethods();
|
|
this.isInitialized = true;
|
|
// Trigger ready event
|
document.dispatchEvent(new CustomEvent('squareCheckoutReady', {
|
detail: { checkout: this }
|
}));
|
|
} catch (error) {
|
console.error('Failed to initialize Square payments:', error);
|
this.handleError(error);
|
}
|
}
|
|
initElements() {
|
this.toggle = document.querySelector('.toggle-cart');
|
|
if (!this.isOpen) {
|
this.toggle.disabled = true;
|
this.toggle.title = 'Currently closed for online ordering';
|
}
|
this.checkoutPanel = this.checkout.querySelector('button[data-tab="checkout"]');
|
this.itemsList = this.checkout.querySelector('.cart-items');
|
this.table = this.checkout.querySelector('.cart-items tbody');
|
this.total = this.checkout.querySelector('.cart-total');
|
this.totalTax = this.total.querySelector('.tax span');
|
this.grandTotal = this.total.querySelector('.total span');
|
this.checkoutForm = this.checkout.querySelector('form');
|
|
this.tabs = new window.jvbTabs(this.checkoutForm, {
|
updateURL: false
|
});
|
|
console.log('Initialized Checkout');
|
}
|
|
initListeners() {
|
this.clickHandler = this.handleClick.bind(this);
|
this.keyHandler = this.handleEscape.bind(this);
|
this.changeHandler = this.handleChange.bind(this);
|
|
this.checkoutForm.addEventListener('submit', (e) => this.handleFormSubmit(e));
|
document.addEventListener('click', this.clickHandler);
|
document.addEventListener('change', this.changeHandler);
|
}
|
|
async initializePaymentMethods() {
|
const cardContainer = document.getElementById('square-card-container');
|
if (!cardContainer) return;
|
|
try {
|
this.card = await this.payments.card({
|
style: this.getCardStyle()
|
});
|
await this.card.attach('#square-card-container');
|
this.card.addEventListener('cardBrandChanged', (event) => {
|
console.log('Card brand:', event.detail.cardBrand);
|
// You could show card brand icon here
|
});
|
} catch (error) {
|
console.error('Failed to initialize card:', error);
|
throw error;
|
}
|
}
|
|
|
|
getCardStyle() {
|
return {
|
input: {
|
fontSize: '16px',
|
fontFamily: 'inherit',
|
color: '#333',
|
backgroundColor: '#fff'
|
},
|
'.input-container': {
|
borderColor: '#ccc',
|
borderRadius: '4px'
|
},
|
'.input-container.is-focus': {
|
borderColor: '#006AFF',
|
borderWidth: '2px',
|
outline: '2px solid #006AFF',
|
outlineOffset: '2px'
|
},
|
'.input-container.is-error': {
|
borderColor: '#d63638'
|
}
|
};
|
}
|
|
async handleFormSubmit(event) {
|
if (!this.isOpen) {
|
return;
|
}
|
event.preventDefault();
|
|
if (!this.isInitialized) {
|
this.handleError('Checkout not initialized');
|
return;
|
}
|
|
const form = event.target;
|
const orderData = this.extractOrderData(form);
|
|
try {
|
window.jvbLoading.showLoading('Processing payment...');
|
const result = await this.processPayment(orderData);
|
this.handleSuccess(result, form);
|
} catch (error) {
|
this.handleError(error);
|
} finally {
|
window.jvbLoading.hideLoading();
|
}
|
}
|
|
extractOrderData(form) {
|
const items = Array.from(this.cartItems.values()).map(item => ({
|
catalog_object_id: item.square_catalog_id,
|
quantity: String(item.quantity),
|
price: item.price,
|
note: item.note || ''
|
}));
|
|
const total = items.reduce((sum, item) =>
|
sum + (item.price * item.quantity), 0
|
);
|
|
// Pre-fill customer info if logged in
|
return {
|
total: Math.round(total * 100),
|
items: items,
|
customer: {
|
email: this.isLoggedIn ? this.userEmail : (form.querySelector('[name="email"]')?.value || ''),
|
name: form.querySelector('[name="name"]')?.value || '',
|
phone: form.querySelector('[name="phone"]')?.value || ''
|
},
|
note: form.querySelector('[name="special_instructions"]')?.value || '',
|
pickup_time: form.querySelector('[name="pickup_time"]')?.value || ''
|
};
|
}
|
|
async processPayment(orderData) {
|
try {
|
let sourceToken = null;
|
|
// Check if using saved card or new card
|
if (this.selectedCardId) {
|
// Use saved card
|
sourceToken = this.selectedCardId;
|
} else {
|
// Tokenize new card
|
const tokenResult = await this.card.tokenize({
|
verificationDetails: {
|
amount: String(orderData.total),
|
currencyCode: this.config.currency || 'CAD',
|
intent: 'CHARGE',
|
customerInitiated: true,
|
billingContact: {
|
givenName: orderData.customer.name.split(' ')[0],
|
familyName: orderData.customer.name.split(' ').slice(1).join(' '),
|
email: orderData.customer.email,
|
phone: orderData.customer.phone,
|
addressLines: [form.querySelector('[name="address"]')?.value || ''],
|
city: form.querySelector('[name="city"]')?.value || '',
|
state: form.querySelector('[name="state"]')?.value || '',
|
postalCode: form.querySelector('[name="postal_code"]')?.value || '',
|
countryCode: 'CA' // or 'US'
|
}
|
}
|
});
|
|
if (tokenResult.status !== 'OK') {
|
const errors = tokenResult.errors?.map(e => e.message).join(', ') || 'Unknown error';
|
throw new Error(`Card tokenization failed: ${errors}`);
|
}
|
|
sourceToken = tokenResult.token;
|
if (tokenResult.details?.userChallenged) {
|
console.log('3D Secure verification completed');
|
}
|
}
|
|
// Send to server
|
return await this.submitToServer(sourceToken, orderData, !!this.selectedCardId);
|
|
} catch (error) {
|
console.error('Payment processing failed:', error);
|
throw error;
|
}
|
}
|
|
async submitToServer(sourceToken, orderData, isSavedCard = false) {
|
if (!this.isOpen) {
|
throw new Error('Store is currently closed');
|
}
|
|
const response = await fetch(this.config.api_url + 'process-payment', {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': this.config.nonce
|
},
|
body: JSON.stringify({
|
source_id: sourceToken,
|
is_saved_card: isSavedCard,
|
cart_id: this.getCartId(),
|
amount: orderData.total,
|
items: orderData.items,
|
customer: {
|
email: this.isLoggedIn ? this.userEmail : orderData.customer.email,
|
name: orderData.customer.name,
|
phone: orderData.customer.phone
|
},
|
note: orderData.note,
|
pickup_time: orderData.pickup_time
|
})
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) {
|
throw new Error(result.message || 'Payment processing failed');
|
}
|
|
this.clearCart();
|
|
return result;
|
}
|
|
getCartId() {
|
// Generate once per cart session
|
if (!this.cartId) {
|
this.cartId = crypto.randomUUID();
|
this.cache.set('cart_id', this.cartId);
|
}
|
return this.cartId;
|
}
|
|
trackOrder(orderNum) {
|
this.orderId = orderNum;
|
this.scheduleOrderCheck();
|
this.checkout.querySelector('button[data-tab=order]').hidden = false;
|
}
|
|
scheduleOrderCheck(){
|
window.debouncer.schedule(
|
'order',
|
() => { this.checkOrderStatus()},
|
30000 //30seconds
|
)
|
}
|
|
async checkOrderStatus() {
|
const response = await fetch(`/wp-json/jvb/v1/square/order-status/${this.orderId}`);
|
const data = await response.json();
|
if (data.status !== 'ready') {
|
this.scheduleOrderCheck();
|
}
|
this.updateOrderStatus(data);
|
}
|
|
updateOrderStatus(data) {
|
// Update status timeline
|
this.checkout.querySelectorAll('.status-item').forEach(item => {
|
if(item.dataset.status === data.status) {
|
item.classList.add('active');
|
}
|
});
|
|
// Update ETA
|
this.checkout.querySelector('#eta').textContent = data.eta || 'In progress';
|
}
|
/**************************************************************
|
* Customer Data
|
**************************************************************/
|
/**
|
* Load saved cards for logged-in user
|
*/
|
async loadSavedCards() {
|
try {
|
const response = await fetch(this.config.api_url + 'saved-cards', {
|
method: 'GET',
|
headers: {
|
'X-WP-Nonce': this.config.nonce
|
}
|
});
|
|
const result = await response.json();
|
|
if (result.success && result.cards) {
|
this.savedCards = result.cards;
|
this.renderSavedCards();
|
}
|
} catch (error) {
|
console.error('Failed to load saved cards:', error);
|
}
|
}
|
|
/**
|
* Render saved cards in the checkout form
|
*/
|
renderSavedCards() {
|
const container = document.getElementById('saved-cards');
|
if (!container || this.savedCards.length === 0) {
|
return;
|
}
|
|
const html = `
|
<div class="saved-cards-section">
|
<h4>Saved Payment Methods</h4>
|
${this.savedCards.map(card => `
|
<label class="saved-card">
|
<input type="radio" name="payment-method" value="saved" data-card-id="${card.id}">
|
<span class="card-info">
|
<strong>${card.card_brand}</strong> ending in ${card.last_4}
|
<small>Exp: ${card.exp_month}/${card.exp_year}</small>
|
</span>
|
</label>
|
`).join('')}
|
<label class="saved-card">
|
<input type="radio" name="payment-method" value="new" checked>
|
<span>Use a new card</span>
|
</label>
|
</div>
|
`;
|
|
container.innerHTML = html;
|
|
// Listen for payment method selection
|
container.querySelectorAll('input[name="payment-method"]').forEach(radio => {
|
radio.addEventListener('change', (e) => {
|
const useNewCard = e.target.value === 'new';
|
const cardContainer = document.getElementById('square-card-container');
|
|
if (cardContainer) {
|
cardContainer.style.display = useNewCard ? 'block' : 'none';
|
}
|
|
this.selectedCardId = useNewCard ? null : e.target.dataset.cardId;
|
});
|
});
|
}
|
|
|
handleSuccess(result, form) {
|
// Trigger success event
|
document.dispatchEvent(new CustomEvent('squareCheckoutSuccess', {
|
detail: { result, form }
|
}));
|
|
// Default redirect behavior
|
const successUrl = form.dataset.successUrl ||
|
`/order-confirmation/?order=${result.wp_order_id}`;
|
window.location.href = successUrl;
|
}
|
|
handleError(error) {
|
console.error('Square checkout error:', error);
|
|
// Trigger error event
|
document.dispatchEvent(new CustomEvent('squareCheckoutError', {
|
detail: { error }
|
}));
|
|
// Default error display
|
window.jvbNotifications?.show?.(error.message || 'Payment failed', 'error');
|
}
|
}
|
|
document.addEventListener('DOMContentLoaded', () =>{
|
window.squareCheckout = new SquareCheckout();
|
});
|
|
|
// Usage example
|
// document.addEventListener('DOMContentLoaded', async function() {
|
// // Get config from WordPress
|
// const configResponse = await fetch('/wp-json/jvb/v1/square/payment-form');
|
// const config = await configResponse.json();
|
//
|
// const checkout = new SquareCheckout(config);
|
//
|
// // Handle form submission
|
// document.getElementById('checkout-form').addEventListener('submit', async function(e) {
|
// e.preventDefault();
|
//
|
// const orderData = {
|
// total: parseFloat(this.dataset.total),
|
// items: JSON.parse(this.dataset.items),
|
// customer: {
|
// email: this.querySelector('[name="email"]').value,
|
// name: this.querySelector('[name="name"]').value
|
// }
|
// };
|
//
|
// try {
|
// const result = await checkout.processPayment(orderData);
|
// // Handle success - redirect or show confirmation
|
// window.location.href = '/order-confirmation/?order=' + result.wp_order_id;
|
// } catch (error) {
|
// // Handle error
|
// alert('Payment failed: ' + error.message);
|
// }
|
// });
|
// });
|
