Secured Fields callbacks

Implement callbacks to handle events when using Secured Fields. Use these to customize your shopper's experience when specific events occur. 

Check the Secured Fields version you are using. For some callbacks, parameters may differ depending on the version.

onLoad

This callback is invoked when all the iframes that hold secured fields have been created and have loaded their resources.

securedFields.onLoad = function(loadObject){
};

When this callback is invoked, the loadObject includes a parameter iframesLoaded set to true.

onConfigSuccess

This callback is invoked when all the loaded iframes have run their setup code and are ready to be used. 

 If onConfigSuccess doesn't follow onLoad  promptly then something has gone wrong.

securedFields.onConfigSuccess ( function(configSuccessObject){
});

When this callback is invoked, the configSuccessObject includes a parameter iframesConfigured set to true.

onAllValid

This callback is invoked when all secured fields have been filled, validated and encrypted.

securedFields.onAllValid ( function(allValidObject){
});

When this callback is invoked in version 1.2.0 and higher, the allValidObject includes a parameter allValid set to true and a type parameter that returns the payment method type, for example card. In lower versions, txVariant is used instead of type

allValidObject = {allValid : true, type : 'card'}
allValidObject = {allValid : true, txVariant : 'card'}

A field can become invalid after originally validating, for example if a value is changed. If so, the callback is invoked with allValid set to false.

allValidObject = {allValid : false, type : 'card'}
allValidObject = {allValid : false, txVariant : 'card'}

onFieldValid

This callback is invoked as a specific field is validated and encrypted.

securedFields.onFieldValid (function(fieldObject){
});

Examples of passing an encrypted expiry month in a fieldObject:

{  
   "blob":adyenjs_0_1_22$IGaNbdJNru...,
   "encryptedFieldName":"encryptedExpiryMonth",
   "fieldType":"encryptedExpiryDate",
   "uid":card-encrypted-month,
   "valid":true,
   "txVariant":"card",
   "markerNode":div#pmHolder.js-chckt-pm__pm-holder,
   "type":"month"
}
{  
   "blob":adyenjs_0_1_22$IGaNbdJNru...,
   "encryptedFieldName":"encryptedExpiryMonth",
   "fieldType":"encryptedExpiryDate",
   "uid":card-encrypted-month,
   "valid":true,
   "type":"card",
   "markerNode":div#pmHolder.js-chckt-pm__pm-holder,
   "originalFieldType":"month"
}
{
  "singleField": true,
  "fieldType": "hostedExpiryDateField",
  "status": "valid",
  "type": "card",
  "markerNode": :div#pmHolder.js-chckt-pm__pm-holder,
  "originalFieldType": "month"
}

A field can become invalid after originally validating, for example if a shopper changes the input to an invalid value. If so, the valid parameter of the fieldObject is set to false in version 1.2.0 and higher. In lower versions, the status parameter is set to invalid.

Example fieldObject when a field becomes invalid:

{  
   "blob":adyenjs_0_1_22$IGaNbdJNru...,
   "encryptedFieldName":"encryptedExpiryMonth",
   "fieldType":"encryptedExpiryDate",
   "uid":card-encrypted-month,
   "valid":false,
   "txVariant":"card",
   "markerNode":div#pmHolder.js-chckt-pm__pm-holder,
   "type":"month"
}
{  
   "blob":adyenjs_0_1_22$IGaNbdJNru...,
   "encryptedFieldName":"encryptedExpiryMonth",
   "fieldType":"encryptedExpiryDate",
   "uid":card-encrypted-month,
   "valid":false,
   "type":"card",
   "markerNode":div#pmHolder.js-chckt-pm__pm-holder,
   "originalFieldType":"month"
}
{
  "singleField": true,
  "fieldType": "hostedExpiryDateField",
  "status": "invalid",
  "type": "card",
  "markerNode": :div#pmHolder.js-chckt-pm__pm-holder,
  "originalFieldType": "month"
}

The  uid  parameter in version 1.2.0 and higher is a unique identifier created from combining the  txVariant  with the string "encrypted" and  type. So, for example, card-encrypted-month, where card is the txVariant, and month is the type.

It is used as the  id  attribute for the hidden input that is added to the DOM and allows the field to be shown or hidden if invalid.

onBrand

This callback is invoked when the card brand has been identified.  To use this callback for all your supported card brands, configure card types in the cardGroupTypes property.

securedFields.onBrand ( function(brandObject){
});

Example brandObject:

{
  "brandImage": "visa@2x.png",
  "brand": "visa",
  "brandText": "CVV",
  "markerNode": div#pmHolder.js-chckt-pm__pm-holder,// Ref to HTML node for this payment method
}

onError

This callback is invoked when a shopper triggers an error. For example, an invalid card number, invalid expiry date, or incomplete field.

securedFields.onError ( function(errorObject){
});

Example errorObject: 

{
  "markerNode": div#pmHolder.js-chckt-pm__pm-holder,// Ref to HTML node for this payment method,
  "fieldType": "encryptedExpiryDate",
  "error": "validateExpiryDate: card too old"
}

If multiple errors occur, you will receive separate onError callbacks with a different value for error.

If no error occurred, the callback is invoked with an empty string as the value of error:

{
  "markerNode": div#pmHolder.js-chckt-pm__pm-holder,// Ref to HTML node for this payment method,
  "fieldType": "encryptedExpiryDate",
  "error": ""
}

onFocus

This callback is invoked when the iframe is focused (focus event) or loses focus (blur event).

securedFields.onFocus ( function(focusObject){
});

Example focusObject:

{
  "action": "focus",
  "focus": true,
  "fieldType": "encryptedExpiryDate",
  "markerNode": div#pmHolder.js-chckt-pm__pm-holder,// Ref to HTML node for this payment method,
  "txVariant": "card"
}
{
  "action": "focus",
  "focus": true,
  "fieldType": "hostedExpiryDateField",
  "cseKey": "encryptedExpiryDate",
  "markerNode": div#pmHolder.js-chckt-pm__pm-holder,// Ref to HTML node for this payment method,
  "txVariant": "card"
}

When the field loses focus the property focus will have the value false.

onBinValue

This callback is only available starting from version 1.3.1. To migrate to version 1.3.1, see Migrating to 1.3.0 and higher.

This callback is invoked when a shopper types the BIN (first 6 digits) in the credit card number field.

1.3.1 and higher
secureFields.onBinValue ( function(valueObject){
});

Example valueObject:

{
  "binValue": "411111",
  "txVariant": "card"
}