How to create cart_attributes that shall be used in checkout extensions and payment customization?

[ndt_ts]

Hi Guys,

I'm trying to order the payment methods and show updated content in checkout extensions, thank you extensions,
based on some data (which i will compute in my backend).

When checking the documentation, i felt i can place my computed data (basically a small json) in the cart_attributes which is accessible in both payment customization and checkout extensions.

I tried using the below snippet from my product page:

async function setCartAttributes(attributes = {}) {
    const result = await fetch("/cart/update.json", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify({
            attributes: attributes 
        })
    });
    return result.json();
}

After updating the cart_attributes, I tried to click "Buy it now" button from Product page, and i see that the cart_attributes are empty in both checkout extension and payment customization.

I also tried clicking the "Add to cart" button which shows me cart_attributes in both checkout extension and payment customization but sometimes it is also empty when clicked "Add to cart" button.

I want to know if this is how the experience of cart_attributes is ? If so this looks like a cart_attributes is not the best way for my use case. Or am i doing something wrong which needs to be corrected?

Or is there any best way to save cart_attributes so that i can use that data in both checkout extension and payment customization?

I also tried using this mutation:

mutation cartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!) {
  cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {
    cart {
        attributes
        checkoutUrl
        buyerIdentity
    }
    userErrors {
      field
      message
    }
  }
}
Variables:
{
  "attributes": [
    {
      "key": "cartK1",
      "value": "cartVal1"
    }
  ],
  "cartId":"NOT_SURE_HOW_TO_GET_CARTID"
}

But i don't know how to get cartId from my product page.

Any insights will be really helpful. Thanks in advance!