# Angular iFields

## Overview

Our component for the Angular framework simplifies the iFields integration process. This integration allows you to build forms with secure payment fields, giving you the ability to design and customize the look and feel of your payment and checkout flows without having to worry about PCI compliance.

**Sandbox:** To request a Sandbox account, please reach out to <support@solapayments.com>.

**iFields:** [Fields](https://www.cardknox.com/ifields/)

A sandbox or live account is required to use this component.

## Inputs <a href="#inputs" id="inputs"></a>

There are 2 basic inputs required to get this up and running:

#### 1. Type <a href="#id-1.-type" id="id-1.-type"></a>

There are three types of payment data that iFields supports:

* Credit Card
* CVV
* ACH

```
    <cardknox-ifields [type]="CARD"></cardknox-ifields>
```

The possible values for this property are:

* card
* CVV
* ACH

These can be imported from the component.

```
    import { ACH_TYPE, CARD_TYPE, CVV_TYPE, AngularIfieldsComponent } from '@cardknox/angular-ifields';
    /**...*/
    CARD = CARD_TYPE;
```

#### 2. Account <a href="#id-2.-account" id="id-2.-account"></a>

Pass your [iFields key](https://www.cardknox.com/ifields/) to the component in the **account** input like this:

```
<cardknox-ifields [account]="account"></cardknox-ifields>
    
    /**...*/

    account = {
        xKey: '{Your iFields key}',
        xSoftwareName: '{The name of your app}',
        xSoftwareVersion: '{Your app's version}'
    }
```

Events:

There are 2 lifecycle events and 7 user events.

### Lifecycle events <a href="#lifecycle-events" id="lifecycle-events"></a>

#### 1. Load <a href="#id-1.-load" id="id-1.-load"></a>

Is emitted when the iFrame has loaded.

`1` `<cardknox-ifields (load)="onLoad"></cardknox-ifields>`

#### 2. Token <a href="#id-2.-token" id="id-2.-token"></a>

Is emitted when a token is received from the iField.

`1` `<cardknox-ifields (token)="onToken"></cardknox-ifields>`

### User events <a href="#user-events" id="user-events"></a>

User events are events passed along from iFields when the user interacts with it.

The available events are:

1. click
2. dblclick
3. focus
4. blur
5. input
6. change
7. submit\*

\* the submit event works slightly differently, see below.

#### Update <a href="#update" id="update"></a>

Aside from submit, the above events can be collected on a single event `update`. This is **not** recommended as it will cause an unnecessary amount of function calls. Instead, subscribe only to the events you want to act on.

The event [payload](https://www.npmjs.com/package/@cardknox/angular-ifields) is in `e.data`. The data also contains the event so you can subscribe to multiple events with a single function and a `switch` statement, like this:

```
<cardknox-ifields (update)="onUpdate($event)"></cardknox-ifields>

    /**...*/

    onUpdate({ data }) {
        switch (data.event) {
            case 'input':
                console.log("input event received");
                break;
            case 'click':
                console.log("click event received");
                break;
        }
    }
```

#### Submit <a href="#submit" id="submit"></a>

This event is triggered when the user submits the form from within the iFrame.

This event works differently from other user events.

* This event is only emitted if prop `options.autoSubmit` is true. (this is the default).
* Subscribing to `update` will not, work as mentioned above.
* The data passed along with this event is slightly different (see below).

```
<form id="form">
        <cardknox-ifields [options]="options"></cardknox-ifields>
    </form>

    /**...*/
    
    options = {
        autoSubmit: true,
        autoSubmitFormId: 'form'
    }
```

It is also possible to have the component automatically submit the form for you when *submit* is triggered from the iFrame. If `autoSubmitFormId` is set on the options prop, the component will call submit on the element with that ID. This is useful for smaller applications relying on the form element to handle submission.

```
<form id="form">
        <cardknox-ifields [options]="options"></cardknox-ifields>
    </form>

    /**...*/
    
    options = {
        autoSubmit: true,
        autoSubmitFormId: 'form'
    }
```

### Error <a href="#error" id="error"></a>

There is also an error event that can be subscribed to.

## Actions <a href="#actions" id="actions"></a>

There are 3 actions available on this component as well:

### Focus <a href="#focus" id="focus"></a>

`focusIfield`

This action will set the focus to the iField when called.

### Clear <a href="#clear" id="clear"></a>

`clearIfield`

This action will clear the data from the iField when called.

### Get Token <a href="#get-token" id="get-token"></a>

`getToken`

This action will load the token for the iField when called.

```
<cardknox-ifields #card></cardknox-ifields>

  @ViewChild('card') cardIfield?: AngularIfieldsComponent;

  this.cardIfield.focusIfield();
  this.cardIfield.clearIfield();
  this.cardIfield.getToken();
```

## Inputs <a href="#inputs.1" id="inputs.1"></a>

| Name    | Type                                                               | Description  | Valid values                                   |
| ------- | ------------------------------------------------------------------ | ------------ | ---------------------------------------------- |
| type    | String                                                             | iFields type | <ul><li>card</li><li>cvv</li><li>ach</li></ul> |
| account | [Account](https://www.npmjs.com/package/@cardknox/angular-ifields) |              |                                                |
| options | [Options](https://www.npmjs.com/package/@cardknox/angular-ifields) |              |                                                |
| threeDS | [ThreeDS](https://www.npmjs.com/package/@cardknox/angular-ifields) |              |                                                |
| issuer  | String                                                             | Card issuer  | For cvv iField only                            |

### Account <a href="#account" id="account"></a>

| Name             | Type   | Description      |
| ---------------- | ------ | ---------------- |
| xKey             | String | iFields key      |
| xSoftwareName    | String | Software name    |
| xSoftwareVersion | String | Software version |

### Options <a href="#options" id="options"></a>

| Name                | Type    | Description                                                                                                                                            |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| enableLogging       | Boolean | Turn iField logs to the console on and off                                                                                                             |
| autoFormat          | Boolean | Turn iField auto-formatting on and off. This is only used for iFields of *card* type. See *autoFormatSeparator*                                        |
| autoFormatSeparator | String  | A string to be used to auto-format card numbers when *autoFormat* is turned on. The default value is " " (space).                                      |
| autoSubmit          | Boolean | Turn on capturing a submit event triggered from within the iFrame. Default is `true`.                                                                  |
| autoSubmitFormId    | String  | If autoSubmit is true, the ID of a form element can be set and the component will trigger *submit* on the form when submit is triggered in the iFrame. |
| placeholder         | String  | Text to be used as *placeholder* text for the input field.                                                                                             |
| iFieldstyle         | Object  | A style object to be used to style the iFields input element. This object is assigned to **HTMLElement.style**.                                        |

### ThreeDS <a href="#threeds" id="threeds"></a>

| Name                   | Type    | Description                                                                                 |
| ---------------------- | ------- | ------------------------------------------------------------------------------------------- |
| enable3DS              | Boolean | Turn 3DSecure on and off                                                                    |
| waitForResponse        | Boolean | Determine whether iFields should wait for a response from 3DSecure before getting the token |
| waitForResponseTimeout | Number  | The 3DSecure response timeout in milli-seconds. The default value is 2000 (2 seconds).      |
| amount                 | Number  | The transaction amount                                                                      |
| month                  | Number  | The 2-digit card expiration month                                                           |
| year                   | Number  | The 2-digit card expiration year                                                            |

### Update Event Data <a href="#update-event-data" id="update-event-data"></a>

| Name                   | Type    | Description                                                                                 |
| ---------------------- | ------- | ------------------------------------------------------------------------------------------- |
| enable3DS              | Boolean | Turn 3DSecure on and off                                                                    |
| waitForResponse        | Boolean | Determine whether iFields should wait for a response from 3DSecure before getting the token |
| waitForResponseTimeout | Number  | The 3DSecure response timeout in milli-seconds. The default value is 2000 (2 seconds).      |
| amount                 | Number  | The transaction amount                                                                      |
| month                  | Number  | The 2-digit card expiration month                                                           |
| year                   | Number  | The 2-digit card expiration year                                                            |

### Error Data <a href="#error-data" id="error-data"></a>

| Name         | Type   | Description                                |
| ------------ | ------ | ------------------------------------------ |
| result       | String | This will always have the value of `error` |
| errorMessage | String | Contains the error message                 |
| xTokenType   | String | Either card, cvv, or ach                   |

**iFields Version:** [2.6.2006.0102](https://cdn.cardknox.com/ifields/versions.htm)


---

# 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.solapayments.com/products/ifields/ifields-angular.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.