Skip to main content

Create address selector

You can render an address management form on the embedded UI where users can:

  • Create new addresses.
  • Edit and delete their existing addresses.

It can be used as a drop-in address management solution for user profile pages.

important

Saved addresses only work with a session created using the Merchant API.

  • 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 profile-page-addresses.
window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "profile-page-addresses",
   },
});

Use the optional onAddressSelected property to define what happens when a user selects a pickup point or an address for home delivery and their provided data needs to be validated. This property is a callback: if it returns a Promise, the Web Plugin will await it, and if the isValid field isn't set to true, it will show the recipient form again with any field error messages displayed in the corresponding recipient fields.

In this example, we're using it to validate the user's email address with a custom function called isEmailValid:

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "profile-page-addresses",
   },
    onAddressSelected: (result) => {
        if (!isEmailValid(result.recipient.email)) {
            return Promise.resolve({
                isValid: false,
                errors: {
                    email: "Oops, your email address does not appear to be valid!",
                },
            });
        }
    },
});