Can not write metafield through custom field in checkout UI extension

Shopify Plus

Topic summary

  • Issue: Delivery instructions entered via a Checkout UI extension custom field were not writing to the order metafield, despite the UI (checkbox/textarea) rendering and an order-level metafield existing in Admin.

  • Context: Extension used metafieldNamespace “checkout-ui-extension-0817-2” and metafieldKey “deliveryInstructions”. Test orders placed showed the order metafield remained empty (screenshots provided).

  • Resolution: Renaming the metafield namespace to a shorter, hyphen-free value resolved it. Using namespace “checkout” with the same key successfully saved values to the order metafield.

  • Takeaway: The issue was caused by the metafield namespace naming; a shorter name without hyphens worked. No additional settings were needed.

  • Status: Resolved; no open questions.

  • Notes: Metafield = custom data stored on an order. Checkout UI extension = adds custom fields to Checkout.

Summarized with AI on January 21. AI used: gpt-5.
1

I followed the documentation of custom field to add a delivery instruction area, the extension works, I can see the checkbox and textarea showing on the screen when running npm run dev.

I have also added a metafield to my admin, order:

截圖 2023-08-17 下午5.00.09.png

I tried to place some orders with delivery instructions, but the metafield in orders does not receive any value:

截圖 2023-08-17 下午4.59.50.png
截圖 2023-08-17 下午4.59.50.png653×120 4.85 KB

Here is my naming in checkout UI extension

  // Define the metafield namespace and key
  const metafieldNamespace = "checkout-ui-extension-0817-2";
  const metafieldKey = "deliveryInstructions";

I don’t know if there is any extra settings I need to do, anyone can help?

Thank you very much!

2

ok, I spent hours today on this, and I’ve fixed it by:

re-naming metafieldNamespace without hyphen, and short.

(the previous version was checkout-ui-extension-0817-2)

// Define the metafield namespace and key
  const metafieldNamespace = "checkout";
  const metafieldKey = "deliveryInstructions";