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 later, 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

Version 1.2.0 and later: 

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

Version 1.1.4:

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.

Version 1.2.0 and later: 

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

Version 1.1.4:

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

onFieldValid

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

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

The endDigits property is included for type:encryptedCardNumber from version 1.5.2 and later:

{ 
   "blob":adyenjs_0_1_22$IGaNbdJNru...,
   "encryptedFieldName":"encryptedCardNumber",
   "fieldType":"encryptedCardNumber",
   "uid":"card-encrypted-encryptedCardNumber",
   "valid":true,
   "txVariant":"card",
   "endDigits":1111,
   "markerNode":div#pmHolder.js-chckt-pm__pm-holder,
   "type":"encryptedCardNumber"
}

Examples of passing an encrypted expiry month in a fieldObject:

Version 1.3.0 and later:

{  
   "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"
}

Versions 1.2.0 and 1.2.1:

{  
   "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"
}

Version 1.1.4: 

{
  "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 later. In lower versions, the status parameter is set to invalid.

Example fieldObject when a field becomes invalid:

Version 1.3.0 and later:

{  
   "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"
}

Versions 1.2.0 and 1.2.1: 

{  
   "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"
}

Version 1.1.4:

{
  "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 later 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:

Version 1.2.0 and later:

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

Version 1.1.4:

{
  "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 later.

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

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

Example valueObject:

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