1.0.1 • Public • Published


A React component for Cardknox iFields


Cardknox is a developer-friendly payment gateway integration provider for in-store, online, or mobile transactions

Sandbox: https://www.cardknox.com/sandbox/

iFields: https://www.cardknox.com/ifields/

A sandbox or live account is required to use this component


There are 2 basic props required to get this up and running.

1. Type

There are three types of payment data iFields supports:

  • Credit Card
  • CVV
  • ACH
    <IField type={CARD_TYPE} />

The possible values for this property are

  • card
  • cvv
  • ach

These can be imported from the component

import { CARD_TYPE, CVV_TYPE, ACH_TYPE } from '@cardknox/react-ifields';

2. Account

Pass your iFields key to the component in the account prop like this:

export default class App extends React.Component {
  state = {
    account = {
      xKey: "{Your iFields key}",
      xSoftwareName: "{The name of your app}",
      xSoftwareVersion: "{Your app's version}"
  render() {
    return <IField account={this.state.account} />


There are 2 lifecycle events and 7 user events.

Lifecycle events

1. Load

Is emitted when the iframe has loaded

    <IField onLoad={this.onLoad} />

2. Token

Is emitted when a token is received from the iField

    <IField onToken={this.onToken} />

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. keypress
  8. issuerupdated (CVV only)
  9. submit*

* the submit event works slightly differently, see below.

Update Event

Aside from submit, the above events are all collected on a single event update.

The event payload is in e.data. The data also contains the event type so you can filter out events you don't need with a switch statement like this:

export default class App extends React.Component {
  render() {
    return <IField onUpdate={this.onUpdate} />
  onUpdate = (data) => {
    switch (data.type) {
      case 'input':
        console.log("input event received");
      case 'click':
        console.log("click event received");

Submit Event

This event is triggered when the user submits the form (presses the Enter key) from within the iFrame.

This event works differently than other user events.

  • This event is only emitted if prop options.autoSubmit is true.
  • This event does not call onUpdate.
  • No data is passed along with this event.
export default class App extends React.Component {
  state = {
    options: {
      autoSubmit: true
  render() {
    return <IField options={this.state.options} onSubmit={this.onSubmit} />
  onSubmit = () => {
    //submit to server

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.

export default class App extends React.Component {
  state = {
    options: {
      autoSubmit: true,
      autoSubmitFormId: 'form'
  render() {
    return <form id="form">
        <IField options={this.state.options} />


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

export default class App extends React.Component {
  render() {
    return <IField onError={this.onError} />
  onError = (data) => {
    console.error("IFrame errored", data);


There are 3 actions available on this component as well



This action will set the focus to the ifield when called



This action will clear the data from the ifield when called

Get Token


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

export default class App extends React.Component {
  iFieldRef = React.createRef();
  render() {
    return <IField ref={this.iFieldRef} />
  focus = () => {
  clear = () => {
  getToken = () => {


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
onLoad Function Called when the iframe loads
onUpdate Function<Update Event Data> Called when the iField has been updated
onSubmit Function Called when the user presses the Enter key inside the iframe
onToken Function<Token Data> Called when the iField has received a token
onError Function<Error Data> Called when an error occurs while retrieving the token


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


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 The token should be retrieved as soon as the data is valid. This setting will also turn on capturing a submit event triggered from within the iFrame when submitting the data.
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.


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
cardNumberlength Number The length of the data in the card iField
Only returned on an update event from the card iField
type String The name of the event
isEmpty Boolean Whether or not the iField is empty
isValid Boolean Whether or not the data in the iField is valid
issuer String The card issuer
Only returned on an update event from the card iField.
length Boolean The length of the data in the iField
Note: For card iFields, this includes the formating character. Use cardNumberlength to get the actual data length.

Token Data

Name Type Description
xToken string The token
xTokenType String Either card, cvv, or ach

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


npm i @cardknox/react-ifields

DownloadsWeekly Downloads






Unpacked Size

30.4 kB

Total Files


Last publish


  • rezwan-ck
  • mweisz-ck
  • mstein-ck
  • ymwymw