# ShippingMethodDetailsApi


This API object is provided to extensions registered for the `Checkout::ShippingMethodDetails::RenderAfter` or `Checkout::ShippingMethodDetails::RenderExpanded` extension points.

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 [targetSelected](#properties-propertydetail-targetselected) boolean indicating whether the shipping method is currently selected in the UI.


```jsx
import React, {useState} from 'react';
import {
  render,
  Text,
  useExtensionApi,
  useSubscription,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::ShippingMethodDetails::RenderAfter',
  () => <Extension />,
);

function Extension() {
  const {target, targetSelected} =
    useExtensionApi();
  const {title} = useSubscription(target);

  const selected = useSubscription(
    targetSelected,
  );

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

```

```js
import {extend} from '@shopify/checkout-ui-extensions';

extend(
  'Checkout::ShippingMethodDetails::RenderAfter',
  (root, {target, targetSelected}) => {
    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(targetSelected),
    );
    root.appendChild(selectedText);

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

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

```

## 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.

### ShippingMethodDetailsApi

### target

value: `StatefulRemoteSubscribable<ShippingOption>`

The shipping option the extension is attached to.

### targetSelected

value: `StatefulRemoteSubscribable<boolean>`

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

value: `"shipping" | "local"`

The type of this delivery option.

### carrier

value: `ShippingOptionCarrier`

Information about the carrier.

### cost

value: `Money`

The cost of the delivery.

### costAfterDiscounts

value: `Money`

The cost of the delivery including discounts.

### deliveryEstimate

value: `DeliveryEstimate`

Information about the estimated delivery time.

### handle

value: `string`

The unique identifier of the delivery option.

### title

value: `string`

The title of the delivery option.

### description

value: `string`

The description of the delivery option.

### ShippingOptionCarrier

### name

value: `string`

The name of the carrier.

### Money

### amount

value: `number`

The price amount.

### currencyCode

value: `CurrencyCode`

The ISO 4217 format for the currency.

### DeliveryEstimate

### timeInTransit

value: `NumberRange`

The estimated time in transit for the delivery in seconds.

### NumberRange

### lower

value: `number`

The lower bound of the number range.

### upper

value: `number`

The upper bound of the number range.

## Related

- [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)
- [CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi)
- [PickupPointsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointsapi)
- [PickupLocationsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationsapi)
- [ExtensionPoints](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)