# 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="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2FnZSiu3HsxICFoiMOKX1H%2Fimage.png?alt=media&#x26;token=b58d8cfe-72bc-441f-b239-f291b0ceed06" 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://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions) `items[]` might only contain [digital products](https://docs.digitalriver.com/digital-river-api/product-management/skus#how-products-are-classified-as-physical-or-digital). Alternatively, customers might have opted to use the [wallet component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component), meaning the customer's shipping method choice is collected within the [payment component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component). To determine whether a transaction requires the shipping component, check [`requiresShipping`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-components#requiresshipping) in the `data` returned by [`onReady`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-components#onready) and [`onChange`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-components#onchange).

## Creating the shipping component

To create an instance of the shipping component, pass `'shipping'` to [`createComponent()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#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()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#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://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/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.