Events

The secureFields.on(...) callback functions let you subscribe to one or more of the events as described below.

on ready

The ready event will be emitted once the iframes are loaded.

secureFields.on("ready", function() {
  // setting a placholder for the cardNumber field
  secureFields.setPlaceholder("cardNumber", "Card number");

  // setting a placeholder for the CVV field
  secureFields.setPlaceholder("cvv", "CVV");
}

on validate

The validate event will be emitted once the form is submitted with secureFields.submit()

secureFields.on("validate", function(event) {
  // put a red border around the fields if they are not valid
  secureFields.setStyle("cardNumber.invalid", "border: 1px solid #f00");
  secureFields.setStyle("cvv.invalid", "border: 1px solid #f00");
});

where theevent callback object has the following structure:

{
  "fields": {
    "cardNumber": {
      "length": 0,
      "valid": false
    },
    "cvv": {
      "length": 3,
      "valid": true
    }
  },
  "hasErrors": true
}

"hasErrors": true indicates that one of the has "valid": false.

on change

The change event will be emitted whenever one of the following events is triggered:

focus
blur
keyUp
keyDown
touchstart
touchmovetouchend
touchcancel
touchforcechange
autocomplete

For example,

secureFields.on("change", function(event) {
  // your code
});

on cardInfo

The cardInfo event will be emitted when secureFields.getCardInfo() is called. It is available only before secureFields.submit().

secureFields.on("cardInfo", function(event) {
    // e.g. call backend
});

cardInfo has the following structure

{
  "event": "cardInfo",
  "data": {
    "cardInfo": {
      "brand": "VISA CREDIT",
      "type": "credit",
      "usage": "consumer",
      "country": "GB",
      "issuer": "DATATRANS"
    },
    "maskedCard": "424242xxxxxx4242",
    "paymentMethod": "VIS"
  }
}

Calling secureFields.getCardInfo(callback) is an alternative way to obtain information about the entered card by having the given callback function receive it rather than waiting for an event.

on success

The success event will be emitted if the tokenization was successful.

secureFields.on("success", function(data) {
  if (data.transactionId) {
    // send data.transactionId and the
    // rest of the form to your server
  }
});

where the event callback object has the following structure:

{
  "result": "success",
  "transactionId": "180403204621339015",
  "cardInfo": {
    "brand": "VISA DEBIT",
    "issuer": "Some Bank",
    "type": "debit", // debit or credit
    "usage": "unknown", // consumer, corporate or unknown
    "country": "US" // 2 letter ISO 3166-1 alpha-2 country code
  }
}

on error

Errors can happen in several scenarios, for example:

incorrect merchantId configured in secureFields.initTokenize(...);
incorrect name of the card number or CVV fields
incorrect merchantId configuration on our end.

These scenarios can be caught with

secureFields.on("error", function(data) {
  // what to do when an error occurred
}

Possible error objects:

{"event":"error","data":{"error":"error","action":"submit"}}

{"event":"error","data":"Invalid merchantId"}

{"event":"error","data":"Invalid merchant setup. Server-to-server security must be enabled"}

{"event":"error","data":"Invalid field"}

{"event":"error","data":"Field " + fieldName + " not allowed for alias version " + aliasFormat"}
// example: {"event":"error","data":"Field myFieldName not allowed for alias version V20"}

{"event":"error","data":"Field " + fieldName + " not allowed for mode " + mode"}  
// example: {"event":"error","data":"Field myFieldName not allowed for mode TOKENIZE"}

{"event":"cardInfo","data":{"result":"error","error":"The cardNumber is not yet valid"}}
{"event":"cardInfo","data":{"result":"error","error":"error"}} //jQuery.ajax() error if the Internet connection is down