Cardknox is now Sola
Learn More
LogoLogo
Contact Us
  • Introduction
  • 🔗API
    • Transaction API
      • Credit Card
      • Check (ACH)
      • EBT
      • Gift Card
      • Fraud
    • Customer and Recurring API
    • Reporting API
    • Account Boarding API
      • Account Boarding Merchant Agreement
      • Account Boarding Swagger UI
    • Code Samples
    • Error Codes
  • 📦SDK
    • .NET SDK
      • Transaction Workflow
    • iOS SDK
      • iOS SDK - Technical Guide
      • Workflow
    • Android SDK
      • Android SDK - Technical Guide
  • 🧰 Cardknox Products
    • 3D Secure 2.0
      • Client-Side Integration
        • Client-Side Integration (Non-iFields)
      • Server-Side Integration
    • Account Updater
    • Batch Processing
    • Browser-Based POS systems (BBPOS)
    • CloudIM Developer Guide
    • Deep Linking
      • Deep Linking Integration for Third-Party Websites
    • EBT Online
    • Gateway Emulators
    • iFields
      • Angular iFields
    • Merchant Portal
      • FAQ
    • Mobile App
    • Split Capture
    • Tap to Phone - Android
    • Partner Portal
    • PaymentSITE
      • QR Codes for PaymentSITE
    • Webhooks
  • 📱Mobile Wallets
    • Apple Pay Hosted Checkout
      • Apple Pay Hosted Checkout Initial Setup
      • Apple Pay Prerequisites
      • Apple Pay Hosted Checkout Objects Reference (Request)
      • Apple Pay Hosted Checkout Objects Reference (Response)
      • Apple Pay iFields Integration
      • Apple Pay Hosted Checkout Sample Code
      • Apple Pay Features
      • Set up Apple Pay Merchant ID with Cardknox
    • Click-To-Pay - Hosted Checkout
      • Click-To-Pay Initial Setup
      • Click-To-Pay Sample Code
      • Click-To-Pay iFields Integration
      • Click-To-Pay Objects Reference (Request)
      • Click-To-Pay Objects Reference (Response)
    • Google Pay Hosted Checkout
      • Google Pay Control Object
      • Google Pay Request Objects
      • Google Pay Response Objects
      • Google Pay Sample Code
      • iFields Integration
      • Google Pay FAQ
  • 🔌Plugins
    • Netsuite
      • NetSuite Features and Demo
    • WooCommerce
    • Magento Plugin
    • RMH (Retail Management Hero)
    • RMS (Retail Management Systems)
  • 📖Articles
    • Frequently Asked Questions
    • How to Build POS Integration Flows
    • Card Present Integration Guide
  • Glossary of Terms
Powered by GitBook
On this page
  • Overview
  • Inputs
  • Lifecycle events
  • User events
  • Error
  • Actions
  • Focus
  • Clear
  • Get Token
  • Inputs
  • Account
  • Options
  • ThreeDS
  • Update Event Data
  • Error Data

Was this helpful?

Export as PDF
  1. Cardknox Products
  2. iFields

Angular iFields

Last updated 1 year ago

Was this helpful?

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:

iFields:

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

<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.

<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

options

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

Pass your to the component in the account input like this:

The event 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:

iFields Version:

🧰
https://www.cardknox.com/sandbox/
Fields
iFields key
payload
2.6.2006.0102
Account
Options
ThreeDS