Display Cart Note on Checkout and Thank You Page

Shopify Apps
1

Hi,

I’m writing my first app extension (and I am a relative newbie to it all) where I am trying to display the cart note (ideally I will be adding in two, as we need the customer to in put 2 codes from their existing product) on the checkout and thank you page below the relevant product.

I got the position to work with a simple text string but now I am trying to target the attribute I am coming a bit stuck.

Any ideas, thoughts welcomed.

import {
  reactExtension,
  Text,
  useApi,
  useCartLineTarget,
} from "@shopify/ui-extensions-react/checkout";
import { useEffect, useState } from "react";

// 1. Choose an extension target
const thankYouBlock = reactExtension(
  "purchase.thank-you.cart-line-item.render-after",
  () => <Extension />
);

export { thankYouBlock };

const orderStatusBlock = reactExtension(
  "customer-account.order-status.cart-line-item.render-after",
  () => <Extension />
);

export { orderStatusBlock };

const checkoutBlock = reactExtension(
  "purchase.checkout.cart-line-item.render-after",
  () => <Extension />
);

export { checkoutBlock };

function Extension() {
  const { query } = useApi();
  const [cartAttribute, setCartAttribute] = useState<string | null>(null);

  useEffect(() => {
    async function fetchCartAttribute() {
      const result = await query<{
        cart: {
          attributes: Array<{ key: string; value: string }>;
        };
      }>(`{
        cart {
          attributes {
            key
            value
          }
        }
      }`);

      if (!result.errors) {
        const attribute = result.data.cart.attributes.find(
          (attr) => attr.key === "CartNote" // Replace with relevant attribute key
        );
        setCartAttribute(attribute ? attribute.value : null);
      } else {
        console.error(result.errors);
      }
    }

    fetchCartAttribute();
  }, []);

  if (!cartAttribute) return null;

  return (
    <Text emphasis="bold" size="small">
      {cartAttribute}
    </Text>
  );
}
2

@DzignM oh sorry for that issue checkout page customization allow only Shopify plus plan and sorry thank you not allow any customization