Events

Search…
Events
Use the secureFields.on(...) callback function to subscribe to one or more of the ready, change, success, error, cardInfo or validate events.
on ready
on validate
on change
on cardInfo
on success
on error
The ready event will be emitted once the iframes are loaded.
1
secureFields.on("ready", function() { 
2
 // setting a placholder for the cardNumber field
3
 secureFields.setPlaceholder("cardNumber", "Card number");
4
​
5
 // setting a placeholder for the CVV field
6
 secureFields.setPlaceholder("cvv", "CVV");
7
});
Copied!
The validate event will be emitted once the form was submitted with secureFields.submit();
1
secureFields.on("validate", function(event) {
2
  // put a red border around the fields if they are not valid
3
  secureFields.setStyle("cardNumber.invalid","border: 1px solid #f00");
4
  secureFields.setStyle("cvv.invalid","border: 1px solid #f00");
5
});
Copied!
Where the event callback object has the following structure:
1
{
2
  "fields": {
3
    "cardNumber": {
4
      "length": 0,
5
      "valid": false
6
    },
7
    "cvv": {
8
      "length": 3,
9
      "valid": true
10
    }
11
  },
12
  "hasErrors": true // indicates if one of the fields has valid=false
13
}
Copied!
The change event will be emitted whenever one of the following events are getting triggered:
focus
blur
keyUp
keyDown
touchstart
touchmovetouchend
touchcancel
touchforcechange
1
secureFields.on("change", function(event) {
2
  // some fancy stuff
3
});
Copied!
Where the event callback object has the following structure:
1
{
2
  "fields": {
3
    "cardNumber": {
4
      "length": 0,
5
      "valid": false
6
    },
7
    "cvv": {
8
      "length": 0,
9
      "valid": false
10
    }
11
  },
12
  "hasErrors": true,
13
  "event": {
14
    "field": "cardNumber",  // the affected input field
15
    "type": "blur"          // the original event
16
  }
17
}
Copied!
The cardInfo event will be emitted whensecureFields.getCardInfo()is called.
1
secureFields.on("cardInfo", function(event) {
2
  // call backend, decide stuff ;)
3
});
Copied!
1
{
2
  "event": "cardInfo",
3
  "data": {
4
    "cardInfo": {
5
      "brand": "VISA CREDIT",
6
      "type": "credit",
7
      "usage": "consumer",
8
      "country": "GB",
9
      "issuer": "DATATRANS"
10
    },
11
    "maskedCard": "424242xxxxxx4242",
12
    "paymentMethod": "VIS"
13
  }
14
}
Copied!
Calling secureFields.getCardInfo(callback) is the alternative way to obtain the information about the entered card by having the given callback function receive it rather than waiting for an event.
The success event will be emitted if the tokenization was successful.
1
secureFields.on("success", function(data) {
2
  if(data.transactionId) {
3
    // send data.transactionId and the
4
    // rest of the form to your server
5
  }
6
});
Copied!
Where the event callback object has the following structure:
1
{
2
  "result": "success",
3
  "transactionId": "180403204621339015",
4
  "cardInfo":
5
  {
6
    "brand": "VISA DEBIT",
7
    "issuer": "Some Bank",
8
    "type": "debit", // debit or credit
9
    "usage": "unknown", // consumer, corporate or unknown
10
    "country": "US" // 2 letter ISO 3166-1 alpha-2 country code
11
  }
12
}
Copied!
The error event will be emitted if there was an error after calling secureFields.initTokenize(...).

Possible scenarios are:
Wrong merchantId configured in secureFields.initTokenize(...);
Wrong name of card number, CVV fields
Wrong merchantId configuration on Datatrans side
Those errors should only occur during development/testing.
1
secureFields.on("error", function(data) {
2
  // something bad happened
3
});
Copied!
Initialization and Styling
Mobile SDK
Last modified 1mo ago
Copy link