Passing custom attributes via Checkout

[mcnaveen]

Hey

I have a script tag which generates some random id using javascript. Something like unique id

When I console.log it shows up in the homepage, product page but it’s being stripped out in the checkout page.

I want to get this unique id in the order/paid webhook

How can I do this?

[Coding_with_Jan]

Hey my friend.

There is a concept called “cart attributes”.
You can add these using simple javascript on the storefront and they remain for the entire checkout session. (Also on order completion)

Here’s an example script, setting the attribute named “test” to “testvalue”.

await fetch('/cart/update.js', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify({
		attributes: {test:"testvalue"}
        })
      });
    });

After executing this, you can see the new attribute by visiting "your store .com/cart.js” .
(you’ll see all the cart’s json data including the new attribute)

And on the order object (api), they should be readable under order.**customAttributes.
**
Hope this is a useful starting point!

Cheers
Jan

[mcnaveen]

Hey @Coding_with_Jan

Thanks for the input. So when I checked the cart.js I do see the value.

But I don’t see them in the incoming webhooks. Or is this accessible only via API?

Thanks, MC

[Coding_with_Jan]

Can you check under the field note_attributes?

(see orders/paid sample payload down below.)

Webhooks

[mcnaveen]

Yeah, Sadly it’s just an empty array in the incoming webhook.

[Coding_with_Jan]

Okay we’re probably overlooking a small detail here, but can’t find it right now.

I’d double check 3 things:

1. will the field show up on the order_created webhook
2. If you add a normal order_note, will it show up
3. does bogus gateway interfer here (use 100% discount code to test)

Otherwise maybe someone else has a clue

Let us know what worked

Cheers

[friends2a-technology]

ChatGPT said:

Hey @mcnaveen

Your JS won’t run on checkout — Shopify blocks custom scripts there.
Instead, generate the unique ID before checkout (home, product, or cart page) and save it as a cart attribute so it automatically passes into the order and appears in your orders/paid webhook.

// run on storefront (not checkout)
const uuid = crypto.randomUUID(); // or your generator
fetch('/cart/update.js', {
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({ attributes: { session_id: uuid } })
});

Then you can access it in your webhook as:

order.attributes.session_id

If you need the ID tied to specific products, use line item properties instead.
On Shopify Plus, you can also achieve this using a Checkout UI Extension, but the cart-attribute method works on all plans.

---

You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!

[PaulNewton]

@mcnaveen

I don’t see them in the incoming webhooks. Or is this accessible only via API?

In some cases you may need to stuff the info in line-item-properties(LIPs) attached to products instead, in ajax api or form elements.
Generally only if there’s some reason if the info wont work in attributes, and you can’t react to the webhook and get the needed data through the api.
Note: prepend LIPs with underscores to hide them in the checkout processs

There’s also that without seeing your code we can’t tell if your making a submission mistake.
You should be able to see the info, for non-hidden attributes, in the order admin itself when checkout completes.
If doing this at exactly at time of checkout-submission, from the /cart page, the cart-attribute needs to be part of the cart forms data, or your js is in control of the submit event and queuing it etc etc.
If the element is outside the form use the form attribute to attach it using the cart-forms html id, or if on the PDP the products-forms html id.

[mcnaveen]

Hi @Coding_with_Jan @friends2a-technology

Thanks for your input. I ran the code before checkout and I see them reflected in the /cart.js

Can anyone confirm if I’m not getting the custom attributes in the incoming webhook because I’m testing with the Bogus payment gateway?

[PaulNewton]

Is this normal cart>checkout as I can get the note_attributes in the orders/paid topic.
using (non-exhaustive list): regular add-cart-buttons on horizon theme online-sales-channel only no storefront api, /cart/update.js js as shown in this thread, and the one page setting for checkout.

If your trying this on the PDP with accelerated payments, aka buy-buttons aka dynamic checkout buttons (yes it’s a mess of names).
Those purchase methods may be bugged by not passing attributes ; or even this is expected behavior it’s not always clear with shopify but yeah it’s big dumb.
Note this includes the cart-note also not passing with buy-buttons.
Note attributes placed on cart not being added to the order created webhook - #2 by Jon_Lowe - Products and Orders APIs - Shopify Developer Community Forums not much else on this for dev forums Search results for 'webhook order cart attributes order:latest' - Shopify Developer Community Forums

So may need to default to LIPs, which do work as form inputs.

• I haven’t checked if a different behavior can be gotten from the /cart form, and buy buttons as the accelerated-checkout buttons were not rendering on the full cart page when I tried this path and was too annoyed to continue.
• Nor have I checked for different behavior with the three-page checkout, nor anything to do with the storefront api