Skip to main content

Delivery

The APIs for interacting with delivery and shipping options.

Tip

Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available.

The base API object provided to purchase extension targets.

StatefulRemoteSubscribable<[]>
required

A list of delivery groups containing information about the delivery of the items the customer intends to purchase.

Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.

required

| undefined

Anchor to useDeliveryGroups
useDeliveryGroups()

Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes.

[]

This API object is provided to extensions registered for the purchase.checkout.shipping-option-item.render-after and purchase.checkout.shipping-option-item.details.render extension targets.

StatefulRemoteSubscribable<boolean>
required

Whether the shipping option the extension is attached to is currently selected in the UI.

required

The render mode of the shipping option.

StatefulRemoteSubscribable<>
required

The shipping option the extension is attached to.

Anchor to useShippingOptionTarget
useShippingOptionTarget()

Returns the shipping option for the purchase.checkout.shipping-option-item.render-after and purchase.checkout.shipping-option-item.details.render attached extensions.

{ shippingOptionTarget: ; isTargetSelected: boolean; renderMode: ; }

Anchor to shippingoptionlistapiShippingOptionListApi

This API object is provided to extensions registered for the purchase.checkout.shipping-option-list.render-before and purchase.checkout.shipping-option-list.render-after extension targets.

Anchor to deliverySelectionGroups
deliverySelectionGroups
StatefulRemoteSubscribable< [] | undefined >
required

The list of selection groups available to the buyers. The property will be undefined when no such groups are available.

StatefulRemoteSubscribable< | undefined>
required

The delivery group list the extension is attached to. The target will be undefined when there are no groups for a given type.

Anchor to useDeliveryGroupTarget
useDeliveryGroupTarget()

Returns the delivery group for the purchase.checkout.shipping-option-list.render-before and purchase.checkout.shipping-option-list.render-after attached extensions. This is deprecated, use useDeliveryGroupListTarget() instead.

| undefined

Anchor to useDeliveryGroupListTarget
useDeliveryGroupListTarget()

Returns the delivery group list for the purchase.checkout.shipping-option-list.render-before and purchase.checkout.shipping-option-list.render-after attached extensions.

| undefined

Anchor to useDeliverySelectionGroups
useDeliverySelectionGroups()

Returns the delivery selection groups for the purchase.checkout.shipping-option-list.render-before and purchase.checkout.shipping-option-list.render-after attached extensions.

| [] | undefined

This API object is provided to extensions registered for the purchase.checkout.pickup-point-list.render-after and purchase.checkout.pickup-point-list.render-after extension target.

Anchor to isLocationFormVisible
isLocationFormVisible
StatefulRemoteSubscribable<boolean>
required

Whether the customer location input form is shown to the buyer.

Anchor to pickuplocationlistapiPickupLocationListApi

This API object is provided to extensions registered for the purchase.checkout.pickup-location-list.render-after and purchase.checkout.pickup-location-list.render-after extension target.

Anchor to isLocationFormVisible
isLocationFormVisible
StatefulRemoteSubscribable<boolean>
required

Whether the customer location input form is shown to the buyer.

Anchor to pickuplocationitemapiPickupLocationItemApi

The API object provided to the purchase.checkout.pickup-location-option-item.render-after extension target.

StatefulRemoteSubscribable<boolean>
required

Whether the pickup location is currently selected.

StatefulRemoteSubscribable<>
required

The pickup location the extension is attached to.

Anchor to usePickupLocationOptionTarget
usePickupLocationOptionTarget()

Returns the pickup location option for purchase.checkout.pickup-location-option-item.render-after attached extensions.

{ pickupLocationOptionTarget: ; isTargetSelected: boolean; }
Examples

React

import {
reactExtension,
Banner,
useDeliveryGroups,
useDeliveryGroup,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
const deliveryGroups = useDeliveryGroups();
const firstDeliveryGroup = useDeliveryGroup(
deliveryGroups[0],
);

if (!firstDeliveryGroup) {
return null;
}

const selectedDeliveryOption =
firstDeliveryGroup?.selectedDeliveryOption;

return (
<Banner>
Selected delivery option:{' '}
{selectedDeliveryOption?.title}
</Banner>
);
}
Was this page helpful?