Adding notes to order in checkout ui extension

Shopify Apps

Topic summary

Adding order notes during checkout via the Checkout UI Extension using useApplyNoteChange.

Key solution:

  • Pass an object with type: “updateNote” and note: “…” (not value). Example: applyNoteChange({ type: ‘updateNote’, note: ‘…’ }).
  • Call the function returned by useApplyNoteChange(), not the hook directly. Example: const applyNoteChange = useApplyNoteChange(); applyNoteChange({…}).

Integration details:

  • One user reports the hook works under the target “purchase.checkout.delivery-address.render-after”. Another confirmed success after switching to the returned function approach.
  • To include a date picker value, sync the picker’s state/variable into the note string so it updates when the date changes.

Open questions/uncertainties:

  • “Additional notes” support is unclear; one participant only passed dynamic data as a single note.
  • How to store the date as note_attribute remains unanswered.

Status:

  • Core issue (adding a note to the order) resolved with correct hook usage and payload shape.
  • Follow-up questions about additional notes and note attributes remain open.
Summarized with AI on December 26. AI used: gpt-5.
1

Hi,
I have been working on a task that basically is to when an order is submitted then add some notes to orders based on the logic in the extension.
I have read the docs and found that there is a hook named

useApplyNoteChange()
can we use this to add notes from checkout using the checkout ui extension? I have tried using it but it didn’t add the notes with order. below is the snippet I am using to achieve this.

if (our logic) {
setNotes({
type: "updateNote",
value:`there comes the note`,
});
}

Any help in this regard would be highly appreciated.
Thanks.

2

anybody ??

3 
if (our logic) {
setNotes({
type: "updateNote",
note:`there comes the note`,
});
}

This was resolved by setting the value to note in the object passed. A slight overlook on my side.

4

Please explain how to pass datepicker value to note in the object passed?

5

You can sync the date picker’s current value to this object via some state or variable so that whenever the date picker value changes the note object always gets the updated value of the date picker.

6

Can we pass the datepicker value as additional note ?

https://prnt.sc/Pt7raZYJnV7F

7

@analyst_1 not sure about additional notes. I passed the dynamic data as note-only using

useApplyNoteChange() hook provided.

8

Do you know how to pass date value as note_attribute ?

9

hey do you might please share the whole code , as I’m

also kind of doing same task and stuck , it would ne really helpful thanks

10

stuck with same useApplyNoteChange().

useApplyNoteChange() hook will work under “purchase.checkout.delivery-address.render-after” target. I am placing this below code directly under the React function. But it is not working. Anyone Please help on this.

useApplyNoteChange({
    type: "updateNote",
    note: "shipping note",
    });
11

Hi,

for useApplyNoteChange to work you want to use the returned function and not pass arguments to the hook directly:

const applyNoteChange = useApplyNoteChange();
applyNoteChange({type: 'updateNote', note: 'some amazing note info'})
12

Hi Got it. Thanks