Event Handling
Subscribe to Field Events
This function is used to subscribe to events emitted by a Paysafe.js field or fields.
The function signature is as follows:
instance.fields(fieldname).on(events, function(instance, event) {
...
})
The function signature contains the following parameters:
| Parameter | Required | Type | Description |
|---|---|---|---|
| events | true | string | An event name or a list of event names separated by spaces to which the listener applies:
This parameter is case insensitive. |
| fieldname | true | string | The field—or fields separated by spaces—producing events to which to subscribe:
This parameter is case insensitive |
| callback | true | function | Callback function invoked when an event occurs. |
| {return} | true | object | The fields handler from which the method was invoked. |
An example is shown below:
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.fields("cvv cardNumber expiryDate").on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
});
</script>
</body>
</html>
The supported events are listed below:
| Event | Description |
|---|---|
| Focus | A field has been selected and ready to receive input. |
| Blur | A field has been deselected. |
| Valid | A field now contains a valid value. |
| Invalid | A field does not contain a valid value. |
| FieldValueChange | The customer has changed a field's value. |
| InvalidCharacter | The customer has attempted to input a character that is not accepted by this field (for example an alphabetic character) |
Alternative Method of Subscribing to Events
You can also subscribe to events using the alternative syntax shown in the function signature below:
instance.fields.<fieldname>.on(events, function(instance, event) {
...
})
Replace <fieldname> with a single value from the list below:
- cardNumber
- cvv
- expiryDate
- expiryMonth
- expiryYear
The names above are case sensitive.
The rest of the function has the same as the standard syntax; for example:
<html>
...
<body>
...
<script>
paysafe.fields.setup("my Bas64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.fields.cvv.on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
});
</script>
</body>
</html>
Subscribe to Instance Events
This function is used to subscribe to events emitted by the Paysafe.js instance. It has the following signature:
instance.on(events, function(instance, event) {
...
})
The function signature contains the following parameters:
| Parameter | Required | Type | Description |
|---|---|---|---|
| events | true | string | An event name—or a list of event names separated by spaces—to which the listener applies; either:
This parameter is case insensitive |
| callback | true | function | Callback function invoked when the event occurs. |
| {return} | true | object | The instance from which the method was invoked. |
An example is shown below:
<html>
...
<body>
<div id = "cardNumber" paysafe = "card-number"></div>
<div id = "cvv" paysafe = "cvv"></div>
<div id = "expiryDate" paysafe = "expiry-date"></div>
<script >
paysafe.fields.setup("my Base64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.on("Submit", function(instance, event) {
document.getElementById("pay-button").disabled = instance.areAllFieldsValid();
});
}
});
</script>
</body>
</html>
The supported instance events are listed below:
| Event | Description |
|---|---|
| CardBrandRecognition | The card brand is recognized from the card number entered. |
| Submit | The customer pressed "Enter" while one of the fields is focused. |
Callback
The callback function has the following signature
function callback(instance, event) {
...
}
The function signature contains the following parameters:
| Parameter | Required | Type | Description |
|---|---|---|---|
| instance | true | object | Paysafe.js instance in which the event occurred. |
| event | true | object | Information about the event. |
| event | |||
| type | true | string | Type/name of the event. |
| target | true | object | The Paysafe.js field element that caused the event. |
| data | true | object | Information about the field state. |
| target | |||
| fieldName | true | string | Field name of the Paysafe.js field element. |
| containerElement | true | HTMLElement | HTML container of the iframe. |
| data | |||
| isEmpty | true | boolean | true if the field value is empty. |
| cardBrand | true | string | Type of the card if recognized, or undefined if not Supported card types:
|
| {return} | false | any | No specific behavior associated with the return value. |
| {context} | true | HTMLElement | The iframe container of the field in which the event occurred. |
List of errors thrown on registering for events:
Code | Display Message | Detailed Message | Description |
|---|---|---|---|
| 9005 | There was an error (9005), please contact our support. | Events should be string. | The supplied events parameter is not a string. |
| 9008 | There was an error (9008), please contact our support. | Missing events configuration. | No events are specified, or events is an empty string or contains only spaces. |
| 9009 | There was an error (9009), please contact our support. | Event with name ${eventName} is not supported. |