Is it possible to add a textfield as a metafield/attribute through checkout ui extensions?

Shopify Apps

Topic summary

Issue: A developer is attempting to add a text field (VAT number) as a metafield/attribute during checkout using Shopify’s checkout UI extensions, without requiring a separate API request after order submission.

Current Status:

  • Initial code uses TextField component with useState to capture VAT number input
  • A responder suggested using useEffect hook with extensionPoint.modifyCheckout() to update checkout information when the VAT number changes

Problem Encountered:

  • Implementation resulted in a TypeError: modifyCheckout is not a function
  • Developer is running on version @Shopify_77/@shopify/checkout-ui-extensions-react@0.24.0

Unresolved Questions:

  • Correct method to access/use modifyCheckout function in this version
  • Whether the suggested approach is compatible with the current extension API version
  • Alternative methods for persisting custom field data to checkout/order without post-submission API calls

The discussion remains open with the original poster seeking clarification on the API usage error.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

For checkout ui extensions, is it possible to add a textfield as a metafield/attribute on the checkout before the order is submitted, rather than sending an API request to modify the order info?

Here is my current component:

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

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [vatNumber, setVatNumber] = useState('');

  const handleVatNumberChange = (val) => {
    setVatNumber(val)
  }

  return (
    <>
      <TextField
        label="VAT Number (Optional)"
        name="vat_number"
        value={vatNumber}
        onChange={(val) => handleVatNumberChange(val)}
      />
    </>
  );
}
2

hello there

Yes, it is possible to add a text field as a metafield/attribute on the checkout before the order is submitted using checkout UI extensions.

In your code example, you can use the useEffect hook to listen for changes to the vatNumber state and update the checkout information using the extensionPoint.modifyCheckout function.

Here’s an example implementation:

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

render('Checkout::Dynamic::Render', () => 

In this example, the `useEffect` hook listens for changes to the `vatNumber` state and updates the checkout information using the `extensionPoint.modifyCheckout` function. The new VAT number is added as an attribute on the checkout.
1 Like
3

Hi! Thank you so much for your response. I tried your code, and I got a TypeError. Am I missing something to access the modifyCheckout function?

TypeError: u.modifyCheckout is not a function

I’m running on

@Shopify_77 /checkout-ui-extensions-react@0.24.0.

Once again, thanks for your help!