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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.