--- title: ShippingOptionItemApi description: > 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`](/docs/api/checkout-ui-extensions/apis/standardapi), provides a [`target`](#properties-propertydetail-target) object with information about the shipping method the extension is attached to, and a [`isTargetSelected`](#properties-propertydetail-istargetselected) boolean indicating whether the shipping method is currently selected in the UI. api_version: 2023-07 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/shippingoptionitemapi md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/shippingoptionitemapi.md --- # Shipping​Option​Item​Api Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi), provides a [`target`](#properties-propertydetail-target) object with information about the shipping method the extension is attached to, and a [`isTargetSelected`](#properties-propertydetail-istargetselected) boolean indicating whether the shipping method is currently selected in the UI. ## Properties See the [StandardApi examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#examples) for more information on how to use the API. * target StatefulRemoteSubscribable\ required The shipping option the extension is attached to. * isTargetSelected StatefulRemoteSubscribable\ required Whether the shipping option the extension is attached to is currently selected in the UI. ### ShippingOption Represents a delivery option that is a shipping option. * type The type of this delivery option. ```ts "shipping" | "local" ``` * carrier Information about the carrier. ```ts ShippingOptionCarrier ``` * cost The cost of the delivery. ```ts Money ``` * costAfterDiscounts The cost of the delivery including discounts. ```ts Money ``` * deliveryEstimate Information about the estimated delivery time. ```ts DeliveryEstimate ``` * handle The unique identifier of the delivery option. ```ts string ``` * title The title of the delivery option. ```ts string ``` * description The description of the delivery option. ```ts string ``` ```ts 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. ```ts string ``` ```ts export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } ``` ### Money * amount The price amount. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } ``` ### CurrencyCode ```ts '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. ```ts NumberRange ``` ```ts export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } ``` ### NumberRange * lower The lower bound of the number range. ```ts number ``` * upper The upper bound of the number range. ```ts number ``` ```ts export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } ``` Examples ### Examples * #### ##### React ```jsx import { reactExtension, Text, useApi, useSubscription, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); 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 ( Shipping method: {title} is{' '} {selected ? '' : 'not'} selected. ); } ``` ##### JavaScript ```js 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'; } }, ); ``` ## Related [APIs - StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi) [APIs - CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi) [APIs - OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/orderstatusapi) [APIs - CartLineItemApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlineitemapi) [APIs - PickupPointListApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointlistapi) [APIs - PickupLocationListApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationlistapi) [APIs - ExtensionTargets](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensiontargets)