Callback functions beeing invoked on certain Secure Field events.

Use the secureFields.on(...) callback function to subscribe to one or more of the ready, change, error or validate events.

On ready event

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 event

The validate event will be emitted once the form was 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 the event callback object has the following structure:

{
  "fields": {
    "cardNumber": {
      "length": 0,
      "valid": false,
      "paymentMethod": "VIS" // card type
    },
    "cvv": {
      "length": 3,
      "valid": true
    }
  },
  "hasErrors": true // indicates if one of the fields has valid=false
}

On success event

The success event will be emitted if the tokenisation 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",
  "redirect":"url", // only if card/merchant is 3D enrolled  
  "cardInfo":
  {
    "brand":"VISA DEBIT",
    "issuer":"Some Bank",
    "type":"debit", // debit or credit
    "distinction":"unknown", // consumer or corporate
    "country":"US"
  }
}

On clear event

The clear event will be emitted when the SecureFields.clear(fieldName) function was used. For example for the cvv field:

$("#cvvClear").click(function () {
  secureFields.clear("cvv");
});

Where the event callback object has the following structure:

{
  "fields": {
    "cardNumber": {
      "length": 0,
      "valid": false
    },
    "cvv": {
      "length": 0,
      "valid": false
    }
  },
  "hasErrors": true,
  "event": {
    "field": "cvv",
    "type": "clear"
  }
}

On change event

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

onkeyup
onkeydown
onblur
touchstart
touchmovetouchend
touchcancel
touchforcechange

secureFields.on("change", function(event) {
  // some fancy stuff
});

Where the event callback object has the following structure:

{
  "fields": {
    "cardNumber": {
      "length": 0,
      "valid": false,
      "paymentMethod": "VIS" // card type
    },
    "cvv": {
      "length": 0,
      "valid": false
    }
  },
  "hasErrors": true,
  "event": {
    "field": "cardNumber",  // the affected input field
    "type": "blur"          // the original event
  }
}

On error event

The error event will be emitted if there was an error after calling secureFields.initPay(...).

Possible scenarios are:

Wrong merchantId in secureFields.initPay()
Wrong name of card number, CVV fields
Wrong merchantId configuration on Datatrans side

Those errors should only occur during development/testing.

secureFields.on("error", function(data) {
  // something bad happened
});