Components

// ============================================================
// COMPONENTS API - USAGE GUIDE
// ============================================================

// ============================================================
// FLOW 1: AUTO-PROCESSING (autoProcessing: true)
// Mount returns complete result
// ============================================================

// Initialize the Unified Checkout client
const client = await window.VAS.UnifiedCheckout(sessionJWT);

// Create component with auto-processing enabled
const component = client.createComponent('PANENTRY', {
    autoProcessing: true
});

// Mount - automatically processes payment and returns complete result
const paymentResult = await component.mount('#payment-container');
console.log('Payment complete:', paymentResult);

// Clean up
component.destroy();


// ============================================================
// FLOW 2: MANUAL COMPLETE (autoProcessing: false)
// Mount returns transient token, then the merchant can manually complete payment
// ============================================================

// Initialize the Unified Checkout client
const client = await window.VAS.UnifiedCheckout(sessionJWT);

// Create component with auto-processing disabled
const component = client.createComponent('PANENTRY', {
    autoProcessing: false
});

// Mount - returns transient token only
const token = await component.mount('#payment-container');
console.log('Received token:', token);

// Manually complete the payment
const paymentResult = await component.complete(token);
console.log('Payment complete:', paymentResult);

// Clean up
component.destroy();


// ============================================================
// FLOW 3: TRANSIENT TOKEN ONLY (autoProcessing: false, no complete)
// Mount returns transient token only.
// ============================================================

// Initialize the Unified Checkout client
const client = await window.VAS.UnifiedCheckout(sessionJWT);

// Create component with auto-processing disabled
const component = client.createComponent('PANENTRY', {
    autoProcessing: false
});

// Mount - returns transient token only
const token = await component.mount('#payment-container');
console.log('Received token:', token);

// Clean up
component.destroy();


// ============================================================
// LIFECYCLE METHODS (available in all flows)
// ============================================================

// Mount - display the payment form
const result = await component.mount('#payment-container');

// Unmount - hide the form without destroying it
component.unmount();

// Remount - can mount again after unmounting
await component.mount('#payment-container');

// Check mounted state
const mounted = component.isMounted();  // true or false

// Destroy - permanently destroy the component
component.destroy();

// Check destroyed state
const destroyed = component.isDestroyed();  // true or false


// ============================================================
// EVENT HANDLING (optional for all flows)
// ============================================================

// Subscribe to events
component.on('mounted', () => console.log('Form displayed'));
component.on('unmounted', () => console.log('Form hidden'));
component.on('destroyed', () => console.log('Component destroyed'));

// ============================================================
// SUPPORTED PAYMENT TYPES
// ============================================================

client.createComponent('PANENTRY');    // Manual card entry
client.createComponent('CLICKTOPAY');  // Click to Pay
client.createComponent('CHECK');       // Check payment (US & CA Only)