Events

Field Events

After the SDK is initialized successfully, one can subscribe to various events for each input field. There are two ways to subscribe to field events:

• For a single field:

instance.fields.<fieldname>.on(eventTypes, eventHandler);

• For multiple fields:

instance.fields(fieldNames).on(eventTypes, eventHandler);

Function arguments are the following:

Argument	Type	Description
fieldName	string	One of the following field names: cardNumber, cvv, expiryDate, cardholder, email, consent
fieldNames	string	Space separated field names
eventTypes	string	Space separated field names among the following list: focus, blur, valid, invalid, fieldValueChange, invalidCharacter
eventHandler	(instance, event, error) => void	Event handler function

Examples for field event handling:

instance.fields.cardNumber.on('focus blur', (_, event) => {
  // Handle focus and blur events for card number field
});

instance.fields('cardNumber cvv')
    .on('focus blur', (_, event) => {
  // Handle focus and blur events for card number and CVV fields
});

Instance Events

Similarly, there are Skrill JS instance events. Again, there are two ways to subscribe to them:

• For a single event:

instance.<eventType>(eventHandler);

• For multiple events:

instance.on(eventTypes, eventHandler);

Function arguments are the following:

Argument	Type	Description
eventType	string	One of the following event types: cardBrandRecognition, submit, unsupportedCardBrand
eventTypes	string	Space separated event types
eventHandler	(instance, event, error) => void	Event handler function

Examples for instance event handling:

instance.submit((_, event) => {
  // Handle submit event
});

instance.on('submit', (_, event) => {
  // Handle submit event
});

All events have the following properties:

Property	Type	Description
type	string	Event type (as described above)
target.fieldName	string	Field name for which the event is triggered
target.containerElement	HTMLElement	HTML element (on the Merchant's website) for which the event is triggered
data.isEmpty	boolean	Shows whether the field is empty
data.cardBrand	string	Contains the determined card brand, applicable for Card number field only

Examples of event payload:

{
  "type": "Focus",
  "target": {
    "fieldName ": "Cvv",
    "containerElement": <reference to CVV HTML element>
  },
  "data": {
    "isEmpty": true
  }
}
{
  "type": "CardBrandRecognition",
  "target": {
    "fieldName ": "CardNumber",
    "containerElement": <reference to card number HTML element>
  },
  "data": {
    "isEmpty": false,
    "cardBrand": "Visa"
  }
}