Checkout UI Extension not shown in development shop

[Tobia_Ochsner]

Hi!

I created a checkout UI extension as part of my Shopify app. The extension is shown in the partner dashboard. However, when I install the app in a development store, the extension is not shown in the checkout configuration editor. In the network console, there is a request to the following endpoint https://my-shop-name.myshopify.com/private_access_tokens?id=some-id&checkout_type=c1 that returns a 403 FORBIDDEN response.

My extension configuration looks as follows:

api_version = "2024-04"

[[extensions]]
name = "Fanpoints Checkout Extension"
handle = "fanid-checkout-ui"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.checkout.reductions.render-after"

[extensions.capabilities]
api_access = true

Checkout.tsx is as simple as possible:

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

export default reactExtension(
  "purchase.checkout.reductions.render-after",
  () => <Extension />,
);

function Extension() {
  return <Text>Hallo</Text>
}

Thank you in advance!

[Liam-Shopify]

Hi Tobia,

Is the store that you’re trying to install the app on a development store? Sounds like this could be a permissions error. If you try a different store, do you see the same issue?

[Dylan]

Hi @Tobia_Ochsner

Are you sure your store has the Extensions Developer Preview enabled?

Development Stores without this preview enabled cannot view or add extensions to pages.

You cannot convert a normal Development Store into an Extensions Preview either. You’ll need to start from scratch.

Here’s a guide on how to create a new development store with the Extensions preview enabled: Developer previews

[Tobia_Ochsner]

Hi Liam, hi Dylan,

Thanks for the quick response! I can confirm that it is a development store. I’ve created a new store and the behavior is the same.

I’m not sure if the extensions preview is enabled. I might be missing the obvious, but I can’t figure out how to create a development store with the extension preview enabled, even using your link. If I create a new store in the Shopify partner dashboard, I only have the options shown on the attached screenshot.

Thanks!

[Dylan]

Hi @Tobia_Ochsner

You’re very close. Thanks for sharing the screenshot.

Yes the problem is you have the Current release for the Build Version field. But Checkout Extension previews are only available in the Developer preview build version.

I annotated your screenshot to point out this specific field:

Hopefully after the migration is complete, this will become the default option, or all development stores have extensions enabled. But for now you have to be careful to choose a Developer preview development store to access Checkout UI extensions in dev mode.

[Tobia_Ochsner]

Thank you very much, now it’s working !