> For the complete documentation index, see [llms.txt](https://docs.digitalriver.com/digital-river-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component.md).

# Shipping component

The shipping component allows customers to select how they want their goods shipped.

It retrieves `options.shippingMethods[]` from the checkout-session, presents these options to customers, prompts them to make a selection, and then uses their input to set the checkout-session's `shippingChoice`.

<figure><img src="/files/E9L2PrWcA3i6Vg7MYBFW" alt=""><figcaption></figcaption></figure>

To use the shipping component, you'll need to [create it](#creating-the-shipping-component), [mount it](#mounting-the-shipping-component), and [submit its data](#submitting-the-shipping-component).

Your application doesn't always need to display this component to customers. In some cases, the [checkout-session's](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions) `items[]` might only contain [digital products](/digital-river-api/product-management/skus.md#how-products-are-classified-as-physical-or-digital). Alternatively, customers might have opted to use the [wallet component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component.md), meaning the customer's shipping method choice is collected within the [payment component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component.md). To determine whether a transaction requires the shipping component, check [`requiresShipping`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components.md#requiresshipping) in the `data` returned by [`onReady`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components.md#onready) and [`onChange`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components.md#onchange).

## Creating the shipping component

To create an instance of the shipping component, pass `'shipping'` to [`createComponent()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#createcomponent-componenttype).

```javascript
let shippingComponent;
...
shippingComponent = components.createComponent('shipping');
```

## Mounting the shipping component

To attach the shipping component to your DOM, pass the `id` of its container to [`mount()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#mount-elementid).

```javascript
<div id="shipping-container" style="display: block">
...
shippingComponent.mount('shipping-container');
```

## Submitting the shipping component

The shipping component exposes `done()`, which submits the customer's selection and returns a boolean. It requires that you use the [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) operator and, therefore, must be called inside an [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).

```javascript
const shippingComponentStatus = await shippingComponent.done();
```

If `done()` returns `true`, then customers made a selection, and the [checkout-session's](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions) `shippingChoice` was updated. As a result, you can move the checkout process forward.

If `false`, then don't advance customers to the next stage of the checkout.