Choose a version:

ShippingOptionItemApi

Requires access to protected customer data for some properties.

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

It extends the StandardApi, provides a target object with information about the shipping method the extension is attached to, and a isTargetSelected boolean indicating whether the shipping method is currently selected in the UI.

Anchor to propertiesProperties

See the StandardApi examples for more information on how to use the API.

Anchor to target target StatefulRemoteSubscribable<> required: The shipping option the extension is attached to.
Anchor to isTargetSelected isTargetSelected StatefulRemoteSubscribable<boolean> required: Whether the shipping option the extension is attached to is currently selected in the UI.

ShippingOptionItemApi

target
The shipping option the extension is attached to.
```
StatefulRemoteSubscribable<ShippingOption>
```
isTargetSelected
Whether the shipping option the extension is attached to is currently selected in the UI.
```
StatefulRemoteSubscribable<boolean>
```

export interface ShippingOptionItemApi {
  /**
   * The shipping option the extension is attached to.
   */
  target: StatefulRemoteSubscribable<ShippingOption>;

  /**
   * Whether the shipping option the extension is attached to is currently selected in the UI.
   */
  isTargetSelected: StatefulRemoteSubscribable<boolean>;
}

ShippingOption

Represents a delivery option that is a shipping option.

type
The type of this delivery option.
```
"shipping" | "local"
```
carrier
Information about the carrier.
```
ShippingOptionCarrier
```
cost
The cost of the delivery.
```
Money
```
costAfterDiscounts
The cost of the delivery including discounts.
```
Money
```
deliveryEstimate
Information about the estimated delivery time.
```
DeliveryEstimate
```
handle
The unique identifier of the delivery option.
```
string
```
title
The title of the delivery option.
```
string
```
description
The description of the delivery option.
```
string
```

export interface ShippingOption extends DeliveryOption {
  /**
   * The type of this delivery option.
   */
  type: 'shipping' | 'local';

  /**
   * Information about the carrier.
   */
  carrier: ShippingOptionCarrier;

  /**
   * The cost of the delivery.
   */
  cost: Money;

  /**
   * The cost of the delivery including discounts.
   */
  costAfterDiscounts: Money;

  /**
   * Information about the estimated delivery time.
   */
  deliveryEstimate: DeliveryEstimate;
}

ShippingOptionCarrier

name
The name of the carrier.
```
string
```

export interface ShippingOptionCarrier {
  /**
   * The name of the carrier.
   */
  name?: string;
}

Money

amount
The price amount.
```
number
```
currencyCode
The ISO 4217 format for the currency.
```
CurrencyCode
```

export interface Money {
  /**
   * The price amount.
   */
  amount: number;
  /**
   * The ISO 4217 format for the currency.
   * @example 'CAD' for Canadian dollar
   */
  currencyCode: CurrencyCode;
}

CurrencyCode

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'

DeliveryEstimate

timeInTransit
The estimated time in transit for the delivery in seconds.
```
NumberRange
```

export interface DeliveryEstimate {
  /**
   * The estimated time in transit for the delivery in seconds.
   */
  timeInTransit?: NumberRange;
}

NumberRange

lower
The lower bound of the number range.
```
number
```
upper
The upper bound of the number range.
```
number
```

export interface NumberRange {
  /**
   * The lower bound of the number range.
   */
  lower?: number;

  /**
   * The upper bound of the number range.
   */
  upper?: number;
}

Was this section helpful?

import {

reactExtension,

Text,

useApi,

useSubscription,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.shipping-option-item.render-after',

() => <Extension />,

);

function Extension() {

const {target, isTargetSelected} =

useApi<'purchase.checkout.shipping-option-item.render-after'>();

const shippingOption = useSubscription(target);

const title = shippingOption?.title;

const selected = useSubscription(

isTargetSelected,

);

return (

<Text>

Shipping method: {title} is{' '}

{selected ? '' : 'not'} selected.

</Text>

);

}

examples

React

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

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

function Extension() {
  const {target, isTargetSelected} =
    useApi<'purchase.checkout.shipping-option-item.render-after'>();
  const shippingOption = useSubscription(target);
  const title = shippingOption?.title;

  const selected = useSubscription(
    isTargetSelected,
  );

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

JavaScript

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

export default extension(
  'purchase.checkout.shipping-option-item.render-after',
  (root, {target, isTargetSelected}) => {
    const titleText = root.createText(
      `Shipping method title: ${target.current.title}`,
    );
    root.appendChild(titleText);

    target.subscribe((updatedTarget) => {
      titleText.updateText(
        `Shipping method title: ${updatedTarget.title}`,
      );
    });

    const selectedText = root.createText(
      getSelectedText(isTargetSelected),
    );
    root.appendChild(selectedText);

    isTargetSelected.subscribe(
      (updatedSelected) => {
        selectedText.updateText(
          getSelectedText(updatedSelected),
        );
      },
    );

    function getSelectedText(selected) {
      return selected
        ? 'Selected'
        : 'Not selected';
    }
  },
);

Anchor to relatedRelated

APIsPickupPointListApi

APIsPickupLocationListApi

APIsExtensionTargets