Checkout UI extensions get ZIP address data

Shopify Plus
1

I’m working with the new Checkout UI extensions and trying to get the value(data) from the ZIP input after each keyup event or after the blur event.

I am following this official example but the problem is that api.shippingAddress is undefined at the point of opening the checkout.
This means that the function api.shippingAddress.subscribe is not working.

https://shopify.dev/docs/api/checkout-ui-extensions → JS Tab

import {
  extend,
  Banner,
} from '@shopify/checkout-ui-extensions';
extend(
  'Checkout::DeliveryAddress::RenderBefore',
  (root, api) => {
    renderApp(root, api);

    api.shippingAddress.subscribe(() =>
      renderApp(root, api),
    );
  },
);
function renderApp(root, api) {
  const {countryCode} =
    api.shippingAddress.current;

  // In case of a re-render, remove previous children.
  for (const child of root.children) {
    root.removeChild(child);
  }

  if (countryCode !== 'CA') {
    const banner = root.createComponent(
      Banner,
      {},
      'Sorry, we can only ship to Canada at this time',
    );
    root.appendChild(banner);
  }
}

Are there other ways of getting the value?

2

Here is the data in Developer Tools

Screenshot 2023-05-24 at 22.25.30.png
Screenshot 2023-05-24 at 22.25.30.png3456×2074 793 KB

3

If you encounter this error. You need to go to the settings of the extension and allow access to Shipping Address.
I found a helpful error about this after I used the React.js code example and the error was helpful.

4

Hi Solutio,
Where exactly did you allow this access?
Thanks so much,

Rhianna

5

Hi Solutio,
Actually, appears to be working now, the scope/permission changes I made yesterday must have taken a little while to come into effect :+1:
Thanks for your help!