# Components

A **Component** securely collects one piece of sensitive information, such as a card number or CVC. When several components collect details for a single card, a **ComponentGroup** binds them together.

Use [`Shift4.createComponent()`](/docs/js/shift4-object#createcomponenttype-options--) for a single component that collects all card details, or [`Shift4.createComponentGroup()`](/docs/js/shift4-object#createcomponentgroup) to collect them in separate fields.

## Component object

Component object is used to securely collect sensitive information (like card number or cvc).

### mount(selector)

Mounts component to placeholder tag located by given selector.

#### Parameters

**`selector`** | string | Element

Either CSS selector or DOM element that will be used as a mounting point.

#### Result

Component object on which this method was called

#### Example

```javascript
var components = shift4.createComponentGroup();
var number = components.createComponent("number").mount("#number");
```

### clear()

Removes any current value from a component.

#### Result

Component object on which this method was called.

#### Example

```javascript
var card = shift4.createComponent("card");

card.clear();
```

## ComponentGroup object

When multiple components are required to collect card details for a single card, the ComponentGroup object is used to group them.

### automount(selector)

Automatically search all tags nested under the tag located by the given selector and create components on all tags with the `data-shift4` attribute. The value of that attribute is used to determine the type of the component.

#### Parameters

**`selector`** | string | Element

Either CSS selector or DOM element that will be used as a starting point when searching for tags with `data-shift4` attribute.

#### Result

ComponentGroup object on which this method was called.

#### Example

```javascript
var components = shift4.createComponentGroup().automount("#payment-form");
```

### createComponent(type, options = {})

Create a new component of a given type and assigns it to this component group.

#### Parameters

**`type`** | string

Component type to create. It could be one of the following types:

- `number` - used to collect card numbers
- `expiry` - used to collect card expiration dates (both month and year)
- `cvc` - used to collect card security code
- `expiryMonth` - used to collect card expiration month
- `expiryYear` - component for collecting the card's expiration year


**`options`** | object

Plain object with additional options.

#### Result

[Component object](#component-object)

#### Example

```javascript
var components = shift4.createComponentGroup();

var number = components.createComponent("number");
```

## Next steps

- [Styling](/docs/js/styling) -- customize how components look.
- [Shift4 object](/docs/js/shift4-object) -- tokenize the collected card details.