Metafields are not available in the Checkout Editor for the Order Status Page

[lucasprag]

Please list the package(s) involved in the issue, and include the version you are using

    "@shopify/app": "3.50.2",
    "@shopify/checkout-ui-extensions-react": "0.27.3",
    "@shopify/cli": "3.50.2",

Describe the bug

The app metafields should be available in the Shopify Checkout Editor for the Order Status Page but they are not.

Steps to reproduce the behavior:

1. Create a simple checkout_ui_extension extension using the useAppMetafields() hook like the example below.

   
   # extensions/order-status-extension/shopify.ui.extension.toml
   type = "checkout_ui_extension"
   name = "OSP Example"

extension_points = [ 'Checkout::ThankYou::Dynamic::Render', 'Checkout::OrderStatus::Dynamic::Render', ]

[[metafields]] namespace = "example" key = "example_key"

[capabilities] network_access = true

```tsx
# extensions/order-status-extension/src/index.tsx
import {
  Text,
  render,
  useAppMetafields,
} from '@shopify/checkout-ui-extensions-react';

const App = () => {
  const metafields = useAppMetafields();
  console.log('metafields', metafields);
  return <Text>Hello 👋🏼</Text>;
};

render('Checkout::ThankYou::Dynamic::Render', () => <App />);
render('Checkout::OrderStatus::Dynamic::Render', () => <App />);

2. create a metafield in your store using the Shopify API
3. add the extension to your thank you page and your order status page
4. go thought checkout and in the console that the metafields show up in the console for both pages
5. go to the Shopify Checkout Editor, see the metafields show up in the thank you page, but not in the order status page 🐞

Expected behavior

The app metafields should be available in the Shopify Checkout Editor for the Order Status Page -- as they are for the Thank you page and during checkout fopr both pages -- but they are not available.

Screenshots

Thank you page

During checkout, working as expected:

In the checkout editor, working as expected:

Order Status Page

During checkout, working as expected:

In the checkout editor, metafields should be available but they are not 💥 :

Additional context

We used to have access to metafields in the Shopify Checkout Editor for the Order Status Page, but that just stopped working without any change on our extension. We suspect it's because of the Shopify Order Status Page update related to using the same Order Status Page for both classic and new customer accounts experiences.

[lucasprag]

I noticed there were new versions of @shopify/app and @shopify/cli so I updated it, tested again and got the same results.

    "@shopify/app": "3.51.0",
    "@shopify/checkout-ui-extensions-react": "0.27.3",
    "@shopify/cli": "3.51.0",

[alxclark]

Hi @lucasprag, thanks for the very detailed issue report! Our team has identified the issue internally with the new order-status page, and we'll look into resolving this week. Once fixed, you won't need to update any dependency on your app or extension. Apologies for the interruption.

[lucasprag]

@alxclark thank you so much 🙌🏼 We will keep an eye for it to verify the fix when it's out 🙇🏼

[lucasprag]

Hi @alxclark thank you so much for fixing this. We can confirm that this was fixed on our end 👍🏼

We did however find another problem similar to this one. I reported it in a separate issue: https://github.com/Shopify/ui-extensions/issues/1587

[rajmasha]

@alxclark I am having a similar issue. The metafields in the checkout and thank you page have data but the order status page is empty. On the Shopify checkout customizer(order status page) I see the metadfields data but on the actual order status page it does not contain anything in metafields.

I have the latest shopify app and cli versions:

"@shopify/app": "^3.52.0",
"@shopify/cli": "^3.52.0",

[alexdover]

I am experiencing the same issue as @rajmasha - I am using the hook useAppMetafields which returns what I need on the thank you page, but is then empty on the order status page. This has been the case for me since November.

[alxclark]

@rajmasha @alexdover Hi folks, apologies for the delay with the holidays. We are looking into it. Do you mind sharing the shops (or simply the plan) where you've seen this behaviour ?

Also if you can provide any additional context on how you're using metafields, like which resource the metafields are assigned to.

[alexdover]

@alxclark Hi there, thanks for responding.

I am using a developer preview store with "Checkout and Customer Accounts Extensibility" I started using this store back in April 2023 when I began development of our checkout extension. The store is al-checkout-extensions.myshopify.com

In my case, the code I am using the get the metafields looks like this:

const metaFields = useAppMetafields({
  type: 'shop',
  namespace: 'grapevine',
});

I have defined these fields in the extensions.metafields in the .toml file.

My extension renders on both the thank you page and the order status page. The behaviour I am seeing is that the metafields are returned successfully on the thank you page, but they are empty on the order status page so for the moment I have had to hardcode the values I was hoping to retrieve from metafields.

If I can provide anything further, please let me know.

Thanks!

[alxclark]

Thanks for the context @alexdover! I was able to reproduce the issue and noticed app metafields missing for some of the metafields type. I will report back once our team has a fix.

[alexdover]

@alxclark That is great, thank you for letting me know.

[yadsgroup]

hey @alxclark, any update on that issue?

[alexdover]

Hi @alxclark - I'm not sure if this is related or not, but I've been trying to use the usePurchasingCompany react hook and this always seems to return undefined, even when the order has been placed with an associated company.

[Vijendra2016]

@alexdover do you fond any solution for this i am also facing same issue . I want to show the banner when someone purchase as company but its not working import React from "react";

import { Banner, reactExtension,

usePurchasingCompany,

} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => );

export function App() {

const purchasingCompany = usePurchasingCompany();

if (purchasingCompany) { return (

Thank you for purchasing as a company!

);

} else {

return null;

}

}

[alexdover]

@Vijendra2016 sorry, I should have updated my comment.

I actually found in my case that usePurchasingCompany only worked when I was actually logged in as a customer who is associated with a company, it isn't enough to be viewing an order which was placed by a customer who is associated with an order, which is what I was doing.

[Vijendra2016]

@alexdover can you help me , i want to show a banner for b2b customer , so i used usePurchasingCompany hook , but its not workig

[lihaokx]

Hi, the original issue was about metafields on checkout editor on Order status page. I believe our team has resolved the issue. I will close this issue. Would you like to check if it is still happening. @lucasprag @alexdover

I'm not sure if this is related or not, but I've been trying to use the usePurchasingCompany

This looks like not related to the original issue. Would you like to create a separated issue for it? Thank you very much. @Vijendra2016 @alexdover

[alexdover]

Hi @lihaokx - apologies for confusing this issue, usePurchasingCompany works for me.

I have just been and tested the metafields and I am afraid that I am still not seeing the metafields on the order status page, either in the checkout editor or on the order status page itself. I can see the metafields on the thank you page though.

[lihaokx]

I have just been and tested the metafields and I am afraid that I am still not seeing the metafields on the order status page, either in the checkout editor or on the order status page itself. I can see the metafields on the thank you page though.

Hmm. It should not be. Would you like to share the following info so that we can see what happens on your extension? Thank you. @alexdover

1. your extension code on order status page
2. shopify.extension.toml
3. Ideally, a link to your dev store

[alexdover]

My entire extension code is quite large, but this is the code in question:

const metaFields = useAppMetafields({
  type: 'shop',
  namespace: 'grapevine',
});

console.log(metaFields);

In my .toml file I have this:

[[extensions.metafields]]
namespace = "grapevine"
key = "base-url"

The store I am using to test is al-checkout-extensions.myshopify.com

What I am trying to do is store a url which I can use to fetch and process data, given I have the extension on dev, staging and production stores I wanted to avoid hard-coding the url into the extension itself.

I just ran my extension in dev mode and saw this when on the thank you page:

However, when I then move to the order status page, the array is empty

When I originally built the extension last year, prior to it being launched on Shopify, this all worked...it was when the checkout extensions where launched, in November time, that this then stopped working.

If I can provide anything further, please let me know.

[lihaokx]

hi @alexdover . Sorry for the late.

On checkout editor Order status page. I am seeing your extension is not using the same namespace and key as you shown above. It is about birthday. Would you like to confirm your filter in useAppMetafields does not go beyond the namespace/key in shopify.extension.toml?

I can not see the log you mentioned above in checkout editor. I guess you the deployed extension is not the same as your local one.

Also, since your extension was created last year. Would you like to try to use the latest api version and deploy it again?

[alexdover]

Thanks for getting back to me @lihaokx - I have been using the same store to build two extensions, one of which is for another app which uses the birthday namespace.

What I will do is start again with a fresh, very basic, extension on a new store and see if I have gone wrong somewhere. I will report back.

[alexdover]

Hi @lihaokx - I've been doing some further work on this, I went back to basics and created a fresh extension and just used a metafield on the shop with the namespace foo and the key bar - with this the metafield was available on the thank you page and order status page.

I went through and updated my existing extension (which was using namespace grapevine and key base-url as shown in my early comments) and swapped to using foo:bar and it worked.

I then tried a few different combinations and I think it is the use of a hyphen in the metafield namespace or key which doesn't work on the order status page.

If I use grapevine and baseurl instead, it seems to work.

[lihaokx]

I then tried a few different combinations and I think it is the use of a hyphen in the metafield namespace or key which doesn't work on the order status page.

Thanks for you updating. @alexdover

Hmm. This is interesting. I will try to reproduce on our side. I will keep you posted.

[chienit3bk]

Have same issue, in Order status page on checkout editor, I can see all the metafields I have defined, but on real order status page, see that some metafields not work.

[lihaokx]

Hi @chienit3bk

Order status page on checkout editor, I can see all the metafields I have defined, but on real order status page, see that some metafields not work.

I think we have resolved this issue. Not sure if it is a separated issue. Would you mind to provide a link to your dev store? Ideally, more details of the code and ui.extension.toml will be appreciated. Thank you

[lynthius]

Hey, I have a similar issue. Is it possible to retrieve the value of customer type metafields within the checkout? I've attempted it, but it seems to only work with product metafields.

[lihaokx]

Hey, I have a similar issue. Is it possible to retrieve the value of customer type metafields within the checkout? I've attempted it, but it seems to only work with product metafields.

Hi @Lynthius , it seems like a separate issue. Would you like to provide more details of the issue and create a new ticket for it? Than you for your efforts.

you can retrieve these metafields on customer account UI extension(including order status page).

[lynthius]

Hey, I have a similar issue. Is it possible to retrieve the value of customer type metafields within the checkout? I've attempted it, but it seems to only work with product metafields.

Hi @Lynthius , it seems like a separate issue. Would you like to provide more details of the issue and create a new ticket for it? Than you for your efforts.

you can retrieve these metafields on customer account UI extension(including order status page).

Thanks, sure I will ;)

[andrewpye]

you can retrieve these metafields on customer account UI extension(including order status page).

@lihaokx this screenshot seems to imply that accessing shop metafields is possible in customer account extensions, but I'm finding that I'm unable to access them (despite accessing the same metafield in checkout UI extensions, and verifying via direct GraphQL calls to the storefront API that the metafield is present. I opened #1887 about this a couple of weeks ago and as yet haven't received any input on it – I wonder if it's the same issue that @Lynthius is facing, or a separate issue. Thanks in advance for your input 🙇

[lynthius]

@andrewpye you can check my issue here: #1904

[lihaokx]

Hi @andrewpye. I left a comment here.. Hopefully it will make sense to you.

For @Lynthius , the issue you are facing is a separated one on checkout, I put it on the radar of the team. They should respond to you soon. Thanks for your patience.

[kirillplatonov]

@lihaokx how we supposed to access metafields from thank you page? useAppMetafields hook is not available there and when I'm trying to access Storefront API or Customer account API I get this error (seems to be caused by network call to shopify://storefront/api/2024-04/graphql.json):

On order status page both useAppMetafields and APIs are working properly. It feels weird that these targets have different sets of APIs as they must show the same extensions to customers after purchase and code between targets will often be reused.

[jamesvidler]

@kirillplatonov the useAppMetafields hook should be available to use on thank you page targets. Can you share what target you are using and the API version?

[kirillplatonov]

I tested it again and you're right. useAppMetafields seems to be working in target purchase.thank-you.block.render. The extension seems to be loaded twice, on the first load useAppMetafields returns empty array, but on the second load we get data. Not sure if it's intentional. For now, we'll just ignore the first load when metafields are not available:

[kirillplatonov]

As for API calls. I'm testing with v2024-04. I see that examples slightly changed today in documentation: https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/storefront-api I tried new examples and they both seems to work well on Order status page (target customer-account.order-status.block.render) but fail with errors on Thank you page (target purchase.thank-you.block.render).

Queries I'm using:

const {query} = useApi();

useEffect(() => {
  query(
    `query {
      shop {
        name
      }
    }`,
  )
    .then(({data, _errors}) => console.log('query1', data))
    .catch(console.error);
}, [query]);

useEffect(() => {
  const query = {
    query: `query {
      shop {
        id
      }
    }`
  };

  const apiVersion = '2024-04';

  fetch(
    `${shop.storefrontUrl}api/${apiVersion}/graphql.json`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(query),
    },
  )
    .then((response) => response.json())
    .then(({data, _errors}) => console.log('query2', data))
    .catch(console.error);
}, [shop]);

[jamesvidler]

@kirillplatonov I was able to reproduce query2 returning an error on a target in a checkout/thank-you target:

This seems to stem from a malformed URL. It attempted an HTTP request to call https://example-shop.myshopify.comapi/2024-04/graphql.json where there is no trailing slash after the domain. As of version 2024-04 this no longer returns a trailing slash. We'll update our example code to reflect that.

Regarding your original approach using shopify://storefront/api/${apiVersion}/graphql.json, currently checkout/thank-you targets don't support the shopify:// prefix. This will be resolved very soon, likely within the next week. At that point, you should be able to use the shopify:// prefix on both targets.

[kirillplatonov]

This seems to stem from a malformed URL. It attempted an HTTP request to call https://example-shop.myshopify.comapi/2024-04/graphql.json where there is no trailing slash after the domain. As of version 2024-04 this no longer returns a trailing slash. We'll update our example code to reflect that.

I just tested it again and api.shop.storefrontUrl seems to return different values:

• on purchase.thank-you.block.render target the trailing slash is missing so API request fails

• on customer-account.order-status.block.render target the trailing slash is present to fetch example works properly

Could you please fix it?

Regarding your original approach using shopify://storefront/api/${apiVersion}/graphql.json, currently checkout/thank-you targets don't support the shopify:// prefix. This will be resolved very soon, likely within the next week. At that point, you should be able to use the shopify:// prefix on both targets.

That's great, thank you!

[jamesvidler]

@kirillplatonov, thanks! I've notified the team responsible for this. In the meantime, I would recommend checking the string to see if it ends in a trailing slash or not and handle that in your logic. This will ensure your code will be future compatible and you won't have to make changes again.