CORS Error on "thank you" page extension when fetch. CAN I WRITE TO METAFIELDS?

Extensions
1

I tried to get my hands dirty making some app/extension using the Checkout UI extension

I followed the “Add a survey” Add a survey to Thank you and Order status pages tutorial present on shopify as it seems more complete for me

Issue/Problem:
As it says into the tutorial too, there is the possibility to save the survey data into a DB or into metafields without explaining how or with what api, nothing at all (or i couldn’t find it…)

For the checkout there is https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/useapi()#-propertydetail-target:~:text=applyMetafieldChange that gives the possibility to create and add to an order metafield but for the checkout there is nothing like this (i believe so )

I tried to do so by creating a proxy connection and add to the handle of the submit a fetch to the proxy and handle all the metafield stuff in there. Just for testing purpose i only added a get to it but no hope

Code: present into the screenshot

  const handleSubmit = async () => {
    const shop = "mystorenamehere.myshopify.com";
    const url = `https://[RANDOM].trycloudflare.com/apps/survey?shop=${shop}`;
    try {
      const result = await fetch(url, {
        headers: {
          'Content-Type': 'application/json',
        }
      });
      const data = await result.json();
      console.log(data);
    } catch (error) {
      console.error("Error fetching invoice data:", error);
    }
  };

What I’ve tried:
Everything i know!!

I tried till now all these but no luck

https://community.shopify.com/c/technical-q-a/why-am-i-getting-a-cors-error-or-404-with-my-shopify-app-proxy/td-p/2283658

https://community.shopify.com/c/shopify-apps/encountering-a-cors-error-in-the-checkout-ui-when-making-a-fetch/m-p/2547112

GITHUB REPO for further questions :frowning:

https://github.com/Andyrei/shopify-template-extension-app-survey
2

Would following the methods described here work for you: Building metafield writes into extensions

3

I will look into it! I will try my best to not bother anyone :slight_smile: :smiley: Thank you very much for your interest into my issue :smiley:

4

No bother at all - let me know if that works though!

5

Hi! :see_no_evil:

Well it did not! :frowning:

I followed the tutorial and it worked great for the Customer Account UI.

I created the metafields when app is being installed installed and is working absolutely fine. (this gave me power to continue :joy:)

i found this shopify:customer-account/api/2024-10/graphql.json and I tried to find out what this thing is shopify:customer-account but no luck and wanted to do the same thing for thank you page but there is no such thing :frowning:

So al summed up i used this ${shop}/api/2025-01/graphql.json and it kind of worked … kind of…

Screenshot 2025-02-12 at 5.10.48 PM
Screenshot 2025-02-12 at 5.10.48 PM834×208 14.6 KB

But gave me errors on metafield creation (not thinking about adding /admin)…

Screenshot 2025-02-12 at 5.12.46 PM
Screenshot 2025-02-12 at 5.12.46 PM1196×178 37.4 KB

I ended up adding /admin to the url and came back to CORS error

image
image720×540 92.6 KB

BACK TO START

Yeah and now i am back to where i have been but with more experience than before

TL:DR:

  • Used the logic for customer account into Thank You page
  • I had no luck using it but at least i created the metafields
  • I am back from where i started as i cannot call any mutation from thank you page :frowning:

PS:
And if i simply use "shopify:admin/api/graphql.json" as i saw on some other projects on github i receive URL must be secure (HTTPS) and it does not do the call :expressionless: :slight_smile:

ExtensionInteractionError: 
Error in Restricted(DisclosureActivator(ForwardRef())) component event handler: 
Error: URL must be secure (HTTPS)

EX:

7

Did you manage to find any answer? I just created a similar question Is there any way to save data collected in the thank-you extension

8

@Andydrei I am not sure if this will help you but when I changed the [capabilities] in the .toml file to [extensions.capabilities] I was able to make a fetch call