How to send & get attributes from cart in Checkout UI Extension

Shopify Apps

Topic summary

The discussion centers on accessing and displaying cart attributes within Shopify Checkout UI Extensions. The original poster wants to capture hidden form inputs from the add-to-cart process (such as subscription details, dates, and pricing) and display them in a checkout banner.

Key Question:
How to pass custom data from the storefront cart to a Checkout UI Extension and retrieve it for display.

Solution Provided:
One user shared a working implementation:

  • On the storefront: Use /cart/update.js endpoint with a POST request to add custom attributes to the cart (prefixed with underscore, e.g., _myCustomAttribute)
  • In the Checkout Extension: Access these attributes via the useApi() hook by filtering attributes.current array for the specific key

Status:
Multiple users expressed interest in this functionality, suggesting it’s a common need when migrating to checkout extensibility. The thread includes working code examples in both JavaScript and the fetch API approach for cart updates.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I’m working on the creation of a checkout UI Shopify extension, to show a banner that displays information of some hidden inputs that we add on the add/cart form.

Is it possible to send information to the shopping cart from the storefront, and then be able to consume it in a checkout UI app to display it in a Banner?

I noticed that by using the useApi() Hook I can get some information on the checkout and cart line items, could I get the information that Shopify sent from the add/cart in this same hook?

Or how can I do this on the Checkout UI App Extension?

Payload from add/cart

_subscription_filter_selection: #######123###### _subscription_filter_interval: 15###### _subscription_available_intervals: 6,9,12,15###### _subscription_available_unit: month###### _subscription_filter_date: 03-13-2025###### _subscription_filter_price: $89.10###### _subscription_filter_title: Product Title###### _subscription_filter_unit: month
3 Likes
2

Hi there, I was wondering if you made any progress with your app that you were developing? We are looking for a way to display Cart attributes that are collected on the Cart page, during the Checkout process after we move to Checkout extensibility.

3

Hi, Were you able to display the cart attributes using checkout UI extension. How should we achieve that?

4

@newuser13 did you get the solution for this . i have added some cart attributes and want to show in checkout UI extension

5

This is how I’m doing it in a checkout extension (using Javascript, rather than React):

const {lines, buyerIdentity, applyCartLinesChange, attributes} = api;
const myCustomAttribute= attributes.current.filter((at) => at.key === `_myCustomAttribute`)[0];
console.log(`myCustomAttribute: `,myCustomAttribute);

In the storefront, this attribute is added when the customer clicks the checkout button using:

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

Hope that’s what you are looking for.