Checkout UI Function access the Checkout UI Extension Custom Setting Field

Retired Boards Appdev Extensions

Topic summary

Goal: access a Checkout UI Extension’s custom setting value from a Shopify Function in the same repo.

Update/solution: Instead of reading the setting directly in the Function, the value is written to a cart attribute from the UI extension, then read by the Function via GraphQL.

How it works:

  • In the Checkout UI Extension, use applyAttributeChange to set a cart attribute (e.g., key “fooBar”) with the desired value derived from the extension’s settings/useSettings().
  • In the Function’s run.graphql, query cart.attribute(key: “fooBar”) to retrieve that value alongside other inputs.

Code highlights:

  • UI: applyAttributeChange({ type: “updateAttribute”, key: “fooBar”, value: valueFromSomewhere }).
  • Function (RunInput): query cart { attribute(key: “fooBar”) { value } } plus any other needed fields (e.g., cost, paymentMethods).

Status: Resolved. The thread includes a reference link to a related solution. No remaining open questions were noted.

Summarized with AI on December 23. AI used: gpt-5.
1

Hi Everyone,

I’m not sure if this question has been asked before but I’m having a hard time finding a proper resource/tutorial on how to do this. I have a single repo with both Extension UI and Function inside, I created a custom setting field under my Extension UI. I can retrieve it within Extension UI via useSettings() hook so no issue there, what I want to do is access that same setting within my Function (is this possible?). I understand that inside my Function I needed to Query the data I need (via the provided run.graphql file). Maybe someone can direct me to a proper way of achieving this. Thanks!

2

Found the solution here. Sharing this for anyone having the same concern. Here’s my code summary if you’re wondering.

Extension UI

useEffect(() => {
    const func = async() => {
      const result = await applyAttributeChange({
        type: "updateAttribute",
        key: "fooBar",
        value: `${valueFromSomewhere}`,
      });
      console.log('applyAttributeChange result', result);
    }
    func();
}, [applyAttributeChange, min]);

Function’s run.graphql

query RunInput {
  cart {
    cost {
      totalAmount {
        amount
      }
    }
    attribute(key: "fooBar") {
      value
    }
  }
  paymentMethods {
    id
    name
  }
}