PickupLocationsApi

This API object is provided to extensions registered for the `Checkout::PickupLocations::RenderBefore` or `Checkout::PickupLocations::RenderAfter` extension points. It extends the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) and provides a [isLocationFormVisible](#properties-propertydetail-islocationformvisible) boolean to indicate whether the customer location input form is currently rendered and shown to the buyer.

import React from 'react';
import {
  render,
  useExtensionApi,
  useSubscription,
  Text,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::PickupLocations::RenderBefore',
  () => ,
);

function Extension() {
  const {isLocationFormVisible} =
    useExtensionApi();
  const locationFormShown = useSubscription(
    isLocationFormVisible,
  );

  if (locationFormShown) {
    return (
      
        The customer is being asked to provide
        their location.
      
    );
  } else {
    return (
      
        Pickup locations are being shown.
      
    );
  }
}

import {extend} from '@shopify/checkout-ui-extensions';

extend(
  'Checkout::PickupLocations::RenderBefore',
  (root, {isLocationFormVisible}) => {
    const content = root.createText(
      getTextContent(
        isLocationFormVisible.current,
      ),
    );
    root.appendChild(content);

    isLocationFormVisible.subscribe(
      (updatedLocationFormVisible) => {
        content.updateText(
          getTextContent(
            updatedLocationFormVisible,
          ),
        );
      },
    );

    function getTextContent(
      isLocationFormVisible,
    ) {
      if (isLocationFormVisible) {
        return 'The customer is being asked to provide their location.';
      } else {
        return 'Pickup locations are being shown.';
      }
    }
  },
);

Properties

See the [StandardApi examples](/docs/api/checkout-ui-extensions/apis/standardapi#examples) for more information on how to use the API.