Address

The Address component sets the delivery location used for availability, pricing, and fulfillment options.

How it works

• Address is embedded in the Product component by default

• If a user adds to cart without an address, the SDK prompts automatically

• The address is reused across product, cart, and checkout

Standalone address component

const client = await Elements('YOUR_API_KEY', { env: 'production' });
await client.injectAddressElement('address', {
  onAddressSet: (address) => {
    console.log('Address set:', address);
  }
});

Address actions

await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');

await window.LiquidCommerce.elements.actions.address.setAddressManually(
  {
    one: '123 Main Street',
    two: 'Apt 4',
    city: 'New York',
    state: 'NY',
    zip: '10001'
  },
  { latitude: 40.7128, longitude: -74.0060 }
);

const address = window.LiquidCommerce.elements.actions.address.getDetails();
await window.LiquidCommerce.elements.actions.address.clear();

Address events (examples)

window.addEventListener('lce:actions.address_updated', (event) => {
  const { formattedAddress } = event.detail.data;
});

window.addEventListener('lce:actions.address_failed', (event) => {
  const { error } = event.detail.data;
});