Create an address selector and profile address list
Delivery Gateway provides two views for working with home delivery addresses:
address-selectionlets users select an existing address or enter a new one as part of a delivery flow. You can render it inline or open it in a modal.profile-page-address-listis an address management view that you can embed in a user profile page. It lets users create, edit, and delete their saved addresses.
Both views require a container element and either a merchant ID or a session ID when calling DGW.mount(opts).
Create an address selector
Set the type property of view to address-selection. The optional openInModal property opens the selector in a modal, while hideMainLoadingIndicator hides the page-level loading indicator during initialization and after selection.
window.DGW.mount({
merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
containerId: "address-selector",
view: {
type: "address-selection",
openInModal: true,
hideMainLoadingIndicator: true,
},
onAddressSelected: (result) => {
console.log("Selected address:", result);
},
});
Validate the selected address
Use the optional onAddressSelected callback to validate the address and recipient data. If the callback returns a Promise, the Web Plugin waits for it. When isValid is false, the selector shows the recipient form again and displays the supplied field errors.
This example validates the user's email address with a custom isEmailValid function:
window.DGW.mount({
merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
containerId: "address-selector",
view: {
type: "address-selection",
},
onAddressSelected: (result) => {
if (!isEmailValid(result.recipient.email)) {
return Promise.resolve({
isValid: false,
errors: {
email: "Oops, your email address does not appear to be valid!",
},
});
}
return Promise.resolve({isValid: true});
},
});
Add an address list to a profile page
Set the type property of view to profile-page-address-list to embed an address management interface in a user profile page. Users can create new addresses and edit or delete their existing ones without leaving the page.
For authenticated customers, pass a session ID created using the Merchant API. This connects the view to the customer's saved addresses.
Saved addresses only work with a session created using the Merchant API. Mounting the view with only a merchant ID creates a guest session, so its addresses are not persisted for future sessions.
window.DGW.mount({
sessionId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
containerId: "profile-address-list",
view: {
type: "profile-page-address-list",
},
});
You can use callbacks such as onAddressCreated, onAddressUpdated, and onAddressDeleted to react to changes made in the profile address list.
For all available properties and callbacks of the opts object, check DGW.mount(opts).
Complete example
The following page demonstrates both views. When the page opens, it creates a temporary session through the Public API with three sample addresses. It then uses the returned session ID to open the address selector in a modal and render the profile address list inline.
The Public API does not require a Merchant Bearer token and is suitable for this browser-based demo. For persistent customer addresses in a production profile page, create the session through your backend using the Merchant API.
<!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 {
margin: 0;
background-color: #f8f9fa;
color: #0f172a;
font-family: sans-serif;
}
main {
width: min(960px, calc(100% - 32px));
margin: 0 auto;
padding: 40px 0;
}
section + section {
margin-top: 48px;
}
#addressSelectorButton {
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);
}
#addressSelectorButton:disabled {
cursor: not-allowed;
opacity: 0.65;
}
#dgw-status {
color: #475569;
font-size: 14px;
}
#dgw-status:empty {
display: none;
}
#dgw-selected {
height: 400px;
overflow: auto;
display: none;
box-sizing: border-box;
margin-top: 16px;
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;
}
</style>
</head>
<body>
<main>
<section>
<h1>Address selector</h1>
<button id="addressSelectorButton" type="button" disabled>
Open Address Selector
</button>
<div id="dgw-address-selector"></div>
<pre id="dgw-selected" aria-live="polite"></pre>
</section>
<section>
<h2>Profile page address list</h2>
<p id="dgw-status" role="status">Creating demo session...</p>
<div id="dgw-profile-address-list"></div>
</section>
</main>
<script>
const PUBLIC_API_URL = "https://api.deliverygateway.io/graphql/public";
const MY_MERCHANT_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
const addressSelectorButton = document.getElementById("addressSelectorButton");
const selectedContainer = document.getElementById("dgw-selected");
const statusContainer = document.getElementById("dgw-status");
let demoSessionId;
async function createDemoSession() {
const customerId = `docs-demo-${crypto.randomUUID()}`;
const recipient = {
firstName: "Demo",
lastName: "User",
language: "EN",
email: "demo@example.com",
phone: "+36301234567",
};
const response = await fetch(PUBLIC_API_URL, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
query: `
mutation CreateDemoSession($merchantId: ID!, $input: CreateSessionInput!) {
createSession(merchantId: $merchantId, input: $input) {
id
}
}
`,
variables: {
merchantId: MY_MERCHANT_ID,
input: {
language: "EN",
homeDelivery: {
enabled: true,
},
customer: {
referenceId: customerId,
addresses: [
{
referenceId: `${customerId}-gate`,
label: "Brandenburg Gate",
recipient,
address: {
country: "DE",
city: "Berlin",
postalCode: "10117",
addressLine1: "Pariser Platz 1.",
},
location: {
latitude: 52.5163,
longitude: 13.3777,
},
},
{
referenceId: `${customerId}-office`,
label: "Delivery Gateway HQ",
recipient,
address: {
country: "HU",
city: "Budapest",
postalCode: "1066",
addressLine1: "Nyugati tér 1-2.",
},
location: {
latitude: 47.50964892527567,
longitude: 19.05614806737222,
},
},
{
referenceId: `${customerId}-weekend-house`,
label: "Weekend house",
recipient,
address: {
country: "HU",
city: "Szeged",
postalCode: "6720",
addressLine1: "Széchenyi tér 1.",
},
location: {
latitude: 46.253,
longitude: 20.1482,
},
},
],
},
},
},
}),
});
if (!response.ok) {
throw new Error(`Failed to create demo session (${response.status}).`);
}
const result = await response.json();
if (result.errors?.length) {
throw new Error(result.errors[0].message);
}
const sessionId = result.data?.createSession?.id;
if (!sessionId) {
throw new Error("The API did not return a demo session ID.");
}
return sessionId;
}
document.addEventListener("DOMContentLoaded", async () => {
try {
demoSessionId = await createDemoSession();
await window.DGW.preloadSession({sessionId: demoSessionId});
window.DGW.mount({
sessionId: demoSessionId,
containerId: "dgw-profile-address-list",
view: {
type: "profile-page-address-list",
},
});
addressSelectorButton.disabled = false;
statusContainer.textContent = "";
} catch {
statusContainer.textContent = "Failed to initialize Delivery Gateway.";
}
});
addressSelectorButton.addEventListener("click", () => {
if (!demoSessionId) {
return;
}
window.DGW.mount({
sessionId: demoSessionId,
containerId: "dgw-address-selector",
view: {
type: "address-selection",
openInModal: true,
hideMainLoadingIndicator: true,
},
onAddressSelected: (result) => {
selectedContainer.textContent = JSON.stringify(result, null, 2);
selectedContainer.classList.add("visible");
},
});
});
</script>
</body>
</html>
Try it now
When this page opens, it creates one temporary Public API session containing three sample addresses: Home, Office, and Weekend house. Both demos below use the returned session ID, so changes made in either view apply to the same demo session.
Address selector
Open the modal selector and enter or select an address:
Loading interactive demo...
Profile page address list
Create, edit, or delete addresses in the inline profile view:
Loading interactive demo...