Special Cases

The component automatically displays a toast notification when no delivery options are found for the provided address or location. You don't need to implement custom error handling for "no results" scenarios - the component handles this automatically with user-friendly messages.

// Initial setup
const instance = window.ddoComponent.init({
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',
    getToken: async function() {
        const response = await fetch('/api/ddo-token');
        return (await response.json()).token;
    },
    senderDetails: {
        warehouseCode: 'UK',
        wh_cc: 'GB'
    }
});

// Later, update configuration (requires re-initialization)
window.ddoComponent.destroy();
window.ddoComponent.init({
    // New configuration
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',
    getToken: async function() {
        const response = await fetch('/api/ddo-token');
        return (await response.json()).token;
    },
    senderDetails: {
        warehouseCode: 'FR', // Changed warehouse
        wh_cc: 'FR'
    }
});

The component is fully responsive and mobile-optimized out of the box. For additional mobile customization:

@media (max-width: 768px) {
    #ddo-component-container {
        padding: 0;
        margin: 0;
    }
    :root {
        --ddo-font-size-sm: 1rem; /* Prevent zoom on iOS */
    }
}

The component includes built-in accessibility features: