Button

// ============================================================
// BUTTON API - USAGE GUIDE
// ============================================================

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

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

// Create button with auto-processing enabled
const button = client.createButton('GOOGLEPAY', {
    autoProcessing: true
});

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

// Clean up
button.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 button with auto-processing disabled
const button = client.createButton('GOOGLEPAY', {
    autoProcessing: false
});

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

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

// Clean up
button.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 button with auto-processing disabled
const button = client.createButton('GOOGLEPAY', {
    autoProcessing: false
});

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

// Clean up
button.destroy();


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

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

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

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

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

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

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


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

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


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

client.createButton('GOOGLEPAY');  // Google Pay
client.createButton('APPLEPAY');   // Apple Pay