Create a pickup point selector

When a customer selects pickup point delivery, they need to select an exact location. Configure the pickup point selector on the Delivery Gateway embedded UI with the view field of DGW.mount(opts):

As always, you need to define the container element and pass either the merchant ID or a session ID to the DGW instance.
Set the type property of view to pickup-point-selection.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
   },
});

You can configure the pickup point selector to always open in a modal: set openInModal to true. For example, you can use this setting to open a pickup point selection modal in response to a button click.

tip

We recommend setting hideMainLoadingIndicator to true as well: this hides the main loading indicator normally visible during initialization and after a pickup point has been selected.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
      openInModal: true,
      hideMainLoadingIndicator: true,
   },
});

You can filter for operators with selectedOperatorFilters: it takes an array of operator names which you can find on the Admin Dashboard. The map on the selector will only show the locations of the operators in the array.

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

For all available properties of the opts object, check DGW.mount(opts).

Complete example

You can copy this full HTML example into your own page:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://api.deliverygateway.io/sdk/en.js"></script>

   <style>
      body,
      html {
         height: 100%;
         margin: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 16px;
         background-color: #f8f9fa;
         font-family: sans-serif;
      }

      #pickupPointButton {
         padding: 15px 30px;
         font-size: 18px;
         font-weight: bold;
         color: white;
         background-color: #007bff;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         transition: background-color 0.3s ease;
      }

      #dgw-selected {
         width: 60%;
         max-width: 960px;
         height: 400px;
         overflow: auto;
         display: none;
         box-sizing: border-box;
         padding: 16px;
         border: 1px solid #d0d7de;
         border-radius: 10px;
         background-color: #0f172a;
         color: #e2e8f0;
         font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
         font-size: 14px;
         line-height: 1.5;
         white-space: pre-wrap;
         word-break: break-word;
         box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
      }

      #dgw-selected.visible {
         display: block;
      }

      @media (max-width: 768px) {
         #dgw-selected {
            width: 95%;
         }
      }
   </style>
</head>

<body>
   <button id="pickupPointButton">Open Pickup Point Selector</button>
   <div id="dgw-container"></div>
   <div id="dgw-selected"></div>

   <script>
      const MY_MERCHANT_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
      const pickupPointButton = document.getElementById("pickupPointButton");
      const selectedContainer = document.getElementById("dgw-selected");

      document.addEventListener("DOMContentLoaded", () => {
         window.DGW.preloadSession({
            merchantId: MY_MERCHANT_ID,
         });
      });

      pickupPointButton.onclick = () => {
         window.DGW.mount({
            merchantId: MY_MERCHANT_ID,
            containerId: "dgw-container",
            view: {
               type: "pickup-point-selection",
               openInModal: true,
               hideMainLoadingIndicator: true,
               disableShadowDOM: true,
               customPickupPointAsSeparateMethod: true,
            },
            onAddressSelected: (result) => {
               selectedContainer.textContent = JSON.stringify(result, null, 2);
               selectedContainer.classList.add("visible");
            }
         });
      };
   </script>
</body>

</html>

Try it now

You can try the same example directly on this page:

Loading interactive demo...

Complete example​

Try it now​

Complete example

Try it now