Skip to main content

Example configurations for the embedded UI

You can create many different types of DGW configurations, depending on what your webshop and ordering process needs. Check out our example configurations to familiarize yourself with the available options.

Render a delivery method selector with custom email validation​

Set up a function that checks if an email is valid and another that manages addresses:

function isEmailValid(email) {
// Merchant custom email validation.
return true;
}

function handleAddress(address) {
// Display, save, etc. the selected address.
}

Mount a DGW instance:

  • In containerID, add the ID of the HTML element containing the instance.
  • Set the merchantID: you can find it in the Merchant menu of the Delivery Gateway admin interface. With this, the web plugin will automatically obtain the session ID for your instance.
  • In the viewobject, set type to delivery-method-selection.
  • Set openSelectedMethodInModal to true to open the pickup point selector and address selector components in a modal window.
  • Set operatorsAsSeparateMethods to true to render all pickup point providers as separate checkboxes.
const instance = DGW.mount({
    containerId: "delivery-gateway",
    merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    view: {
        type: "delivery-method-selection",
        openSelectedMethodInModal: true,
        operatorsAsSeparateMethods: true,
    },
});

Set up email validation within the instance using the previously created functions and the onAddressSelected and recipientproperties:

const instance = DGW.mount({
    [...]
    onAddressSelected: (result) => {
        if (!isEmailValid(result.recipient.email)) {
            return Promise.resolve({
                isValid: false,
                errors: {
                email: "Oops, your email address does not appear to be valid!",
                },
            });
        }

    handleAddress(result);
    },
    recipient: {
        email: "account@domain.tld",
    },
});

Unmount the session if the user cancels the process.

const instance = DGW.mount({
    [...]
    });

cancelButton.onclick = () => {
instance.unmount();
}

Your full configuration could look something like this:

function isEmailValid(email) {
   // Merchant custom email validation.

   return true;
}

function handleAddress(address) {
   // Display, save etc. the selected address.
}

const instance = DGW.mount({
   containerId: "delivery-gateway",
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   view: {
      type: "delivery-method-selection",
      openSelectedMethodInModal: true,
      operatorsAsSeparateMethods: true,
   },
   onAddressSelected: (result) => {
      if (!isEmailValid(result.recipient.email)) {
         return Promise.resolve({
            isValid: false,
            errors: {
               email: "Oops, your email address does not appear to be valid!",
            },
         });
      }

      handleAddress(result);
   },
   recipient: {
      email: "account@domain.tld",
   },
});

cancelButton.onclick = () => {
   instance.unmount();
}

Open a pickup point selection modal in response to a button click​

Mount a DGW instance with the following basic properties:

  • merchantId: Get the merchant ID from the Delivery Gateway admin interface. With this, the web plugin will automatically obtain the session ID for your instance.
  • container: Add the HTML element that will contain your instance. In the example, we're using document.getElementById to return the HTML element we need.
window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
});

In the view property, add the following fields:

  • type: "pickup-point-selection": Adds the pickup point selector to the view.
  • openInModal: true: The pickup point selector modal will open immediately.
  • hideMainLoadingIndicator: true: Hides the main loading indicator.
  • ownShopFilterSelected: true: The filter for your own shops will be selected by default.
  • selectedOperatorFilters: ["Operator1", "Operator2", "Operator3"]: These operators will be selected in the operator filter panel by default.
window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
      openInModal: true,
      hideMainLoadingIndicator: true,
      ownShopFilterSelected: true,
      selectedOperatorFilters: ["Operator1", "Operator2", "Operator3"],
   },
});

Create a function that handles customer addresses called handleAddress. Add the onAddressSelected: handleAddress callback. It is called when the user has selected a pickup point.

function handleAddress(address) {
    // Display, save etc. the selected address.
}

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
      openInModal: true,
      hideMainLoadingIndicator: true,
      ownShopFilterSelected: true,
      selectedOperatorFilters: ["Operator1", "Operator2", "Operator3"],
   },
   onAddressSelected: handleAddress
});

Integrate an address selector to a profile page​

Create and call a function that mounts an instance with the address selector.

function mountAddressSelector(DGW) {
   DGW.mount({
      containerId: "address-selector",
      merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      view: {
         type: "profile-page-addresses",
      },
   });
}

if (window.DGW) {
   mountAddressSelector(window.DGW);
} else {
   window.DGWOnLoad = mountAddressSelector;
}