# Address component

The address component collects a customer's shipping and/or billing information.

For many countries, the component:

* Presents customers with a list of acceptable political subdivisions, such as states and provinces, and then requires them to make a selection.
* Validates the format of a customer's postal code.

To use the component successfully, you must [create it](#creating-the-address-component), [mount it](#mounting-the-address-component), and [submit its data](#submitting-the-address-component).

In most cases, you'll need to implement this component whether your site sells physical and/or digital products. However, if your application only uses the [wallet component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component.md) (plus the mandatory [compliance component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/compliance-component.md)), you might not need it.

Once the component gathers and (in some cases) validates a customer's input, Digital River uses it to set the [checkout-session's](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions) `shipTo` and/or `billTo`.

What inputs the component requires and what options it presents depends on whether the checkout involves:

* [Physical and/or digital products](#digital-and-physical-products)
* [Registered customers](#registered-customers)
* [Customers conducting a B2B transaction](#business-to-business-transactions)

## Digital and physical products

Whether the address component collects shipping and/or billing information depends on [`items[]`](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions/checkout-sessions-basics#product-data) in the [checkout-session](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions/checkout-sessions-basics). If any represent a [physical product](/digital-river-api/product-management/skus.md#how-products-are-classified-as-physical-or-digital), the component prompts customers for their shipping address and allows them to enter a different billing address.

If all the `items[]` are digital, then they only collect billing information.

{% tabs %}
{% tab title="Checkouts with physical products" %}

<div align="left"><figure><img src="/files/YM3NpwUMKwrgDWNddh4r" alt="" width="563"><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Checkouts with only digital products" %}

<div align="left"><figure><img src="/files/qiZyjTKccgrhdHeEvpvk" alt="" width="563"><figcaption></figcaption></figure></div>
{% endtab %}
{% endtabs %}

## Registered customers

If you define [`options.addresses[]`](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions/checkout-sessions-basics#saved-addresses), the component presents these saved addresses to users for convenience.

{% tabs %}
{% tab title="Saved addresses" %}

<div align="left"><figure><img src="/files/ZuUZT9HodZDcLM3KSoIU" alt="" width="563"><figcaption></figcaption></figure></div>
{% endtab %}
{% endtabs %}

## Business-to-business transactions

If you activate the [auto collect customer type](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions/checkout-sessions-basics#auto-collect-customer-type) feature, the component displays a checkbox that asks customers whether they’d like to purchase on behalf of a business.

If customers select this option or you pass a [`customerType` ](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions/checkout-sessions-basics#customer-type)of `business` , customers must provide their company's name when entering shipping and billing information.

<div align="left"><figure><img src="/files/ZTygjMGCb0U21XwevG18" alt="" width="375"><figcaption></figcaption></figure></div>

## Creating the address component

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

```javascript
let addressComponent;
...
addressComponent = components.createComponent('address');
```

## Mounting the address component

To attach the address 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="address-container" style="display: block">
...
addressComponent.mount('address-container');
```

## Submitting the address component

The address component exposes `done()`, which submits the form and returns a boolean. The function requires the [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) operator and must be called inside an [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).

```javascript
const addressComponentStatus = await addressComponent.done();
```

The value returned by the function indicates whether the customer's shipping and/or billing information is complete, valid, and added to the [checkout-session's](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Drop-in-Checkout-Sessions) `shipTo` and/or `billTo`.

If `true`, then your application can move on to the next stage in the checkout.

If `false`, Digital River determined that either the address is invalid (most likely because customers entered an incorrectly formatted postal code or email address) or customers failed to enter the required information.

{% hint style="success" %}
For certain fields, the address component supplies customers with tips on how to format their input.
{% endhint %}

If `false`, make sure you implement logic that blocks the checkout from advancing to the next stage. In other words, the address component should remain displayed to customers.


---

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