Skip to main content

Delivery
API

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.

Anchor to standardapiStandardApi

The base API object provided to purchase extension targets.

Anchor to deliveryGroups
deliveryGroups
StatefulRemoteSubscribable<[]>
required

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

Was this section helpful?

Anchor to useDeliveryGroup
useDeliveryGroup(
deliveryGroup
)

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

Anchor to useDeliveryGroup-parametersParameters

Anchor to deliveryGroup
deliveryGroup
required

Anchor to useDeliveryGroup-returnsReturns

| undefined
Was this section helpful?

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.

Anchor to useDeliveryGroups-returnsReturns

[]
Was this section helpful?

Anchor to shipping optionShipping Option

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.

Anchor to isTargetSelected
isTargetSelected
StatefulRemoteSubscribable<boolean>
required

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

Anchor to renderMode
renderMode
required

The render mode of the shipping option.

Anchor to target
target
StatefulRemoteSubscribable<>
required

The shipping option the extension is attached to.

Was this section helpful?

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.

Anchor to useShippingOptionTarget-returnsReturns

{ shippingOptionTarget: ; isTargetSelected: boolean; renderMode: ; }
Was this section helpful?

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.

Anchor to target
target
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.

Was this section helpful?

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.

Anchor to useDeliveryGroupTarget-returnsReturns

| undefined
Was this section helpful?

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.

Anchor to useDeliveryGroupListTarget-returnsReturns

| undefined
Was this section helpful?

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.

Anchor to useDeliverySelectionGroups-returnsReturns

| [] | undefined
Was this section helpful?

Anchor to pickuppointlistapiPickupPointListApi

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.

Was this section helpful?

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.

Was this section helpful?

Anchor to pickuplocationitemapiPickupLocationItemApi

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

Anchor to isTargetSelected
isTargetSelected
StatefulRemoteSubscribable<boolean>
required

Whether the pickup location is currently selected.

Anchor to target
target
StatefulRemoteSubscribable<>
required

The pickup location the extension is attached to.

Was this section helpful?

Anchor to usePickupLocationOptionTarget
usePickupLocationOptionTarget()

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

Anchor to usePickupLocationOptionTarget-returnsReturns

{ pickupLocationOptionTarget: ; isTargetSelected: boolean; }
Was this section helpful?

Delivery group

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>
);
}

Anchor to examplesExamples

Learn how to use the API with JavaScript (JS) and React. See React Hooks for all available hooks.

Anchor to example-reading-the-selected-shipping-optionReading the selected shipping option
Anchor to example-reading-the-selected-pickup-location-optionReading the selected pickup location option
Anchor to example-determine-if-the-location-input-form-is-shownDetermine if the location input form is shown
Anchor to example-delivery-groupsDelivery groups
Was this section helpful?

Reading the selected shipping option

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

export default reactExtension(
'purchase.checkout.shipping-option-item.render-after',
() => <Extension />,
);

function Extension() {
const {shippingOptionTarget, isTargetSelected} =
useShippingOptionTarget();
const title = shippingOptionTarget.title;

return (
<Text>
Shipping method: {title} is{' '}
{isTargetSelected ? '' : 'not'} selected.
</Text>
);
}

Anchor to relatedRelated

ReferenceTargets
ReferenceComponents
ReferenceConfiguration
LearnTutorials