/**
|
* HelcimCheckout — extends CartCheckout for HelcimPay.js payments
|
*
|
* Payment flow:
|
* 1. User clicks checkout → extractOrderData()
|
* 2. Server call to /helcim/initialize-checkout → returns checkoutToken
|
* 3. Call appendHelcimPayIframe(checkoutToken) → Helcim renders modal
|
* 4. Listen for window 'message' event → SUCCESS / CANCELLED / ERROR
|
* 5. On SUCCESS, validate transaction server-side
|
*
|
* @see https://devdocs.helcim.com/docs/helcim-pay-js
|
*/
|
class CheckoutHelcim extends window.jvbCheckout {
|
constructor(config = {}) {
|
super({
|
...window.helcimConfig,
|
...config,
|
});
|
this.pendingSecretToken = null;
|
}
|
|
/*****************************************************************
|
* INIT — HelcimPay.js SDK (loaded externally)
|
*****************************************************************/
|
|
async init() {
|
// HelcimPay.js is loaded via <script> tag, no SDK init needed.
|
// We just need the global appendHelcimPayIframe function.
|
if (typeof window.appendHelcimPayIframe !== 'function') {
|
console.warn('HelcimPay.js SDK not loaded — payment will initialize on first checkout');
|
}
|
|
this.isInitialized = true;
|
|
// Listen for HelcimPay.js message events
|
window.addEventListener('message', (e) => this.handleHelcimMessage(e));
|
|
document.dispatchEvent(new CustomEvent('checkoutReady', {
|
detail: { checkout: this, provider: 'helcim' }
|
}));
|
}
|
|
/*****************************************************************
|
* PAYMENT FLOW
|
*****************************************************************/
|
|
async processPayment(orderData) {
|
// If using a saved card, process server-side directly
|
if (this.selectedCardId) {
|
return this.submitToServer({
|
card_id: this.selectedCardId,
|
is_saved: true,
|
}, orderData);
|
}
|
|
// Otherwise, initialize HelcimPay.js checkout
|
const session = await this.initializeCheckoutSession(orderData);
|
if (!session.success) {
|
throw new Error(session.message || 'Failed to initialize checkout');
|
}
|
|
// Store secretToken for server-side validation after payment
|
this.pendingSecretToken = session.secretToken;
|
this.pendingOrderData = orderData;
|
|
// Open HelcimPay.js iframe modal
|
window.appendHelcimPayIframe(session.checkoutToken, {
|
type: 'modal', // 'modal' or 'inline'
|
});
|
|
// The flow continues in handleHelcimMessage() when the iframe posts back
|
// Return a promise that resolves when payment completes
|
return new Promise((resolve, reject) => {
|
this._paymentResolve = resolve;
|
this._paymentReject = reject;
|
});
|
}
|
|
/**
|
* Server call: initialize a HelcimPay.js checkout session
|
*/
|
async initializeCheckoutSession(orderData) {
|
const response = await fetch(this.config.api_url + 'initialize-checkout', {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': this.config.nonce,
|
},
|
body: JSON.stringify({
|
amount: orderData.total / 100, // Convert cents back to dollars
|
customer: orderData.customer,
|
items: orderData.items,
|
cart_id: this.getCartId(),
|
}),
|
});
|
|
return response.json();
|
}
|
|
/**
|
* Handle postMessage events from HelcimPay.js iframe
|
*/
|
handleHelcimMessage(event) {
|
const data = event.data;
|
|
// HelcimPay.js sends messages with specific event types
|
if (!data || typeof data !== 'object') return;
|
|
// Helcim sends eventStatus: 'ABORTED' | 'SUCCESS' | 'FAILED'
|
if (data.eventStatus === 'SUCCESS') {
|
this.handleHelcimSuccess(data);
|
} else if (data.eventStatus === 'ABORTED') {
|
this.handleHelcimCancelled();
|
} else if (data.eventStatus === 'FAILED') {
|
this.handleHelcimError(data);
|
}
|
}
|
|
async handleHelcimSuccess(data) {
|
try {
|
// Validate the transaction server-side using secretToken
|
const result = await this.submitToServer({
|
transaction_id: data.transactionId,
|
secret_token: this.pendingSecretToken,
|
event_data: data,
|
}, this.pendingOrderData);
|
|
this.clearPending();
|
this._paymentResolve?.(result);
|
} catch (error) {
|
this.clearPending();
|
this._paymentReject?.(error);
|
}
|
}
|
|
handleHelcimCancelled() {
|
this.clearPending();
|
window.jvbLoading?.hideLoading?.();
|
this.a11y.announce('Payment cancelled');
|
this._paymentReject?.(new Error('Payment cancelled by user'));
|
}
|
|
handleHelcimError(data) {
|
this.clearPending();
|
window.jvbLoading?.hideLoading?.();
|
const message = data.errorMessage || 'Payment failed';
|
this._paymentReject?.(new Error(message));
|
}
|
|
clearPending() {
|
this.pendingSecretToken = null;
|
this.pendingOrderData = null;
|
}
|
|
/*****************************************************************
|
* SERVER COMMUNICATION
|
*****************************************************************/
|
|
async submitToServer(paymentData, orderData) {
|
if (!this.isOpen) {
|
throw new Error('Store is currently closed');
|
}
|
|
const endpoint = paymentData.is_saved
|
? 'process-saved-payment'
|
: 'validate-transaction';
|
|
const response = await fetch(this.config.api_url + endpoint, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': this.config.nonce,
|
},
|
body: JSON.stringify({
|
...paymentData,
|
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;
|
}
|
|
/*****************************************************************
|
* SAVED CARDS
|
*****************************************************************/
|
|
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);
|
}
|
}
|
|
/*****************************************************************
|
* INVOICES — Helcim-specific (source of truth is Helcim)
|
*****************************************************************/
|
|
async loadInvoices() {
|
try {
|
const response = await fetch(this.config.api_url + 'invoices', {
|
headers: { 'X-WP-Nonce': this.config.nonce },
|
});
|
const result = await response.json();
|
if (result.success) {
|
return result.invoices || [];
|
}
|
} catch (error) {
|
console.error('Failed to load invoices:', error);
|
}
|
return [];
|
}
|
|
async payInvoice(invoiceId) {
|
const session = await fetch(this.config.api_url + 'initialize-checkout', {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': this.config.nonce,
|
},
|
body: JSON.stringify({
|
invoice_id: invoiceId,
|
}),
|
}).then(r => r.json());
|
|
if (!session.success) {
|
throw new Error(session.message || 'Failed to initialize invoice payment');
|
}
|
|
this.pendingSecretToken = session.secretToken;
|
this.pendingOrderData = { total: 0, items: [], customer: {} };
|
|
window.appendHelcimPayIframe(session.checkoutToken, { type: 'modal' });
|
|
return new Promise((resolve, reject) => {
|
this._paymentResolve = resolve;
|
this._paymentReject = reject;
|
});
|
}
|
}
|
|
document.addEventListener('DOMContentLoaded', () => {
|
// Only init if Helcim is the active provider
|
const form = document.querySelector('#checkout[data-provider="helcim"]');
|
if (form) {
|
window.jvbHelcim = new CheckoutHelcim();
|
}
|
});
|
