# Shift4 object

Shift4 object is the main entry point to all Shift4.js functionalities. Create one by [initializing Shift4.js](/docs/js#shift4publickey-options).

## createComponent(type, options = {})

Create a new component of the specified type.

#### Parameters

**`type`** | string

Component type to be created. It could be a **card** - a single component to collect all card details. To collect card details in separate fields, use [`ComponentGroup.createComponent()`](/docs/js/components#createcomponenttype-options--).

**`options`** | object

Plain object with additional options.

#### Result

[Component object](/docs/js/components#component-object)

#### Example

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

## createComponentGroup()

Create a new grouping object that will be used to create multiple related components, such as number, expiry and cvc components that will be used together to collect details for a single card.

#### Result

[ComponentGroup object](/docs/js/components#componentgroup-object)

#### Example

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

## createToken(component, data = {})

Tokenize card data from a given component or component group by sending it to the "create token" API method.

#### Parameters

**`component`** | Component | ComponentGroup

A single component or a group of components from which sensitive card data will be tokenized.

**`data`** | object

Additional data that will be included in the tokens API request. The "create token" API method lists all permitted keys.

For security reasons, this parameter cannot be used to send the following fields in the request: `number`, `expMonth`, `expYear` and `cvc`. Values of these fields must be collected using components.

#### Result

Promise object

#### Example

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

function onFormSubmit() {
	shift4.createToken(card)
			.then(tokenCreatedCallback)
			.catch(errorCallback);
}
```

## verifyThreeDSecure(request)

Starts a 3D Secure process.

Depending on the card and the card's issuer, this may result in the 3D Secure challenge being displayed in an iframe or popup window.

#### Parameters

**`request`** | object

The request object will be sent to the API. The following keys are allowed:

- `card` (string) - a token identifier (generated by the [`createToken()`](#createtokencomponent-data--) method) or a card identifier (created using the [Cards API](/docs/api/shift4-gateway/cards/createcard)).
- `amount` (integer) - the amount in minor units of the given currency (for example, 10€ is represented as "1000" and 10¥ is represented as "10"), which must match the value that will be used to create a Charge using API
- `currency` (string) - the currency, represented as a three-letter ISO currency code, must match the value later used to create a Charge using API
- `merchantAccountId` (string, optional) - the merchant account identifier that will be used to complete the 3D Secure process
- `challengeIndicator` (string, optional) - this field is used to express preference when it comes to the 3DS flow. Possible values:
  - `no_preference`
  - `no_challenge_requested` - merchant prefers frictionless flow
  - `challenge_requested_requestor_preference` - merchant strongly prefers challenge flow
  - `challenge_requested_mandate` - merchant strongly prefers challenge flow due to PSD2 requirements


#### Result

Promise object

#### Example

```javascript
function tokenCreatedCallback(token) {
	var request = {
		card: token.id,
		amount: 2499,
		currency: 'USD',
	};

	shift4.verifyThreeDSecure(request)
		.then(threeDSecureCompletedCallback)
		.catch(errorCallback);
}
```

## Next steps

- [Components](/docs/js/components) -- mount components and collect card details.
- [Styling](/docs/js/styling) -- customize how components look.