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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.