/**
|
* CheckoutSquare — Square Web Payments SDK checkout
|
*
|
* Extends CartCheckout with:
|
* - Square Web Payments SDK initialization
|
* - Card tokenization (new card or saved card)
|
* - Square-specific API submission
|
* - Saved cards via Square Customers API
|
*
|
* All cart management, totals, UI, order tracking, etc. are
|
* inherited from CartCheckout (cart-checkout.min.js).
|
*
|
* HTML structure: Checkout.php (JVBase\ui\Checkout)
|
* - Mounts card form into #payment-container
|
* - Uses data-catalog-id (mapped to catalog_object_id for Square API)
|
*/
|
class CheckoutSquare extends window.jvbCheckout {
|
constructor(config = {}) {
|
super({
|
...window.squareConfig,
|
...config,
|
});
|
|
// Square-specific
|
this.payments = null;
|
this.card = null;
|
}
|
|
/*****************************************************************
|
* INIT — Square Web Payments SDK
|
*****************************************************************/
|
|
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;
|
|
document.dispatchEvent(new CustomEvent('checkoutReady', {
|
detail: { checkout: this, provider: 'square' }
|
}));
|
|
} catch (error) {
|
console.error('Failed to initialize Square payments:', error);
|
this.handleError(error);
|
}
|
}
|
|
async initializePaymentMethods() {
|
const cardContainer = document.getElementById('payment-container');
|
if (!cardContainer) return;
|
|
try {
|
this.card = await this.payments.card({
|
style: this.getCardStyle()
|
});
|
await this.card.attach('#payment-container');
|
|
this.card.addEventListener('cardBrandChanged', (event) => {
|
console.log('Card brand:', event.detail.cardBrand);
|
});
|
} 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'
|
}
|
};
|
}
|
|
/*****************************************************************
|
* PAYMENT — Square tokenization
|
*****************************************************************/
|
|
async processPayment(orderData) {
|
try {
|
let sourceToken = null;
|
|
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,
|
}
|
}
|
});
|
|
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');
|
}
|
}
|
|
return await this.submitToServer(sourceToken, orderData, !!this.selectedCardId);
|
|
} catch (error) {
|
console.error('Payment processing failed:', error);
|
throw error;
|
}
|
}
|
|
/*****************************************************************
|
* SERVER — Square REST endpoint
|
*****************************************************************/
|
|
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;
|
}
|
|
/*****************************************************************
|
* ORDER DATA — Square-specific field mapping
|
*
|
* Base class builds the generic structure. We override to map
|
* catalog_id → catalog_object_id for the Square Orders API.
|
*****************************************************************/
|
|
extractOrderData(form) {
|
const base = super.extractOrderData(form);
|
|
// Remap for Square's Orders API
|
base.items = base.items.map(item => ({
|
catalog_object_id: item.catalog_id,
|
quantity: item.quantity,
|
price: item.price,
|
note: item.note,
|
}));
|
|
return base;
|
}
|
|
/*****************************************************************
|
* SAVED CARDS — Square Customers API
|
*****************************************************************/
|
|
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);
|
}
|
}
|
}
|
|
/*****************************************************************
|
* BOOTSTRAP — only init if Square is the active provider
|
*****************************************************************/
|
|
document.addEventListener('DOMContentLoaded', () => {
|
const form = document.querySelector('#checkout[data-provider="square"]');
|
if (form) {
|
window.squareCheckout = new CheckoutSquare();
|
}
|
});
|
