Authorization Error when trying to display custom discounts in the Add to Cart and Checkout Pages

[Jpryor]

Hi There,

I’m building a Shopify app where in the Shopify Admin, the shop owner defines discounts on an item progression basis for any item the user bundles with their purchase. So, the main item is 100% priced, and then the first bundled item would be 20% off, the second 40%, the third 60% off and so on, which applies to any product they wish to bundle.

In the actual store, the bundle calculator works correctly, but when I add the items to the cart, the new prices aren’t being shown, and then in the checkout page, I get this error in my console logs.

Failed to load resource: the server responded with a status of 401 ()
https://ednav1.myshopify.com/private_access_tokens?id=58fd1cb938fe87b332217882149d6669&checkout_type=c1

I’m using Gadget on the backend and have had confirmed with the team there that all of my webhooks and APIs are registered correctly, I approved all the access requested when downloaded my app to my test store, and I filled out the customer data form in my Shopify Partners page, so I’m not sure what else to do.

Can you help me figure out when I’m getting this authorization issue and how I can resolve it? All I want to do is display those defined bundle changes

[Alan_G]

Hey @Jpryor - do you have an X-Request-ID header value that we would have included in the response from our server on hand from your logs for an example of the error you’re seeing? I can’t say for sure what’s happening quite yet, but like you said a 401 error usually indicates that the request being made is unauthorized.

If you’re able to share which API call seems to be triggering the error that would be helpful too (for example the specific mutation being run or if it’s related to an action using App Bridge in the admin, etc.)

If you’re able to share one of those request IDs I can check our logs on my end and see if we can determine what’s causing that error to pop up.

[Jpryor]

Hi Alan.- thanks for the response and sorry for the delay. I have this error log

app.DSoU3fRp.js:79

       GET https://ednav1.myshopify.com/private_access_tokens?id=58fd1cb938fe87b332217882149d6669&checkout_type=c1 net::ERR_ABORTED 401 (Unauthorized)

It seems to be that I’m not authorized to manipulate checkouts in my development store. I believe I allowed all the access required, as I allowed many, but I suppose I’m still missing something.

I’m trying to create a cart with discount codes that goes to a checkout URL with my discounts applied. Maybe this isn’t the best way though. Here is the relevant code snippet. Let me know if there is any other information that could help

const cartMutation = mutation cartCreate($cartInput: CartInput) { cartCreate(input: $cartInput) { cart { id checkoutUrl // This URL is what the customer will use to go to checkout lines(first: 10) { edges { node { id quantity merchandise { ... on ProductVariant { id } } attributes { key value } } } } discountCodes { code applicable } cost { subtotalAmount { amount currencyCode } totalAmount { amount currencyCode } totalTaxAmount { amount currencyCode } } } userErrors { field message } } };

const variables = {
cartInput: {
lines: cartItems,
discountCodes: discountCode ? [discountCode] : // Applying discount codes to the cart
}
};

// Call the Shopify API using the writeToShopify global action
const cartResult = await api.writeToShopify({
shopId,
mutation: cartMutation,
variables
});

// … [error handling code]

// Return success with cart information
await reply.send({
success: true,
cart: shopifyResult.cartCreate.cart // This contains the checkoutUrl
});

[Alan_G]

Hey again @Jpryor - thanks for sharing this. Hopefully I’m understanding correctly, but it looks like you’re making a GET call on your storefront there?

To run the cartCreate mutation, you should make a POST call on the Storefront API GraphQL endpoint like this:

https://ednav1.myshopify.com/api/2025-01/graphql.json

There’s a bit more info in our Storefront API docs here: cartCreate - Storefront API

At the moment, we don’t allow direct data manipulation on checkout objects themselves via the API, but carts can be used in a similar way to how our old “checkout” functionality worked. You should be able to have the bundles correctly defined if you’re using something like the cart transform API (more info on that here: About the Cart Transform Function API). There’s a bit more info here on the Cart API vs. the Old Checkout functionality here too: Migrate to the Storefront Cart API

If you did need to do something a bit more bespoke with the checkout experience, we do offer Checkout UI Extensions we might help as well: Checkout UI extensions

Hope this helps a bit - let me know if I’m misunderstanding anything here though, happy to keep digging into this.

[Jpryor]

Thanks Alan, I’ll check out those docs. Before I do, I just want to confirm this is something I actually can do since you mentioned some cart manipulation is restricted.

Like I said, the merchant defines what bundled discounts they want to create that would be applied to any item. So, the main item is 100% priced, and then the first bundled item would be 20% off, the second 40%, the third 60% off and so on, which applies to any product they wish to bundle.

So when the user has a four product bundle for example, those discounts should be applied to the items that get added to the cart in their designated bundle sections. So, I want the cart and/or checkout section to show the calculated discount prices just like it does in the view product page that I’m showing in this image.

Am I able to change the cart/checkout page to show the discounted prices similar to how its doing now and charge the shopper accordingly?

[Jpryor]

Hey Alan,

I’m still trying to fix this issue and wondering if you could help a little bit. I think I’m getting some sort of storefront API access issue. Shoppers define the discounts in their admin, so I reference the shop ID to then find the designated discounts. My logs indicate I’m finding the Shop ID correctly, so I’d expect it to find the discounts, but I’m seeing these errors in my logs

shop_events_listener-7e40c6290cd8fa1230e4aaf3237dddc1b481b77fa56e4b2df23c8bb8ad35e726.js:1

       POST https://edna-fork--development.gadget.app/bundle-cart 500 (Internal Server Error)

t.fetch @ shop_events_listener-7e40c6290cd8fa1230e4aaf3237dddc1b481b77fa56e4b2df23c8bb8ad35e726.js:1
P.e.fetch @ ba2bf07f9wd258a588pa9bc280fmc06997f5m.js:1
value @ web.min.js:23
await in value
fetch @ web.min.js:23
handleAddToCart @ bundle-display.js:814Understand this errorAI
bundle-display.js:867 Error adding bundle to cart: Error: Failed to get Storefront API access token
at HTMLButtonElement.handleAddToCart (bundle-display.js:828:17)

I believe I have access to manipulate checkouts, but this is all within Gadget, so maybe there’s something external I need to do.

Happy to provide more insight if needed. Hope you can help Alan!

[Jpryor]

Just wanted to submit an update and another request for help. I’m currently seeing these two errors in my console

Error adding bundle to cart: Error: Failed to get Storefront API access token
at HTMLButtonElement.handleAddToCart (bundle-display.js:828:17

POST New Gadget App Welcome Page 500 (Internal Server Error)

	t.fetch	@	shop_events_listener…3c8bb8ad35e726.js:1
	P.e.fetch	@	ba2bf07f9wd258a588pa…280fmc06997f5m.js:1
	value	@	web.min.js:23
	await in value
	fetch	@	web.min.js:23
	handleAddToCart	@	bundle-display.js:814

Does this provide any more insight into the situation? I submitted API storefront access in Gadget, so I didn’t think I’d get any more permission errors. Is there any other setup I need to do in Shopify to make this work?

[Jpryor]

No worries - I figured it out!

[Devesh_Mungali]

@Jpryor

POST New Gadget App Welcome Page 500 (Internal Server Error)

t.fetch

Hi I am using checout ui extension. And getting the this error - GET https://checkout-test-store-two.myshopify.com/private_access_tokens?id=3dfdf2e16cfc8a57c357df2d6aad5c3c&checkout_type=c1 net::ERR_ABORTED 401 (Unauthorized)

I am not using any api request in the app. In the checkout I am just displaying some cart item properties below which I am passing from product page.

code -
// extensions/installation-address-display/src/checkout.jsx
import {
reactExtension,
useCartLines,
BlockStack,
Heading,
Text,
Divider,
InlineLayout,
} from ‘@shopify/ui-extensions-react/checkout’;

const TARGET = ‘purchase.checkout.delivery-address.render-after’;

export default reactExtension(TARGET, () => {
// console.log(‘[App Extension] Rendering App component.’);
return ;
});

function App() {
// console.log(‘[App] Function component invoked.’);
const lines = useCartLines();
const installationProperties = ;

// console.log(‘[App] Cart lines:’, lines);

lines.forEach((line, lineIndex) => {
// console.log([App] Processing line ${lineIndex + 1}:, line);
line.attributes.forEach((attr, attrIndex) => {
// console.log([App] Line ${lineIndex + 1}, Attribute ${attrIndex + 1}:, attr);
if (attr.key.startsWith('_Installation ')) {
// console.log([App] Found installation attribute: Key: ${attr.key}, Value: ${attr.value});
if (!installationProperties.find(p => p.key === attr.key && p.value === attr.value)) {
installationProperties.push({ key: attr.key, value: attr.value });
// console.log([App] Added to installationProperties:, { key: attr.key, value: attr.value });
} else {
// console.log([App] Duplicate installation attribute found, not adding: Key: ${attr.key}, Value: ${attr.value});
}
}
});
});

// console.log(‘[App] Compiled installationProperties:’, installationProperties);

if (installationProperties.length === 0) {
// console.log(‘[App] No installation properties found. Rendering null.’);
return null;
}

// console.log(‘[App] Rendering Installation Address UI with properties:’, installationProperties);
return (


Installation Address

{installationProperties.map(({ key, value }, index) => {
// console.log([App] Mapping installation property ${index + 1}: Key: ${key}, Value: ${value});
return (
<InlineLayout key={${key}-${index}} columns={[‘auto’, ‘fill’]} spacing=“base”>
{key.replace(‘Installation ‘, ‘’).replace(’’, ‘’)}:
{value}

);
})}


);
}

Screenshot also attached - (Installation address)