Use Case Examples

E-commerce Checkout

window.ddoComponent.init({
    containerId: 'delivery-options',
    backendUrl: 'https://ddo.metapack.com',

    getToken: async function() {
        const response = await fetch('/api/checkout/ddo-token');
        return (await response.json()).token;
    },

    senderDetails: {
        warehouseCode: 'UK-MAIN',
        wh_cc: 'GB',
        wh_pc: 'SW1A 1AA'
    },

    orderInformation: {
        parcelWeight: '2.5',
        parcelHeight: '10',
        parcelWidth: '20',
        parcelDepth: '15',
        e_v: '99.99',
        e_v_currency: 'GBP'
    },
    
    onDeliveryOptionSelected: function(option) {
        // Update checkout with selected delivery option
        // Replace with your own checkout update logic
        updateCheckoutDelivery({
            method: option.fullName,
            price: option.price,
            currency: option.currency,
            deliveryDate: option.deliveryDate,
            bookingCode: option.bookingCode
        });
    }
});

Click & Collect Only

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: 'STORE-01',
        wh_cc: 'GB'
    },

    // Disable home delivery and local collection
    enableDelivery: false,
    enableLocalCollection: false,
    enableClickCollect: true,

    // Custom icon for store markers
    ownStoreIconPath: '/images/store-marker.png',

    onDeliveryOptionSelected: function(option) {
        console.log('Customer will collect from:', option.storeName);
    }
});

Combined Collection Options

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'
    },

    // Combine PUDO and OWNSTORE into single "Collection" option
    combineCollectionOptions: true,

    // Disable home delivery
    enableDelivery: false
});

Nominated Day Delivery

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'
    },

    // Specify which service group should show calendar
    calendarGroupCode: 'NOMINATED',

    // Only show home delivery
    enableClickCollect: false,
    enableLocalCollection: false
});