1. Metapack
  2. Checkout
  3. Delivery Options
  4. Delivery Options Component (JavaScript)

Configure the Delivery Options Component

Core Parameters

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

Display Options

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

Feature Toggles

Parameter Type Required Default Description
enableDelivery boolean Red X mark. Unsupported feature. No. true Enable the home delivery option
enableClickCollect boolean Red X mark. Unsupported feature. No. true Enable the Click & Collect option
enableLocalCollection boolean Red X mark. Unsupported feature. No. true Enable the local collection points option
combineCollectionOptions boolean Red X mark. Unsupported feature. No. false Combine PUDO +OWNSTORE into a single "Collection" option
showCountrySelector boolean Red X mark. Unsupported feature. No. true Show country selector in collection forms

Internationalization

Parameter Type Required Default Description
userLocale string Red X mark. Unsupported feature. No. 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 Red X mark. Unsupported feature. No. ' ' Custom icon path for OWNSTORE markers on map

Advanced Options

Parameter Type Required Default Description
r_t string Red X mark. Unsupported feature. No. 'lsc' Return type: lgg, lsc, ggg, gsc
calendarGroupCode string Red X mark. Unsupported feature. No. '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 Red X mark. Unsupported feature. No. Called when a user selects a delivery option
onDeliveryOptionChange function Red X mark. Unsupported feature. No. Called when a user switches between delivery types (Home/Collection/etc.)

Sender Details Configuration

The senderDetails object of the Delivery Options Component 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

This code block provides parcel details for accurate delivery options in the Delivery Options Component:

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

This code block controls which delivery options are returned in the Delivery Options Component:

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 within the Delivery Options Component:

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

Exclusive Grouping Rule

You can only use either excgrp OR incgrp. You cannot use both elements simultaneously.

Acceptable Slots

Define time windows for collection and delivery in the Delivery Options Component:

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

Format: Separate the two ISO 8601 timestamps with a comma: (start,end).

Authentication

The Delivery Options Component requires a getToken function that returns a Promise resolving to an authentication token.

Important

Credential Security Requirement

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

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:

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