Troubleshooting

Container element exists: document.getElementById('ddo-component-container')

Script loaded: typeof window.ddoComponent !== 'undefined'

No console errors

getToken function returns valid token

Debug

// Debug initialization
console.log('Container:', document.getElementById('ddo-component-
container'));
console.log('Metapack Delivery Options Component:', typeof
window.ddoComponent);

window.ddoComponent.init({
    // ... configuration
});

Warehouse details are correct

getToken returns valid authentication

Network requests succeed (Check network tab for API calls and responses in browser DevTools)

Filtering parameters aren't too restrictive

Backend token endpoint is accessible

Token has correct structure: { idToken: '...' }

Token hasn't expired

CORS is configured correctly

Test Token

// Test token fetch
async function testToken() {
    try {
        const response = await fetch('/api/ddo-token');
        const data = await response.json();
        console.log('Token:', data);
        console.log('Has idToken:', !!data.token?.idToken);
    } catch (error) {
        console.error('Token test failed:', error);
    }
}
testToken();

CSS variables are defined

No conflicting styles from other CSS

Container has sufficient space

Debug Container

/* Debug container */
#ddo-component-container {
    border: 2px solid red; /* Visualize container */
    min-height: 400px;
}

Check browser console for errors.

Verify all required parameters are provided.

Test token endpoint separately.

Contact Metapack Delivery Options support team.