# 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](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object) 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](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components).

## 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'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/address-component)
* [`'shipping'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component)
* [`'taxidentifier'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/tax-identifier-component)
* [`'invoiceattribute'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/invoice-component)
* [`'wallet'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component)
* [`'payment'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component)
* [`'compliance'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/compliance-component)
* [`'ordersummary'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/order-summary-component)
* [`'thankyou'`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/thank-you-component)

## 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](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/address-component), [tax identifier component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/tax-identifier-component), [shipping component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/shipping-component), and [invoice component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/invoice-component) 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](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/address-component#submitting-the-address-component)
* [Submitting the tax identifier component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/tax-identifier-component#submitting-the-tax-identifier-component)
* [Submitting the shipping component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/shipping-component#submitting-the-shipping-component)
* [Submitting the invoice component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/invoice-component#submitting-the-invoice-component)