ShippingOptionItemApi

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.

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

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

Properties

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

ShippingOptionItemApi

target

The shipping option the extension is attached to.

isTargetSelected

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.

carrier

Information about the carrier.

cost

The cost of the delivery.

costAfterDiscounts

The cost of the delivery including discounts.

deliveryEstimate

Information about the estimated delivery time.

handle

The unique identifier of the delivery option.

title

The title of the delivery option.

description

The description of the delivery option.

ShippingOptionCarrier

name

The name of the carrier.

Money

amount

The price amount.

currencyCode

The ISO 4217 format for the currency.

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

lower

The lower bound of the number range.

upper

The upper bound of the number range.

Related

• StandardApi
• CheckoutApi
• OrderStatusApi
• CartLineItemApi
• PickupPointListApi
• PickupLocationListApi
• ExtensionTargets