Best Practices for Delivery Options Component

This Best Practices guide outlines essential development standards for implementing the Delivery Options Component. They focus on security, performance, and data accuracy. The following list helps you to ensure a secure and efficient implementation of the Delivery Options Component:

Secure Token Handling: Always use a backend proxy for token retrieval; never hardcode credentials in the frontend.
Resilient Error Logic: Implement try-catch blocks during initialization and option selection to provide user-friendly error feedback.
Lifecycle Management: Initialize the component on DOMContentLoaded and use the .destroy() method to clean up resources when they are no longer needed.
Accurate Geolocation: Supply comprehensive sender details, including postcodes and cities, to ensure the best delivery option results.
Flexible Localization: Leverage auto-detection for user languages or explicitly set locales for specific target markets.

Token Management

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
    };
}

Error Handling

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');
        }
    }
});

Performance

// ✅ 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();
    }
}

Warehouse Configuration

// ✅ 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'
}

Localization

// ✅ 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
    // ...
});