Initializing the Paazl Checkout widget

The id attribute of the block element in which you want to display the Paazl checkout widget.

The default value is "paazl-checkout".

Example: mountElementId: "checkout-widget"

A string containing a public API key generated in the Paazl web app. See Configuring the REST API for an explanation of how to generate this key.

Example: apiKey: "12345"

The access token returned by the token endpoint. If you assign token a value, Paazl temporarily registers session details in its database—including the session reference you gave when creating the token—in order to keep track of the choices made by webshop customers.

Example: token: "23o4587y-wsakfgh-3249-srljhtgl"

If true, Paazl returns shipping options derived from your delivery matrix.

The default value is true.

Example: loadPaazlBasedData: false

If true, and the carrier concerned supplies such data, Paazl returns shipping options obtained from the carrier itself.

The default value is false.

Example: loadCarrierBasedData: true

The widget displays shipping options in a number of tabs depending on the delivery type. The following values are available:

• "DELIVERY" (shipping options for home delivery)
• "STORE" (shipping options for click & collect stores)
• "PICKUP" (shipping options for pick-up locations)
• "PARCEL_LOCKER" (shipping options for parcel lockers)

The default is ["DELIVERY", "STORE", "PICKUP"].

Example: availableTabs: ["PICKUP", "DELIVERY"]

The name of the tab that is selected by default. The value you enter here must be one of the availableTabs values.

The default value is "DELIVERY".

Example: defaultTab: "PICKUP"

Determines whether the tabs are displayed as tabs (headerTabType: "TAB") or as buttons (headerTabType: "BUTTON").

The default value is "TAB".

Paazl has a number of predefined widget styles that you can use to match your webshop branding. The following values are available: "DEFAULT", "MINIMAL", "GREEN", "LIGHT_GREEN", "BROWN", "BLUE", "RED".

The default value is "DEFAULT", which uses Paazl's default styling.

Example: style: "BLUE"

If true, shipping options will be displayed grouped by date. If false, the list will be displayed in ascending order of price, i.e. the least expensive option will be at the top.

The default value is false.

Example: nominatedDateEnabled: true

The ISO 3166-2 code for the country the shipment is being sent to.

Example: consigneeCountryCode: "NL"

The ISO 3166-2 code for the country the shipment is being sent from.

If left empty, Paazl will use the default setting in your Paazl web app account under Settings > My address book > Sender address > Country.

Example: consignorCountryCode: "NL"

The postal code of the address the shipment is being sent to. The code is used to get a more precise list of available shipping options.

Example: consigneePostalCode: "1020HD"

The postal code of the address the shipment is being sent from. The code is used to get delivery dates from carriers if they offer this service.

If left empty, Paazl will use the default setting in your Paazl web app account under Settings > My address book > Sender address > Postal code.

Example: consignorPostalCode: "1019HD"

An individual code that DHL issues to customers so that they can identify themselves at a DHL PackStation.

Example: customerNumber: XYZ1234

The number of days a warehouse needs to get an order ready for pick-up by a carrier.

The default value is 0. However, if you have specified a value for processing days in your webshop's delivery matrix, that value will override numberOfProcessingDays.

Minimum value: 0. Maximum value: 99.

Example: numberOfProcessingDays: 5

Codes that are used to filter returned shipping options for display. Possible values include: "PARCEL_LOCKER", "SAME_DAY", "FLEX_DELIVERY", "CASH_ON_DELIVERY", "INSURANCE", "SIGNATURE_REQUIRED", "AT_NEIGHBORS", "NOT_AT_NEIGHBORS", "RETURN_ON_FAILURE", "DATE_PREFERENCE", "TWENTYFOUR_SEVEN", "NOTIFY_RECEIVER", "SUNDAY_SORTING", "AGE_CHECK", "ID_CHECK", "CLIMATE_COMPENSATION", "DANGEROUS_GOODS", "RETURN_TO_SENDER", "NO_PROOF_OF_DELIVERY", "PERISHABLE".

Example: tags: ["CASH_ON_DELIVERY", "INSURANCE"]

Contains options affecting the delivery date.

Example: deliveryDateOptions: {"startDate": "2018-08-27", "numberOfDays": 5}

The starting point of a range of possible delivery dates.

Format: "YYYY-MM-DD". The default value is today's date.

Example: startDate: "2018-08-27"

The length of time in days after startDate for which shipping options are supplied.

The default value is 7.

Example: numberOfDays: 3

The ISO 639-1 or ISO 639-2 code for the widget's display language.

The languages currently supported are: Chinese ("zh"/"zho"/"chi"), Dutch ("nl"/"nld"), English ("en"/"eng"), French ("fr"/"fra"), German ("de"/"deu"/"ger"), Italian ("it"/"ita"), Japanese ("ja"/"jpn"), Polish ("pl"/"pol"), Portuguese ("pt"/"por"), Spanish ("es"/"spa").

The default value is "eng".

Example: language: "deu"

The ISO 4217 code for the currency concerned. The parameter determines the currency icon displayed next to shipping rates.

The default code is "EUR".

Example: currency: "USD"

If false, the shipping rates of the various shipping options will not be displayed in the widget.

The default value is true.

If true, the shipping cost will be displayed as a separate amount using a "plus" symbol. If false, no "plus" symbol will be displayed.

The default value is false.

Indicates whether you want date ranges displayed on shipping option rows as a number of days or as a date range. Takes one of two values: "DATE" or "NUMBER".

The default value is "DATE".

Example: deliveryRangeFormat: "NUMBER"

The format for dates displayed in the shipping option rows of the widget's "Delivery" tab. Uses the Javascript fecha library string format.

The default value is "ddd DD MMM".

Example: deliveryOptionDateFormat: "DD-MM-YY"

The format for dates displayed in the footer of the widget's "Delivery" tab. Uses the Javascript fecha library string format.

The default value is "dddd DD MMMM".

Example: deliveryEstimateDateFormat: "dddd, MMMM DD, YYYY"

The format for dates displayed in the shipping option rows of the widget's "Pickup" tab. Uses the Javascript fecha library string format.

The default value is "ddd DD MMM".

Example: pickupOptionDateFormat: "DD-MM-YY"

The format for dates displayed in the footer of the widget's "Pickup" tab. Uses the Javascript fecha library string format.

The default value is "dddd DD MMMM".

Example: pickupEstimateDateFormat: "dddd, MMMM DD, YYYY"

Specifies whether the widget should display numbers with a period for the decimal place and a comma to separate groups of thousands (as used in the USA and UK) or vice versa. Takes one of two values: "DECIMAL_COMMA" or "DECIMAL_POINT".

The default value is "DECIMAL_COMMA".

Example: separatorsFormat: "DECIMAL_COMMA"

Contains elements that tell Paazl how to sort the shipping options and pickup locations it sends back.

Example: sortingModel: {orderBy: "PRICE", sortOrder: "DESC"}

Indicates how the displayed shipping options should be sorted. Possible values: "PRICE", "DATE", "CARRIER", "DISTANCE".

The default value for home delivery is "PRICE". The default value for pickup and store is "DISTANCE".

Indicates which carrier's shipping options should appear at the top of the shipping options list. You will find carrier codes available to you in your web app account under Settings > Account > Overview of shipping options.

Example: distributor: "SELEKTVRACHT"

Indicates the order in which shipping options should be sorted. Possible values: "ASC" or "DESC".

The default value is "ASC".

Example: sortOrder: "DESC"

Contains details of a customer's order.

Example: shipmentParameters: {totalWeight: 3.14, startMatrix: "AA", goods: [{quantity: 2, weight: 3}, {width: 1, height: 5}]}

The total weight in kilograms (kg) of a shipment, including packaging.

Example: totalWeight: 10

The total volume in cubic meters (m³) of the shipment concerned, including packaging.

Example: totalVolume: 1

The total price of a shipment. This is a scalar value. The currency unit is assigned by your webshop's checkout page.

Example: totalPrice: 100

The total number of packages or individual goods in a shipment.

Example: numberOfGoods: 8

A one- or two-letter code identifying the delivery matrix column to start with when determining the appropriate shipping option and rate. See Configuring delivery matrices for an explanation of how delivery matrices work.

An array of variables used to determine the applicable delivery matrix. See Configuring delivery matrices for an explanation of how delivery matrices work.

Example: goods: [{quantity: 2, weight: 3}, {width: 1, height: 5}]

The length in whole centimeters (cm) of a product. The value must be an integer; floating-point values will be truncated.

Example: length: 170

The width in whole centimeters (cm) of a product. The value must be an integer; floating-point values will be truncated.

Example: width: 30

The height in whole centimeters (cm) of a product. The value must be an integer; floating-point values will be truncated.

Example: height: 10

Limits the number of shipping options displayed on the widget's "Delivery" tab.

The default value is 10.

Example: shippingOptionsLimit: 3

Limits the number of pickup locations displayed on the widget's "Pickup" tab, and the number of store locations displayed on the "Store" tab.

The default value is 3.

Example: initialPickupLocations: 10

Specifies the initial number of pickup locations displayed on the widget's pickup location map, and the initial number of store locations displayed on the widget's store location map. It also determines the number of pickup or store locations that are added every time you click "More" on, respectively, the "Pickup" or "Store" tabs.

The default value is 10.

Example: pickupLocationsPageLimit: 5

Limits the total number of pickup locations displayed on the widget's "Pickup" map, and the total number of store locations displayed on the widget's "Store" map.

The default value is 20.

Example: pickupLocationsLimit: 10