1. Metapack
  2. Checkout
  3. Delivery Options
  4. Delivery Options Component (JavaScript)

Troubleshoot the Delivery Options Component

Component Not Appearing

Check:

  1. Container element exists: document.getElementById('ddo-component-container')
  2. Script loaded: typeof window.ddoComponent !== 'undefined'
  3. No console errors
  4. getToken function returns a valid token

  5. Debug

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

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

No Delivery Options Returned

Check:

  1. Warehouse details are correct
  2. getToken returns a valid authentication
  3. Network requests succeed (Check network tab for API calls and responses in browser DevTools)
  4. Filtering parameters aren't too restrictive

Authentication Errors

Check:

  1. Backend token endpoint is accessible
  2. Token has correct structure: { idToken: '...' }
  3. Token hasn't expired
  4. CORS is configured correctly

  5. 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();

Styling Issues

Check:

  1. CSS variables are defined
  2. No conflicting styles from other CSS
  3. The container has sufficient space

  4. Debug the container

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

Support

For issues or questions:

  1. Check the browser console for errors.
  2. Verify that all required parameters are provided.
  3. Test the token endpoint separately.
  4. Contact Metapack Delivery Options support team.