Back

The Paazl checkout widget and require.js

David Clapper

2020-02-20 10:03:33 UTC

This article explains how to integrate the Paazl checkout widget if you use Require.js. Require.js is a library that allows you to inject modules as dependencies. If your webshop already uses require.js for its own code libraries, you can also use it to integrate the Paazl checkout widget.

Instead of adding an initialization code snippet to the <head> section of your checkout page as shown in Integrating the Paazl checkout widget, pass the initialization code as a Require.js dependency as shown in the example below.

See Initializing the Paazl Checkout Widget for an explanation of the various parameters in the code snippet.

The parameters that you are required to assign a value are: apiKey, token, consigneeCountryCode and consigneePostalCode.

All the other parameters are optional. In the code snippet below, optional parameters have been assigned their default values.

requirejs(["myPaazlCheckoutPath"], function(PaazlCheckout) {
PaazlCheckout.init({
mountElementId: "paazl-checkout",

      apiKey: "12345",
      token: "0a9g8ddhkj883kgfs890sh7s7gg",
      loadPaazlBasedData: true,
      loadCarrierBasedData: false,
      availableTabs: ["DELIVERY", "PICKUP", "STORE"],
      defaultTab: "DELIVERY",
      style: "GREEN",
      nominatedDateEnabled: false,

      consigneeCountryCode: "NL",
      consignorCountryCode: "NL",
      consigneePostalCode: "1019HD",
      consignorPostalCode: "1020HD",

      customerNumber: 123456789,

      numberOfProcessingDays: 5,
      tags: ["CASH_ON_DELIVERY"],

      deliveryDateOptions: {
         startDate: "2018-10-25",
         numberOfDays: 5
},

      language: "eng",
      currency: "EUR",
      isPricingEnabled: true,
      isShowAsExtraCost: true,
      deliveryRangeFormat: "DATE",
      deliveryOptionDateFormat: "ddd DD MMM",
      deliveryEstimateDateFormat: "dddd DD MMMM",
      pickupOptionDateFormat: "ddd DD MMM",
      pickupEstimateDateFormat: "dddd DD MMMM",

      sortingModel: {
         orderBy: "PRICE",
         sortOrder: "ASC"
         distributor: "TNT",
},

      shipmentParameters: {
         totalWeight: 3.14,
         totalVolume: 100,
         totalPrice: 14.77,
         numberOfGoods: 2,
         startMatrix: "AA",
         goods: [
{
               quantity: 2,
               weight: 3.1,
               length: 12,
               width: 10,
               height: 88,
               volume: 1.33,
               price: 213.14
},
{
               quantity: 1,
               weight: 3.1,
               length: 12,
               width: 10,
               price: 113.14
}
]
},

shippingOptionsLimit: 3,
pickupLocationsPageLimit: 10,
pickupLocationsLimit: 20,
initialPickupLocations: 3
});
});

Note

In the code snippet above, "myPaazlCheckoutPath" should be replaced by the path to the location of paazl-checkout.js in your code libraries. Download paazl-checkout.js here.