Access to cart in API using checkout ui extension access token

[adeldev]

export const action = async ({
  request,
  params,
  context,
}: LoaderFunctionArgs) => {
  const auth = await authenticate.public.checkout(request);
  // how to access to the current cart using checkout ui access token?

  const body: Body = await request.json();

  return new Response(JSON.stringify(body), {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "authorized",
    },
  });
};

is there way to access to the cart on API using checkout UI token?? Or even storefront API if possible ?

also `await authenticate.public.checkout` doesn't seem has any information beside valid

[rajweb]

Hey @adeldev ,

Suggestion:

Update your action logic to accept the checkoutId from the extension and query Storefront API:

import { storefrontClient } from "~/lib/storefront-client"; // your custom function

export const action = async ({ request }: LoaderFunctionArgs) => {
  const auth = await authenticate.public.checkout(request);
  const body = await request.json();

  const checkoutId = body.checkoutId;

  const checkoutResponse = await storefrontClient.query({
    query: `
      query getCheckout($id: ID!) {
        checkout(id: $id) {
          id
          lineItems(first: 5) {
            edges {
              node {
                title
                quantity
              }
            }
          }
        }
      }
    `,
    variables: { id: checkoutId },
  });

  return new Response(JSON.stringify(checkoutResponse), {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
    },
  });
};

You’re right — the authenticate.public.checkout(request) method is mainly for verifying the token validity and doesn’t expose cart or checkout data directly. To access the current checkout (since cart no longer exists at this point), you’ll need to pass the checkoutId from the Checkout UI Extension to your API, then query the Storefront API using that ID. This approach ensures secure access and is compatible with Shopify’s current limitations.

If you want help implementing this properly, please feel free to reach out — happy to support!

Best Regards

Rajat

[Shopify Expert]

[adeldev]

Thanks for reply, I really appreciate it!!

The problem is I can't how to query checkout, doesn't exist in Admin API or Storefront API graphql playground

export const loader = async ({
  request,
  params,
  context,
}: LoaderFunctionArgs) => {
  const auth = await authenticate.public.appProxy(request);

   // storefront API has no checkout defination to query!!
  auth.storefront.graphql(``)
  const response = new Response(JSON.stringify({ message: true }), {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type, Authorization, authorized",
      "Access-Control-Allow-Credentials": "true",
    },
  });

  return response;
};

[rajweb]

@adeldev ,

You're right — the checkout object is not available in the current Storefront API or Admin API.

1. In your Checkout UI Extension, get the checkout.id:

const { checkout } = useExtensionApi();

2. Send it to your server via fetch():

fetch('/app-proxy-endpoint', {
  method: 'POST',
  body: JSON.stringify({ checkoutId: checkout.id }),
});

3. Use this ID for logging or metafield storage — but you can't query checkout details from server.

No server-side API lets you access checkout details.

You can only access them inside the extension.

If you want help implementing this or storing checkout data, feel free to reach out!

Thanks