CORS ERROR with Checkout UI extension when there are no API calls
I have 2 checkout UI extension configured on one app that I deployed, none of them are making any external or storefront API calls, but I still get the CORS error when I try to access it from Development Store.
It works fine when I preview it from the local using `npm run dev`
But then I deploy it using `npm run deploy`, that is when I get this error.
Also I have another Shopify function in the same app which works properly even when the dev server is closed.
I have also installed the app on another client store, irrespective of dev server being active or closed the Shopify Function works on the client store but the Checkout UI is not visible.
The 2 checkout UI extensions are:
1. gift-wrap-note
2. shipping-notice-ui
Checkout.js --> gift-wrap-note
import React, { useState, useEffect } from "react";
import {
reactExtension,
TextField,
BlockStack,
Checkbox,
useApplyAttributeChange,
useAttributes,
} from "@shopify/ui-extensions-react/checkout";
// Set the entry point for the extension
export default reactExtension(
"purchase.checkout.reductions.render-before",
() => <App />
);
function App() {
// Set up the checkbox state
const [checked, setChecked] = useState(false);
const [giftNote, setGiftNote] = useState("");
const attributes = useAttributes();
useEffect(() => {
console.log(attributes);
}, [attributes]);
// Function to parse URL parameters and set state
// const parseUrlParams = () => {
// if (typeof window !== "undefined") {
// const urlParams = new URLSearchParams(window.location.search);
// if (urlParams.has("giftWrap")) {
// // Convert "YES" to true, otherwise false
// setChecked(urlParams.get("giftWrap") == "YES" ? true : false);
// }
// if (urlParams.has("giftNote")) {
// setGiftNote(urlParams.get("giftNote"));
// }
// }
// };
console.log("================================", attributes);
const applyAttributeChange = useApplyAttributeChange();
// Define the metafield namespace and key
// const metafieldNamespace = "ma_gift_options";
// const metafieldKey = "gift_notes";
// Manage gift wrap checkbox
const handleChange = async () => {
setChecked(!checked);
const result = await applyAttributeChange({
key: "addGiftWrap",
type: "updateAttribute",
value: !checked ? "yes" : "no",
});
console.log(result);
};
// Render the extension components
return (
<BlockStack>
<Checkbox checked={checked} onChange={handleChange}>
Add Gift Wrap?
</Checkbox>
{checked && (
<TextField
label="Add Gift Note (optional)"
multiline={3}
onChange={async (value) => {
// Apply the change to the metafield
setGiftNote(value);
await applyAttributeChange({
key: "giftWrapNote",
type: "updateAttribute",
value,
});
// applyMetafieldsChange({
// type: "updateMetafield",
// namespace: metafieldNamespace,
// key: metafieldKey,
// valueType: "string",
// value,
// });
}}
value={giftNote}
/>
)}
</BlockStack>
);
}shopify.extension.toml --> gift-wrap-note
# Learn more about configuring your checkout UI extension: # https://shopify.dev/api/checkout-extensions/checkout/configuration # The version of APIs your extension will receive. Learn more: # https://shopify.dev/docs/api/usage/versioning api_version = "2024-04" [[extensions]] type = "ui_extension" name = "gift-wrap-note" handle = "gift-wrap-note" # Controls where in Shopify your extension will be injected, # and the file that contains your extension’s source code. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview [[extensions.targeting]] module = "./src/Checkout.jsx" target = "purchase.checkout.reductions.render-before" [extensions.capabilities] # Gives your extension access to directly query Shopify’s storefront API. # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access api_access = true # Gives your extension access to make external network calls, using the # JavaScript `fetch()` API. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access network_access = true block_progress = true # Loads metafields on checkout resources, including the cart, # products, customers, and more. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields # [[extensions.metafields]] # namespace = "my_namespace" # key = "my_key" # [[extensions.metafields]] # namespace = "my_namespace" # key = "my_other_key" # Defines settings that will be collected from merchants installing # your extension. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition # [extensions.settings] # [[extensions.settings.fields]] # key = "banner_title" # type = "single_line_text_field" # name = "Banner title" # description = "Enter a title for the banner"
Checkout.js --> shipping-notice-ui
import {
Banner,
useApi,
useTranslate,
reactExtension,
Text,
TextBlock,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension(
"purchase.checkout.shipping-option-list.render-after",
() => <Extension />
);
function Extension() {
const translate = useTranslate();
const { extension } = useApi();
return (
<Banner title="Shipping Notice" status="warning">
<TextBlock>{translate("first-para")}</TextBlock>
<TextBlock>{translate("second-para")}</TextBlock>
<TextBlock>{translate("third-para")}</TextBlock>
</Banner>
);
}shopify.extension.toml --> shipping-notice-ui
# Learn more about configuring your checkout UI extension: # https://shopify.dev/api/checkout-extensions/checkout/configuration # The version of APIs your extension will receive. Learn more: # https://shopify.dev/docs/api/usage/versioning api_version = "2024-04" [[extensions]] type = "ui_extension" name = "shipping-notice-ui" handle = "shipping-notice-ui" # Controls where in Shopify your extension will be injected, # and the file that contains your extension’s source code. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview [[extensions.targeting]] module = "./src/Checkout.jsx" target = "purchase.checkout.shipping-option-list.render-after" [extensions.capabilities] # Gives your extension access to directly query Shopify’s storefront API. # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access api_access = true # Gives your extension access to make external network calls, using the # JavaScript `fetch()` API. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access network_access = true block_progress = true # Loads metafields on checkout resources, including the cart, # products, customers, and more. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields # [[extensions.metafields]] # namespace = "my_namespace" # key = "my_key" # [[extensions.metafields]] # namespace = "my_namespace" # key = "my_other_key" # Defines settings that will be collected from merchants installing # your extension. Learn more: # https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition # [extensions.settings] # [[extensions.settings.fields]] # key = "banner_title" # type = "single_line_text_field" # name = "Banner title" # description = "Enter a title for the banner"
Please help me figure this out! thank you
