Configuration – Metapack

Core Parameters

Parameter	Type	Default	Description
containerID	string	-	HTML element ID where component will render
backendURL	string	-	Metapack API URL (usually https://ddo.metapack.com)
getToken	function	-	Async function that returns authentication token
senderDetails	object	-	Warehouse/sender information

Display Options

Parameter	Type	Default	Description
title	string	Auto (i18n)	Component header title
showHeader	boolean	true	Show/hide header
width	string	'100%'	Component width (CSS value)
height	string	'auto'	Component height (CSS value)
customCssUrl	string	' '	Path to custom CSS file for theme overrides

Feature Toggles

Parameter	Type	Default	Description
enableDelivery	boolean	true	Enable home delivery option
enableClickCollect	boolean	true	Enable Click & Collect option
enableLocalCollection	boolean	true	Enable local collection points option
combineCollectionOptions	boolean	false	Combine PUDO +OWNSTORE into single"Collection" option
showCountrySelector	boolean	true	Show country selector incollection forms

Internationalization

Parameter	Type	Required	Default	Description
userLocale	string		Auto-detect	Language code: 'en', 'pl', 'de', 'fr'

Supported Languages:

English (en)
Polish (pl)
German (de)
French (fr)

Map Configuration

Parameter	Type	Required	Default	Description
ownStoreIconPath	string		' '	Custom icon path for OWNSTORE markers on map

Advanced Options

Parameter	Type	Required	Default	Description
r_t	string		'lsc'	Return type: 'lgg', 'lsc', 'ggg', 'gsc'
calendarGroupCode	string		'NOMINATED"	Service group code for calendar-based delivery (nominated day)

API Reference

Return Types (r_t)

Value	Description
lgg	Returns cheapest next available option for each carrier service group
lsc	Returns next available option for each carrier service
ggg	Returns cheapest option for each carrier service group for next 20 days
gsc	Returns options for each carrier service for next 20 days

Delivery Option Object

When a user selects an option, the callback receives an object with this structure:

{
    bookingCode: "ABC123", // Unique booking code
    fullName: "DHL Express Next Day", // Full service name
    carrierName: "DHL", // Carrier name
    serviceName: "Express Next Day", // Service name
    price: "15.99", // Price as string
    currency: "GBP", // Currency code
    deliveryDate: "2024-01-16", // Delivery date (ISO format)
    collectionDate: "2024-01-15", // Collection date (ISO format)
    optionType: "HOME", // Type: HOME, PUDO, OWNSTORE

    // For collection points (PUDO/OWNSTORE)
    storeName: "Store Name", // Store/point name
    storeId: "STORE123", // Store identifier
    address: "123 High Street", // Address
    city: "London", // City
    postcode: "SW1A 1AA", // Postcode
    lat: "51.5074", // Latitude
    long: "-0.1278", // Longitude

    // For nominated day delivery
    selectedNominatedDate: "2024-01-20", // User-selected date

    // Service groups
    groupCodes: ["STANDARD", "NOMINATED"] // Service group codes
}

Callbacks

Parameter	Type	Required	Description
onDeliveryOptionSelected	function		Called when user selects a delivery option
onDeliveryOptionChange	function		Called when user switches between delivery types (Home/Collection/etc.)

Sender Details Configuration

The senderDetails object contains warehouse/sender information:

senderDetails: {
    warehouseCode: 'UK', // Warehouse identifier
    wh_cc: 'GB', // Warehouse country code (ISO 3166-1
alpha-2)
    wh_pc: 'SW1A 1AA', // Warehouse postal code
    wh_l1: '123 Warehouse St', // Address line 1 (optional)
    wh_l2: 'Building A', // Address line 2 (optional)
    wh_l3: 'London', // City (optional)
    wh_l4: 'Greater London' // State/Region (optional)
]

Required Fields:

warehouseCode - Warehouse identifier
wh_cc - Country code

Optional Fields:

wh_pc - Postal code (recommended for better results)
wh_l1, wh_l2, wh_l3, wh_l4 - Address details

Order Information Configuration

Provide parcel details for accurate delivery options:

orderInformation: {
    // Dimensions
    parcelHeight: '10',                    // Height in cm or inches
    parcelWidth: '20',                     // Width in cm or inches
    parcelDepth: '15',                     // Depth in cm or inches
    parcelWeight: '2.5',                   // Weight in kg or lbs

    // Units
    dimensions_unit: 'CM',                 // 'CM' or 'IN'
    weight_unit: 'KG',                     // 'KG' or 'LB'

    // Value
    e_v: '99.99',                          // Estimated consignment value
    e_v_currency: 'GBP',                   // Currency code
 
   // Cash on Delivery
    cod_amount: '99.99',                   // COD amount
    cod_currency: 'GBP',                   // COD currency

    // Hazardous Materials
    hazmat_codes: 'UN1234,UN5678',         // Comma-separated hazmat codes

    // Estimated values
    e_w: '2.5',                            // Total weight
    e_maxdim: '25',                        // Longest dimension
    e_maxweight: '2.5',                    // Heaviest parcel

    // Other
    consignmentLevelDetailsFlag: 'false'
}

Filtering Parameters for JavaScript Delivery Options

Control which delivery options are returned:

filteringParameters: {
    limit: '10',             // Max number of options
    radius: '5000',          // Search radius in meters
    minown: '1',             // Min own stores to return
    maxown: '5',             // Max own stores to return
    minpudo: '2',            // Min PUDO points to return
    maxpudo: '10',           // Max PUDO points to return
    multiCountry: 'false'    // Enable cross-border options
}

Service Groups

Include or exclude specific service groups:

serviceGroups: {
    excgrp: 'EXPRESS,PREMIUM',     // Exclude these groups (comma-separated)
    incgrp: 'STANDARD,ECONOMY'     // Include only these groups (comma-separated)
}

Note: Use either excgrp OR incgrp, not both.

Acceptable Slots

Define time windows for collection and delivery:

acceptableSlots: {
    acceptableCollectionSlots: '2024-01-15T09:00:00Z,2024-01-15T17:00:00Z',
    acceptableDeliverySlots: '2024-01-16T09:00:00Z,2024-01-16T18:00:00Z'
}

Format: Two ISO 8601 timestamps separated by comma (start,end).

Authentication

The component requires a getToken function that returns a Promise resolving to an authentication token.

Implementation

getToken: async function() {
    try {
        const response = await fetch('https://your-backend.com/api/ddo-
token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                // Your authentication data
            })
        });
        if (!response.ok) {
            throw new Error('Failed to get token');
        }

        const data = await response.json();
        return data.token; // Return the token object
    } catch (error) {
        console.error('Token fetch error:', error);
        throw error;
    }
}

Token Structure

The token should be an object with an idToken property:

{
idToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}

Backend Implementation

Your backend should:

Receive credentials from your Metapack Delivery team contact.
Call Metapack Delivery Options authentication endpoint.
Return the token to your frontend.

Security: Never expose Metapack Delivery Options credentials in frontend code. Always use a backend proxy.