Additional field not showing up in checkout UI extensibility

Shopify Plus
1

Hi, I’m starting to migrate our customizations from checkout.liquid to checkout UI extensions. However, I’m having some difficulty adding an additional input field under the shipping address. The additional field isn’t rendering in the UI. When I use dynamic render, it appears on the top, so I know the app is connected properly. I’m using the JavaScript and React extension. Any help would be really appreciated!

Here is the code:

import React from 'react';
import {
  useExtensionApi,
  render,
  TextField,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::ShippingAddress::RenderAfter', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();

  return (
    <TextField
      label="VAT Number"
      name="vat_number"
    />
  );
}

Screenshot of the input field not rendering:

Screenshot 2023-02-15 at 2.26.21 PM.png
Screenshot 2023-02-15 at 2.26.21 PM.png2266×1422 216 KB

2

You should use the Checkout::ShippingAddress::AdditionalFields extension point instead of Checkout::ShippingAddress::RenderAfter.

import React from 'react';
import {
  useExtensionApi,
  render,
  TextField,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::ShippingAddress::AdditionalFields', () =>