Use Case Examples for Delivery Options Component

The Delivery Options Component is a flexible tool that adapts to various checkout needs through simple configuration changes. Whether you are running a standard E-commerce Checkout that uses real-time parcel data, setting up Click & Collect with custom store icons, or offering Nominated Day Delivery with a calendar view, the component handles the logic seamlessly. It also allows you to simplify the user experience by combining collection points into a single category and ensures a secure setup by using backend proxies for all data transfers.

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