Smart Fields Testing & Demos

Testing your Smart Fields integration is a critical step before going live. The Localpayment Sandbox allows you to simulate real-world scenarios securely, helping you validate both frontend and backend flows.

Stage Environment

Utilize the sandbox environment with test API keys for your integration:

const localpayment = LP({
    clientCode: 'your_stage_client_code',
    apiKey: 'your_stage_api_key'
});

Ensure you are using the correct API Key and the Stage SDK URL in your application:

<script src="https://sdk.stage.localpayment.com/localpayment-sdk.min.js"></script>

API Keys: Generate separate API Keys for Stage and Production environments.
Domain Validation: Session initialization will fail if requests come from unregistered domains, triggering an “Invalid Source Domain” error.
Simulation Only: Sandbox transactions simulate payment flows without moving real money.

Test Card Numbers

Use the following test card numbers to simulate different payment scenarios:

Brand	Card Number	Description
Visa	4111 1111 1111 1111	Always succeeds
Mastercard	5555 5555 5555 4444	Always succeeds
Invalid Card	4242 4242 4242 4241	Fails validation
Declined	4000 0000 0000 0127	Transaction declined

Expiration Date: Use any valid future date.
CVV: Any 3-digit CVV is acceptable.
Cardholder Name: Any name is acceptable.

Error Simulation

Test error handling by simulating potential issues:

Invalid Card Number

Scenario: Use 4242424242424241.
Outcome: Triggers a change event with isValid: false.

Expired Card

Scenario: Use a past expiration date, e.g., 12/2020.
Outcome: Tokenization fails with expiration error.

Session Expiration

Scenario: Wait over 10 minutes after initializeSession()
Outcome: Tokenization fails due to session expiration.

Network Errors

Scenario: Disable internet connection temporarily.
Outcome: Tokenization fails with a network error.

Ensure your integration listens and responds to error events, offering appropriate user feedback and retry options.

Complete Test Example

Validate your integration with a complete example page:

🗒️
Run the example from localhost. Add localhost as an allowed domain for the Smart Fields API Key to avoid domain validation errors.

Example Code

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Fields SDK Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            padding: 40px 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            position: relative;
            transition: opacity 0.3s ease;
        }

        .card.disabled {
            opacity: 0.6;
            pointer-events: none;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #374151;
        }

        .field-container {
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            transition: border-color 0.2s;
            background: white;
            min-height: 46px;
        }

        .field-container:focus-within {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .field-container.error {
            border-color: #ef4444;
        }

        .field-container.valid {
            border-color: #10b981;
        }

        .field-row {
            display: flex;
            gap: 20px;
        }

        .field-row .form-group {
            flex: 1;
        }

        .button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .button:hover:not(:disabled) {
            background: #5b6fd8;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .button:disabled {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .button.secondary {
            background: #6b7280;
        }

        .button.secondary:hover:not(:disabled) {
            background: #5b6471;
        }

        .button.danger {
            background: #ef4444;
        }

        .button.danger:hover:not(:disabled) {
            background: #dc2626;
        }

        .button-group {
            display: flex;
            gap: 12px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #d1d5db;
            display: inline-block;
            margin-right: 8px;
        }

        .status-indicator.valid {
            background: #10b981;
        }

        .status-indicator.error {
            background: #ef4444;
        }

        .status-indicator.warning {
            background: #f59e0b;
        }

        .field-status {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-top: 8px;
            opacity: 0.8;
        }

        .output {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            display: none;
        }

        .output.success {
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: #166534;
        }

        .output.error {
            background: #fef2f2;
            border-color: #fecaca;
            color: #991b1b;
        }

        .output.warning {
            background: #fffbeb;
            border-color: #fed7aa;
            color: #92400e;
        }

        .output h3 {
            margin-bottom: 15px;
            font-size: 18px;
        }

        .output-data {
            font-family: 'Monaco', 'Consolas', monospace;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.05);
            padding: 15px;
            border-radius: 6px;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .demo-info {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .demo-info h3 {
            color: #1e40af;
            margin-bottom: 10px;
        }

        .test-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .test-card {
            background: white;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            cursor: pointer;
            transition: all 0.2s;
        }

        .test-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border-color: #667eea;
        }

        .test-card strong {
            display: block;
            margin-bottom: 5px;
            color: #374151;
        }

        .test-card code {
            font-size: 12px;
            color: #6b7280;
        }

        .config-section {
            background: #fefce8;
            border: 1px solid #fef08a;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .config-section h3 {
            color: #ca8a04;
            margin-bottom: 15px;
        }

        .config-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            margin-bottom: 10px;
        }

        .init-status {
            padding: 10px;
            border-radius: 6px;
            margin-top: 10px;
            display: none;
        }

        .init-status.success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
        }

        .init-status.error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
        }

        .init-status.warning {
            background: #fffbeb;
            border: 1px solid #fed7aa;
            color: #92400e;
        }

        .session-info {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            background: #f1f5f9;
            padding: 6px 12px;
            border-radius: 20px;
        }

        .session-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #d1d5db;
        }

        .session-indicator.active {
            background: #10b981;
            animation: pulse 2s infinite;
        }

        .session-indicator.expiring {
            background: #f59e0b;
        }

        .session-indicator.expired {
            background: #ef4444;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        @media (max-width: 600px) {
            .field-row {
                flex-direction: column;
                gap: 0;
            }
            
            .button-group {
                flex-direction: column;
            }

            .session-info {
                position: relative;
                top: 0;
                right: 0;
                margin-bottom: 15px;
                justify-content: center;
            }
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="header">
            <h1>Smart Fields SDK</h1>
            <p>Secure payment tokenization demo</p>
        </div>

        <div class="config-section">
            <h3>⚙️ Configuration</h3>
            <div class="form-group">
                <label class="form-label" for="client-code">Client Code</label>
                <input type="text" id="client-code" class="config-input" placeholder="Enter your client code" value="your_client_code_here">
            </div>
            <div class="form-group">
                <label class="form-label" for="api-key">API Key</label>
                <input type="text" id="api-key" class="config-input" placeholder="Enter your API key" value="your_api_key_here">
            </div>
            <button id="init-btn" class="button">Initialize SDK</button>
            <div id="init-status" class="init-status"></div>
        </div>

        <div class="demo-info">
            <h3>🔒 Security Features</h3>
            <p>This demo showcases Localpayment's secure tokenization system. Card data is collected in isolated iframes and never touches your server, ensuring PCI DSS compliance.</p>
            
            <div class="test-cards">
                <div class="test-card" id="visa-test-card">
                    <strong>Visa</strong>
                    <code>4111 1111 1111 1111</code>
                </div>
                <div class="test-card" id="mastercard-test-card">
                    <strong>Mastercard</strong>
                    <code>5555 5555 5555 4444</code>
                </div>
            </div>
        </div>

        <div id="payment-card" class="card disabled">
            <div class="session-info">
                <span class="session-indicator" id="session-indicator"></span>
                <span id="session-status">Session: Not initialized</span>
            </div>

            <h2>Payment Information</h2>
            <form id="payment-form">
                <div class="form-group">
                    <label class="form-label" for="cardholder-name">Cardholder Name</label>
                    <input type="text" id="cardholder-name" class="config-input" placeholder="Enter cardholder name" value="John Doe">
                </div>

                <div class="form-group">
                    <label class="form-label" for="card-number">Card Number</label>
                    <div id="card-number-container" class="field-container"></div>
                    <div id="card-number-status" class="field-status">
                        <span class="status-indicator"></span>
                        <span class="status-text">Enter card number</span>
                    </div>
                </div>

                <div class="field-row">
                    <div class="form-group">
                        <label class="form-label" for="cvv">CVV</label>
                        <div id="cvv-container" class="field-container"></div>
                        <div id="cvv-status" class="field-status">
                            <span class="status-indicator"></span>
                            <span class="status-text">Enter CVV</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="expiry">Expiry Date</label>
                        <div id="exp-container" class="field-container"></div>
                        <div id="exp-status" class="field-status">
                            <span class="status-indicator"></span>
                            <span class="status-text">Enter MM-YYYY</span>
                        </div>
                    </div>
                </div>

                <div class="button-group">
                    <button type="button" id="process-btn" class="button" disabled>
                        <span class="button-text">Process Payment</span>
                    </button>
                    <button type="button" id="clear-btn" class="button secondary">
                        Clear Fields
                    </button>
                    <button type="button" id="reload-btn" class="button danger" style="display: none;">
                        Restart Demo
                    </button>
                </div>
            </form>

            <div id="output" class="output">
                <h3 id="output-title">Result</h3>
                <div id="output-data" class="output-data"></div>
            </div>
        </div>
    </div>

    <!-- Load Smart Fields SDK -->
    <script src="https://sdk.stage.localpayment.com/localpayment-sdk.min.js"></script>
    <script>
        'use strict';

        // =============================================================================
        // CONFIGURATION
        // =============================================================================
        
        // Application state
        let localpayment = null;
        let cardNumber = null;
        let cvv = null;
        let expiry = null;
        let fieldsReady = { pan: false, cvv: false, expiration: false };
        let isInitialized = false;
        let sessionExpiryTimer = null;
        let sessionExpiryTime = null;

        // DOM elements
        const initBtn = document.getElementById('init-btn');
        const initStatus = document.getElementById('init-status');
        const clientCodeInput = document.getElementById('client-code');
        const apiKeyInput = document.getElementById('api-key');
        const processBtn = document.getElementById('process-btn');
        const clearBtn = document.getElementById('clear-btn');
        const reloadBtn = document.getElementById('reload-btn');
        const output = document.getElementById('output');
        const outputTitle = document.getElementById('output-title');
        const outputData = document.getElementById('output-data');
        const cardholderNameInput = document.getElementById('cardholder-name');
        const paymentCard = document.getElementById('payment-card');
        const sessionIndicator = document.getElementById('session-indicator');
        const sessionStatus = document.getElementById('session-status');
        const visaTestCard = document.getElementById('visa-test-card');
        const mastercardTestCard = document.getElementById('mastercard-test-card');

        // =============================================================================
        // INITIALIZATION FUNCTIONS
        // =============================================================================

        /**
         * Initialize the Smart Fields SDK with provided credentials
         */
        async function initializePayment() {
            try {
                // Get configuration values
                const clientCode = clientCodeInput.value.trim();
                const apiKey = apiKeyInput.value.trim();
                
                // Validate configuration
                if (!clientCode || !apiKey) {
                    throw new Error('Client code and API key are required');
                }
                
                setInitStatus('Initializing SDK...', '');
                
                // Disable initialization button during process
                initBtn.disabled = true;
                
                // Initialize Smart Fields SDK
                localpayment = LP({
                    clientCode: clientCode,
                    apiKey: apiKey
                });

                // Create session with backend
                setInitStatus('Creating session...', '');
                await localpayment.createSession();

                // Create secure fields AFTER session is ready
                setInitStatus('Creating secure fields...', '');
                cardNumber = localpayment.create('pan');
                cvv = localpayment.create('cvv');
                expiry = localpayment.create('expiration');

                // Mount fields to containers
                cardNumber.mount('#card-number-container');
                cvv.mount('#cvv-container');
                expiry.mount('#exp-container');

                // Setup field event listeners
                setupFieldListeners();
                
                // Update UI state
                isInitialized = true;
                setInitStatus('SDK initialized successfully!', 'success');
                paymentCard.classList.remove('disabled');
                
                // Update session status display
                updateSessionStatusDisplay();
                
                // Start session expiry monitoring
                startSessionExpiryMonitoring();
                
                // Setup session expiration listener
                setupSessionExpirationListener();

            } catch (error) {
                console.error('Failed to initialize Smart Fields SDK:', error);
                setInitStatus(`Initialization failed: ${error.message}`, 'error');
                isInitialized = false;
                initBtn.disabled = false;
            }
        }

        /**
         * Update the session status display
         */
        function updateSessionStatusDisplay() {
            if (!localpayment) return;
            
            const sessionData = localpayment.getSessionData();
            if (sessionData && sessionData.expiresAt) {
                sessionExpiryTime = new Date(sessionData.expiresAt);
                updateSessionStatus();
            } else {
                sessionIndicator.className = 'session-indicator active';
                sessionStatus.textContent = 'Session: Active';
            }
        }

        /**
         * Start monitoring session expiry time
         */
        function startSessionExpiryMonitoring() {
            // Clear any existing timer
            if (sessionExpiryTimer) {
                clearInterval(sessionExpiryTimer);
            }
            
            // Get session data to determine expiry
            const sessionData = localpayment.getSessionData();
            if (sessionData && sessionData.expiresAt) {
                sessionExpiryTime = new Date(sessionData.expiresAt);
                updateSessionStatus();
                
                // Update session status every minute
                sessionExpiryTimer = setInterval(updateSessionStatus, 60000);
            }
        }

        /**
         * Update the session status indicator
         */
        function updateSessionStatus() {
            if (!sessionExpiryTime) return;
            
            const now = new Date();
            const timeRemaining = sessionExpiryTime - now;
            const minutesRemaining = Math.floor(timeRemaining / 60000);
            
            if (minutesRemaining <= 0) {
                // Session has expired
                sessionIndicator.className = 'session-indicator expired';
                sessionStatus.textContent = 'Session: Expired';
                handleSessionExpiration();
            } else if (minutesRemaining <= 5) {
                // Session expiring soon
                sessionIndicator.className = 'session-indicator expiring';
                sessionStatus.textContent = `Session: Expiring in ${minutesRemaining} min`;
                showReloadButton();
            } else {
                // Session is active
                sessionIndicator.className = 'session-indicator active';
                sessionStatus.textContent = `Session: Active (${minutesRemaining} min remaining)`;
                hideReloadButton();
            }
        }

        /**
         * Setup listener for session expiration events from the SDK
         */
        function setupSessionExpirationListener() {
            // Listen for session expiration events
            window.addEventListener('message', function(event) {
                // Only accept messages from our iframe server
                if (event.origin !== 'https://secure-iframe-container.stage.localpayment.com') {
                    return;
                }

                // Handle session expiration events
                if (event.data && event.data.source === 'lp-session' && event.data.type === 'SESSION_EXPIRED') {
                    handleSessionExpiration();
                }
            });
        }

        /**
         * Handle session expiration
         */
        function handleSessionExpiration() {
            isInitialized = false;
            paymentCard.classList.add('disabled');
            processBtn.disabled = true;
            sessionIndicator.className = 'session-indicator expired';
            sessionStatus.textContent = 'Session: Expired';
            
            showOutput('Session Expired', { 
                message: 'Your session has expired. Please restart the demo to continue.',
                timestamp: new Date().toISOString()
            }, 'warning');
            
            showReloadButton();
        }

        /**
         * Show the reload button
         */
        function showReloadButton() {
            reloadBtn.style.display = 'inline-flex';
        }

        /**
         * Hide the reload button
         */
        function hideReloadButton() {
            reloadBtn.style.display = 'none';
        }

        /**
         * Reload the page to restart the demo
         */
        function reloadDemo() {
            window.location.reload();
        }

        /**
         * Update initialization status message
         */
        function setInitStatus(message, type) {
            initStatus.textContent = message;
            initStatus.style.display = 'block';
            initStatus.className = 'init-status';
            
            if (type === 'success') {
                initStatus.classList.add('success');
            } else if (type === 'error') {
                initStatus.classList.add('error');
            } else if (type === 'warning') {
                initStatus.classList.add('warning');
            }
        }

        // =============================================================================
        // TEST CARD AUTO-FILL FUNCTIONS
        // =============================================================================

        /**
         * Generate a random 3-digit CVV
         */
        function generateRandomCVV() {
            return Math.floor(100 + Math.random() * 900).toString();
        }

        /**
         * Generate a future expiration date in MM-YYYY format
         */
        function generateFutureExpiry() {
            const now = new Date();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const year = now.getFullYear() + Math.floor(Math.random() * 3) + 1; // 1-3 years in future
            return `${month}-${year}`;
        }

        /**
         * Auto-fill test card data
         */
        function autoFillTestCard(cardNumberValue, cardType) {
            if (!isInitialized) {
                showOutput('SDK Not Initialized', { 
                    error: 'Please initialize the SDK first before using test cards',
                }, 'error');
                return;
            }

            try {
                // Generate test data
                const testData = {
                    cardNumber: cardNumberValue,
                    cvv: generateRandomCVV(),
                    expiry: generateFutureExpiry()
                };
                
                // Show the test data to the user
                showOutput('Test Card Data', {
                    message: `You can use the following ${cardType} test values:`,
                    card_number: testData.cardNumber,
                    cvv: testData.cvv,
                    expiry: testData.expiry,
                    instructions: 'Please manually enter these values in the corresponding fields'
                }, 'success');
                
            } catch (error) {
                console.error('Error with test card:', error);
                showOutput('Test Card Error', { 
                    error: 'Cannot display test card information.',
                }, 'error');
            }
        }

        // =============================================================================
        // FIELD EVENT HANDLING
        // =============================================================================

        /**
         * Setup postMessage listener for iframe validation updates
         */
        function setupMessageListener() {
            window.addEventListener('message', function(event) {
                // Only accept messages from our iframe server
                if (event.origin !== 'https://secure-iframe-container.stage.localpayment.com') {
                    return;
                }

                // Handle validation updates from iframes
                if (event.data && event.data.source === 'lp-iframe-validation' && event.data.type === 'FIELD_VALIDATION_UPDATE') {
                    const { fieldType, isValid, isTokenized, message } = event.data;
                    
                    // Map fieldType to our fieldsReady keys
                    const fieldMap = {
                        'pan': 'pan',
                        'cvv': 'cvv', 
                        'expiration': 'expiration'
                    };
                    
                    const fieldKey = fieldMap[fieldType];
                    if (fieldKey) {
                        // Update field ready status based on isValid
                        fieldsReady[fieldKey] = isValid;
                        
                        // Update payment button state
                        updatePaymentButton();
                        
                        // Update field status display
                        updateFieldStatusFromIframe(fieldType, isValid, message);
                    }
                }
            });
        }

        /**
         * Setup event listeners for all payment fields
         */
        function setupFieldListeners() {
            // Card number field events
            cardNumber.on('change', (state) => {
                updateFieldStatus('card-number', state);
            });

            cardNumber.on('tokenized', (token) => {
                fieldsReady.pan = true;
                updatePaymentButton();
            });

            cardNumber.on('error', (error) => {
                fieldsReady.pan = false;
                updatePaymentButton();
                const message = (error && (error.error || (error.metadata && error.metadata.reason))) || 'Tokenization failed';
                updateFieldStatus('card-number', { isValid: false, error: message, isEmpty: false });
                showOutput('Card Number Error', { error: message, metadata: error && error.metadata }, 'error');
                console.error('Card number error:', error);
            });

            // CVV field events
            cvv.on('change', (state) => {
                updateFieldStatus('cvv', state);
            });

            cvv.on('tokenized', (token) => {
                fieldsReady.cvv = true;
                updatePaymentButton();
            });

            cvv.on('error', (error) => {
                fieldsReady.cvv = false;
                updatePaymentButton();
                const message = (error && (error.error || (error.metadata && error.metadata.reason))) || 'Tokenization failed';
                updateFieldStatus('cvv', { isValid: false, error: message, isEmpty: false });
                showOutput('CVV Error', { error: message, metadata: error && error.metadata }, 'error');
                console.error('CVV error:', error);
            });

            // Expiry field events
            expiry.on('change', (state) => {
                updateFieldStatus('exp', state);
            });

            expiry.on('tokenized', (token) => {
                fieldsReady.expiration = true;
                updatePaymentButton();
            });

            expiry.on('error', (error) => {
                fieldsReady.expiration = false;
                updatePaymentButton();
                const message = (error && (error.error || (error.metadata && error.metadata.reason))) || 'Tokenization failed';
                updateFieldStatus('exp', { isValid: false, error: message, isEmpty: false });
                showOutput('Expiry Error', { error: message, metadata: error && error.metadata }, 'error');
                console.error('Expiry error:', error);
            });
        }

        /**
         * Update the visual status of a field based on its state
         */
        function updateFieldStatus(fieldName, state) {
            const statusElement = document.getElementById(`${fieldName}-status`);
            const indicator = statusElement.querySelector('.status-indicator');
            const text = statusElement.querySelector('.status-text');
            const container = document.getElementById(`${fieldName}-container`);

            // Update container styling
            container.classList.remove('error', 'valid');
            
            if (state.error) {
                container.classList.add('error');
                indicator.className = 'status-indicator error';
                text.textContent = state.error;
            } else if (state.isValid) {
                container.classList.add('valid');
                indicator.className = 'status-indicator valid';
                text.textContent = 'Valid';
            } else if (state.isEmpty) {
                indicator.className = 'status-indicator';
                text.textContent = getPlaceholderText(fieldName);
            } else {
                indicator.className = 'status-indicator';
                text.textContent = 'Incomplete';
            }
        }

        /**
         * Update field status based on messages from iframe
         */
        function updateFieldStatusFromIframe(fieldType, isValid, message) {
            // Map iframe fieldType to our field names
            const fieldMap = {
                'pan': 'card-number',
                'cvv': 'cvv',
                'expiration': 'exp'
            };
            
            const fieldName = fieldMap[fieldType];
            if (!fieldName) return;
            
            const statusElement = document.getElementById(`${fieldName}-status`);
            const indicator = statusElement.querySelector('.status-indicator');
            const text = statusElement.querySelector('.status-text');
            const container = document.getElementById(`${fieldName}-container`);

            // Update container styling
            container.classList.remove('error', 'valid');
            
            if (isValid) {
                container.classList.add('valid');
                indicator.className = 'status-indicator valid';
                text.textContent = 'Valid';
            } else {
                container.classList.add('error');
                indicator.className = 'session-indicator error';
                text.textContent = message || 'Invalid';
            }
        }

        /**
         * Get placeholder text for a field
         */
        function getPlaceholderText(fieldName) {
            const placeholders = {
                'card-number': 'Enter card number',
                'cvv': 'Enter CVV',
                'exp': 'Enter MM-YYYY'
            };
            return placeholders[fieldName] || 'Enter value';
        }

        /**
         * Update the payment button state based on field readiness
         */
        function updatePaymentButton() {
            const allReady = Object.values(fieldsReady).every(ready => ready);
            processBtn.disabled = !allReady || !isInitialized;
        }

        // =============================================================================
        // PAYMENT PROCESSING
        // =============================================================================

        /**
         * Process the payment by consolidating tokens
         */
        async function processPayment() {
            try {
                // Validate SDK is initialized
                if (!isInitialized) {
                    throw new Error('SDK is not initialized. Please configure and initialize first.');
                }
                
                setButtonLoading(processBtn, true);
                hideOutput();

                // Get cardholder name from input
                const cardholderName = cardholderNameInput.value.trim();
                if (!cardholderName) {
                    throw new Error('Cardholder name is required');
                }
                
                // Get session data from SDK
                const sessionData = localpayment.getSessionData();
                const { sessionId, accessToken, clientCode } = sessionData;
                
                if (!sessionId || !accessToken) {
                    throw new Error('No active session available. Please restart the demo.');
                }

                // Call backend to consolidate tokens
                const response = await fetch('https://tokenization.api.stage.localpayment.com/api/tokenization/consolidate', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${accessToken}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        clientCode: clientCode,
                        sessionId: sessionId,
                        CardholderName: cardholderName
                    })
                });

                if (!response.ok) {
                    // Check if it's a session expiration error
                    if (response.status === 401 || response.status === 403) {
                        handleSessionExpiration();
                        throw new Error('Session expired during payment processing');
                    }
                    
                    const errorData = await response.json().catch(() => ({}));
                    throw new Error(`Consolidation failed: ${response.status} ${response.statusText} - ${errorData.message || 'Unknown error'}`);
                }

                const consolidationResult = await response.json();

                showOutput('Payment Token Created', {
                    status: 'SUCCESS',
                    message: 'Card tokens consolidated successfully',
                    cardholder_name: cardholderName,
                    timestamp: new Date().toISOString(),
                    response: consolidationResult
                }, 'success');

                // After successful payment, show reload button
                showReloadButton();

            } catch (error) {
                showOutput('Payment Failed', { 
                    error: error.message,
                    status: error.status || 'UNKNOWN',
                    timestamp: new Date().toISOString()
                }, 'error');
            } finally {
                setButtonLoading(processBtn, false);
            }
        }

        // =============================================================================
        // UTILITY FUNCTIONS
        // =============================================================================

        /**
         * Set loading state for a button
         */
        function setButtonLoading(button, loading) {
            const text = button.querySelector('.button-text') || button;
            const spinner = button.querySelector('.spinner');

            if (loading) {
                button.classList.add('loading');
                button.disabled = true;
                if (!spinner) {
                    button.insertAdjacentHTML('afterbegin', '<div class="spinner"></div>');
                }
                text.textContent = loading === true ? 'Processing...' : loading;
            } else {
                button.classList.remove('loading');
                const spinnerElement = button.querySelector('.spinner');
                if (spinnerElement) {
                    spinnerElement.remove();
                }
                text.textContent = 'Process Payment';
                updatePaymentButton(); // Restore proper disabled state
            }
        }

        /**
         * Show output message with data
         */
        function showOutput(title, data, type = 'success') {
            outputTitle.textContent = title;
            outputData.textContent = JSON.stringify(data, null, 2);
            output.className = `output ${type}`;
            output.style.display = 'block';
            output.scrollIntoView({ behavior: 'smooth' });
        }

        /**
         * Hide the output section
         */
        function hideOutput() {
            output.style.display = 'none';
        }

        /**
         * Clear all payment fields
         */
        function clearFields() {
            if (cardNumber) cardNumber.clear();
            if (cvv) cvv.clear();
            if (expiry) expiry.clear();
            
            // Reset field states
            fieldsReady = { pan: false, cvv: false, expiration: false };
            updatePaymentButton();
            hideOutput();
            
            // Reset field status displays
            ['card-number', 'cvv', 'exp'].forEach(fieldName => {
                const container = document.getElementById(`${fieldName}-container`);
                const statusElement = document.getElementById(`${fieldName}-status`);
                const indicator = statusElement.querySelector('.status-indicator');
                const text = statusElement.querySelector('.status-text');
                
                container.classList.remove('error', 'valid');
                indicator.className = 'status-indicator';
                text.textContent = getPlaceholderText(fieldName);
            });
        }

        // =============================================================================
        // EVENT LISTENERS
        // =============================================================================

        // Initialize button click handler
        if (initBtn) {
            initBtn.addEventListener('click', initializePayment);
        }
        
        // Process payment button click handler
        if (processBtn) {
            processBtn.addEventListener('click', processPayment);
        }
        
        // Clear fields button click handler
        if (clearBtn) {
            clearBtn.addEventListener('click', clearFields);
        }

        // Reload demo button click handler
        if (reloadBtn) {
            reloadBtn.addEventListener('click', reloadDemo);
        }

        // Test card click handlers
        if (visaTestCard) {
            visaTestCard.addEventListener('click', () => {
                autoFillTestCard('4111111111111111', 'Visa');
            });
        }

        if (mastercardTestCard) {
            mastercardTestCard.addEventListener('click', () => {
                autoFillTestCard('5555555555554444', 'Mastercard');
            });
        }

        // =============================================================================
        // APPLICATION STARTUP
        // =============================================================================

        // Initialize when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            // Setup message listener for iframe communication
            setupMessageListener();
            
            console.log('Smart Fields SDK Demo loaded successfully');
        });

        // Global error handling
        window.addEventListener('error', (event) => {
            console.error('Global error:', event.error);
        });

        window.addEventListener('unhandledrejection', (event) => {
            console.error('Unhandled promise rejection:', event.reason);
        });
    </script>
  </body>
  </html>