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

# Components

Components are UI building blocks that allow you to create customizable checkout flows that collect information from and present information to customers.

On this page, you'll find information on:

* [Creating components](#creating-components)
* [The components object](#the-components-object)
* [The component object](#the-component-object)

## Creating components

The [`DigitalRiverCheckout` object](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object.md) exposes [`components()`](#components-configuration).

### `components(configuration)`

This function, which accepts a required [configuration object](#the-components-configuration-object), creates [components](#the-components-object), which you can use to manage one or more [component](#the-component-object) instances.

```javascript
...
let digitalRiverCheckout;
let components;
...
digitalRiverCheckout = new DigitalRiverCheckout(publicApiKey);
components = digitalRiverCheckout.components(configurationOptions);
...
```

#### The components configuration object

Refer to [Configuring components](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components.md).

## The components object

The components object, which exposes [`createComponent()`](#createcomponent-componenttype), manages a group of individual [component](#the-component-object) instances.

### `createComponent(componentType)`

The `createComponent()` function, which requires passing a [supported type](#supported-component-types), creates an individual [component](#the-component-object).

```javascript
let paymentComponent;
...
components = digitalRiverCheckout.components(configurationOptions);
paymentComponent = components.createComponent('payment');
```

#### Supported component types

* [`'address'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/address-component.md)
* [`'shipping'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component.md)
* [`'taxidentifier'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/tax-identifier-component.md)
* [`'invoiceattribute'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/invoice-component.md)
* [`'wallet'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component.md)
* [`'payment'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component.md)
* [`'compliance'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/compliance-component.md)
* [`'ordersummary'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/order-summary-component.md)
* [`'thankyou'`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/thank-you-component.md)

## The component object

The individual component object, which exposes [`mount()`](#mount-elementid) and, in some cases, [`done()`](#done), allows you to collect information from and present information to customers.

### `mount(elementId)`

The `mount()` function, which requires that you pass the `id` of an HTML element, attaches that [component](#the-component-object) to your [DOM](https://en.wikipedia.org/wiki/Document_Object_Model).

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

### `done()`

The [address component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/address-component.md), [tax identifier component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/tax-identifier-component.md), [shipping component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component.md), and [invoice component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/invoice-component.md) expose `done()`, which submits a customer's data and returns a boolean indicating whether it's valid. For details, refer to:

* [Submitting the address component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/address-component.md#submitting-the-address-component)
* [Submitting the tax identifier component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/tax-identifier-component.md#submitting-the-tax-identifier-component)
* [Submitting the shipping component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component.md#submitting-the-shipping-component)
* [Submitting the invoice component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/invoice-component.md#submitting-the-invoice-component)