Best Practices

Do:

// ✅ Use backend proxy for token
getToken: async function() {
    const response = await fetch('/api/ddo-token');
    return (await response.json()).token;
}

Do Not:

// ❌ Never expose credentials in frontend
getToken: async function() {
    return {
        idToken: 'hardcoded-token' // NEVER DO THIS
    };
}

window.ddoComponent.init({
    // ... configuration
    getToken: async function() {
        try {
            const response = await fetch('/api/ddo-token');
            if (!response.ok) {
                throw new Error('Token fetch failed');
            }
            return (await response.json()).token;
        } catch (error) {
            console.error('Delivery Options Token Error:', error);
            // Show user-friendly message (implement your own error display)
            // showErrorMessage('Unable to load delivery options. Please try again.');
            throw error;
        }
    },
    onDeliveryOptionSelected: function(option) {
        try {
            // Implement your own checkout update logic
            updateCheckout(option);
        } catch (error) {
            console.error('Delivery option error:', error);
            // Implement your own error display
            // showErrorMessage('Failed to select delivery option');
        }
    }
});

// ✅ Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    window.ddoComponent.init({
        // configuration
    });
});

// ✅ Destroy when no longer needed
function cleanupcomponent() {
    if (window.ddoComponent) {
        window.ddoComponent.destroy();
    }
}

// ✅ Provide complete warehouse details
senderDetails: {
    warehouseCode: 'UK-MAIN',
    wh_cc: 'GB',
    wh_pc: 'SW1A 1AA', // Include postcode for better results
    wh_l3: 'London' // Include city for better results
}

// ❌ Minimal details may give poor results
senderDetails: {
    warehouseCode: 'UK',
    wh_cc: 'GB'
}

// ✅ Auto-detect user language
window.ddoComponent.init({
    // userLocale not specified - will auto-detect
    // ...
});

// ✅ Or set explicitly for specific markets
window.ddoComponent.init({
    userLocale: 'de', // Force German
    // ...
});