Angular iFields

Create a Sandbox Contact Us Knowledge Base
Search…
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: https://www.cardknox.com/sandbox/​
iFields: Fields​
A sandbox or live account is required to use this component.
Inputs
There are 2 basic inputs required to get this up and running:
1. Type
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
Pass your iFields key 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
1. Load
Is emitted when the iFrame has loaded.
1 <cardknox-ifields (load)="onLoad"></cardknox-ifields>
2. Token
Is emitted when a token is received from the iField.
1 <cardknox-ifields (token)="onToken"></cardknox-ifields>
User events
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
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 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
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
There is also an error event that can be subscribed to.
Actions
There are 3 actions available on this component as well:
Focus
focusIfield
This action will set the focus to the iField when called.
Clear
clearIfield
This action will clear the data from the iField when called.
Get Token
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
Name
Type
Description
Valid values
type
String
iFields type
card
cvv
ach
account
​Account​
​
​
options
​Options​
​
​
threeDS
​ThreeDS​
​
​
issuer
String
Card issuer
For cvv iField only
Account
Name
Type
Description
xKey
String
iFields key
xSoftwareName
String
Software name
xSoftwareVersion
String
Software version
Options
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
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
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
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​