Additional Functions
This section details the additional functions available in the Paysafe.js SDK.
Additional Field Functions
These functions return information about a field specified using the following member values:
- cardNumber
- cvv
- expiryDate
- expiryMonth
- expiryYear
This value is case sensitive
isEmpty
Checks if the customer has entered a value in the selected field.
Returns true if the field is empty.
Example usage:
var isEmpty = instance.fields.cvv.isEmpty();
isValid
Checks whether the customer has entered a valid value in the selected field.
Returns true if the field contain valid values.
Example usage:
var isValid = instance.fields.cvv.isValid();
Shorthand Event Registration
Shorthand event registration allows you to subscribe to an event from a single field or from a list of fields separated by spaces.
The signature for this function is as follows:
instance.fields.<fieldname>.<event type>(function(instance, event) {
...
})
Replace <fieldname> with a single value from the list below:
- cardNumber
- cvv
- expiryDate
- expiryMonth
- expiryYear
This value is case sensitive.
Replace <event type> with one of the following event types:
- focus
- blur
- valid
- invalid
- fieldValueChange
- invalidCharacter
This value is case sensitive
Example usage:
<html>
...
<body>
...
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.fields.cvv.focus(function(instance, event) {
this.style.borderColor = "green";
});
}
});
</script>
</body>
</html>
There is an alternative shorthand syntax using the following function:
instance.fields(fieldname).<event type>(function(instance, event) {
...
})
fieldname is a string representing the field (or fields) to subscribe to an event from. Alternatively, you can specify multiple fields separated by spaces to subscribe to an event from all listed fields.
This value is not case sensitive
Example usage:
<html>
...
<body>
...
<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").focus(function(instance, event) {
this.style.borderColor = "green";
}).blur(function(instance, event) {
this.style.borderColor = "initial";
});
}
});
</script>
</body>
</html>
Additional Instance Methods
areAllFieldsValid
Returns true if all of the fields in the instance are valid.
Example usage:
var isTokenizationAvailable = instance.areAllFieldsValid();
if (!isTokenizationAvailable)
{
alert("Enter your card information before you can pay");
}
else
{
instance.tokenize(function(instance, error, result) {
console.log(result.token);
});
}
Submit
Provides shorthand subscription to the Submit event. This method has the following signature:
instance.submit(function(instance, event) {
...
})
Example usage:
<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.cardBrandRecognition(function(instance, event) {
document.getElementById("cardNumber").style.borderColor = event.data.cardBrand ? "green" : "initial";
});
}
});
</script>
</body>
</html>
CardBrandRecognition
Provides shorthand subscription to the CardBrandRecognition event. This method has the following signature:
instance.cardBrandRecognition(function(instance, event) {
...
})
Example usage:
<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.cardBrandRecognition(function(instance, event) {
document.getElementById("cardNumber").style.borderColor = event.data.cardBrand ? "green" : "initial";
});
}
});
</script>
</body>
</html>
getCardBrand
This function determines the current card brand from the card number entered by the customer, or returns undefined if no brand is recognized.
Example usage:
var cardBrand = instance.getCardBrand();
switch (cardBrand) {
case "American Express":
...
break;
case "MasterCard":
...
break;
case "Visa":
...
break;
case "Diners Club":
...
break;
case "JCB":
...
break;
case "Maestro":
...
break;
}