Use PickupLocationListApi

Retired Boards Appdev Extensions

Topic summary

Migrating from checkout.liquid/checkout.js to Checkout UI Extensions to add a date picker after pickup and after shipping option selection. Targets used: purchase.checkout.pickup-location-list.render-after and purchase.checkout.shipping-option-list.render-after (configured in shopify.extension.toml).

Initial issue: a build error (“Unexpected )”) when calling useApi<‘purchase.checkout.pickup-location-list.render-after’>() in a .jsx file. Cause: copied TypeScript generic syntax into JSX.

Update: After switching to JSX-compatible useApi() (no generics), the code compiles, but a runtime error occurs inside the component. The error appears when using useSubscription on isLocationFormVisible (from PickupLocationListApi) or on target from useApi(‘purchase.checkout.shipping-option-item.render-after’). Commenting out the useSubscription lines removes the error.

Key APIs/terms: PickupLocationListApi with isLocationFormVisible; useApi to access extension-specific APIs; useSubscription to read Subscribable values (reactive sources).

Status: Syntax issue resolved; runtime subscription issue unresolved. Open questions: correct use of useSubscription with isLocationFormVisible/target in these targets and whether the returned values are Subscribable in this context. Code snippets are central to understanding the problem.

Summarized with AI on January 20. AI used: gpt-5.
1

We are migrating our checkout.liquid and checkout.js to the new Checkout Extension. So far it’s mostly okay. I am trying to implement a date picker at two locations during checkout,

  1. after the pickup options rendered, i.e.

purchase.checkout.pickup-location-list.render-after, and

  1. after the shipping options is chosen, i.e.

purchase.checkout.shipping-option-list.render-after

However in the code when I try to use isLocationFormVisible as described in https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/pickuplocationlistapi, it’s not allowing me to use this API. The Shopify React extension complains the line (68):
const {isLocationFormVisible} =
useApi<‘purchase.checkout.pickup-location-list.render-before’>();

14:49:47 │ extensions │ ✘ [ERROR] Unexpected “)”
14:49:47 │ extensions │
14:49:47 │ extensions │ extensions/delivery-date-picker/src/Checkout.jsx:68:66:
14:49:47 │ extensions │ 68 │ useApi<‘purchase.checkout.pickup-location-list.render-after’>();
14:49:47 │ extensions │ ╵ ^
14:49:47 │ extensions │

Which is literally a copy from the document. I am not sure what I am missing. At the very beginning of the file, I have:

import {
  reactExtension,
  BlockStack,
  DateField,
  useApi,
  useApplyMetafieldsChange,
  useMetafield,
  useSubscription,
} from '@shopify/ui-extensions-react/checkout';
import { useState } from 'react';

const deliveryDateRender = reactExtension(
  'purchase.checkout.shipping-option-list.render-after', () => 

and in my shopify.extension.toml, I have:

```markup
[[extensions.targeting]]
target = "purchase.checkout.shipping-option-list.render-after"
module = "./src/Checkout.jsx"
export = "deliveryDateRender"

[[extensions.targeting]]
target = "purchase.checkout.pickup-location-list.render-after"
module = "./src/Checkout.jsx"
export = "pickupDateRender"

Can someone point me in the right direction?

Thanks!

2

Hi there :waving_hand:
If you have a .jsx extension(React no typescript), instead of a .tsx extension then you’ll want to use the following code.

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

export default reactExtension(
  'purchase.checkout.shipping-option-item.render-after',
  () =>
3

Hi Lizk,

Thanks for your help, and pointing out the syntax differences between jsx and typescript.

Since I am interested in PickupLocationListApi, I tried the following code:

import {
  reactExtension,
  BlockStack,
  DateField,
  useApi,
  useApplyMetafieldsChange,
  useMetafield,
  useSubscription,
} from '@shopify/ui-extensions-react/checkout';  

const deliveryDateRender = reactExtension(
  'purchase.checkout.shipping-option-list.render-after', () => 

My VS code is now happy with the syntax, but I got the following runtime error:

The above error occurred in the <Extension> component:

at Extension ([https://vernon-sf-detroit-foot.trycloudflare.com/extensions/79ec14ec-f1d2-4dab-af1f-c0d07af30c7c/assets/delivery-date-picker.js:18481:26](https://vernon-sf-detroit-foot.trycloudflare.com/extensions/79ec14ec-f1d2-4dab-af1f-c0d07af30c7c/assets/delivery-date-picker.js:18481:26))
at ErrorBoundary ([https://vernon-sf-detroit-foot.trycloudflare.com/extensions/79ec14ec-f1d2-4dab-af1f-c0d07af30c7c/assets/delivery-date-picker.js:18346:7](https://vernon-sf-detroit-foot.trycloudflare.com/extensions/79ec14ec-f1d2-4dab-af1f-c0d07af30c7c/assets/delivery-date-picker.js:18346:7))

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
....

Basically, it does not like the line of

const isPickupSelected = useSubscription(isLocationFormVisible);

If I comment out this line, the error goes away. But of course I don't get the value I would like to get. Do you have any idea what I am missing for using useSubscription properly?

Regards,
--Jude
4

By the way, I just tried using

const {target, isTargetSelected} =
    useApi('purchase.checkout.shipping-option-item.render-after');
  const shippingOption = useSubscription(target);

and I got the same error on the useSubscription line.