Additional Functions
This page provides information about the additional field functions and instance methods available in the Paysafe JS SDK.
Show Function
The show function loads the Paysafe JS payment methods inside the selected HTML element containers (typically div elements) on your payment page. This function has no parameters.
The function should be invoked immediately after the setup function on the hosted fields instance, which is returned on setup.
Additional Field Functions
These functions return information about a field specified using the following member values:
- cardNumber
- cvv
- expiryDate
- expiryMonth
- expiryYear
These values are case sensitive.
isEmpty
Checks if the customer has entered a value in the selected field.
Returns true if the field is empty.
Example
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 contains valid values.
Example
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 following list:
- cardNumber
- cvv
- expiryDate
- expiryMonth
- expiryYear
Replace <event type> with one of the following:
- focus
- blur
- valid
- invalid
- fieldValueChange
- invalidCharacter
The above field names and event types are case sensitive.
Example
<html>
...
<body>
...
<script>
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields.cvv.focus(function(instance, event) {
this.style.borderColor = "green";
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
The following function shows an alternative shorthand syntax:
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
<html>
...
<body>
...
<script>
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields("cvv cardNumber expiryDate")
.focus(function(instance, event) {
this.style.borderColor = "green";
}).blur(function(instance, event) {
this.style.borderColor = "initial";
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
Additional Instance Methods
areAllFieldsValid
Returns true if all of the fields in the instance are valid.
Example
var isTokenizationAvailable = instance.areAllFieldsValid();
if (!isTokenizationAvailable)
{
alert("Enter your card information before you can pay");
}
else
{
instance.tokenize(options)
.then(result => {
...
})
.catch(error => {
...
});
}
Submit
Provides shorthand subscription to the Submit event. This method has the following signature:
instance.submit(function(instance, event) {
...
})
Example
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script >
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.submit(function(instance, event) {
instance.tokenize(options)
.then(result => {
...
})
.catch(error => {
...
});
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
CardBrandRecognition
Provides shorthand subscription to the CardBrandRecognition event. This method has the following signature:
instance.cardBrandRecognition(function(instance, event) {
...
})
Example
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script >
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.cardBrandRecognition(function(instance, event) {
document.getElementById("cardNumber").style.borderColor = event.data.cardBrand ? "green" : "initial";
});
}
}).catch(error => {
console.log(error);
});
</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
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;
}
unsupportedCardBrand
Provides shorthand subscription to the UnsupportedCardBrand event. Determines whether the customer's card brand is supported by your merchant account.
Supported brands are configured for each account in the Business Portal.
This method has the following signature:
instance.unsupportedCardBrand(function(instance, event) {
...
})
Example
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script >
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.unsupportedCardBrand(function(instance, event) {
alert('The provided card brand is not supported. Please choose another card brand.')
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
badBin
Provides shorthand subscription to the BadBin event.
The BadBin event allows you to salvage a failed payment using an alternative payment method, potentially increasing the success rate of transactions. Paysafe JS identifies card transactions that are likely to be declined and then notifies you so that an alternative payment method can be selected.
You can configure salvage decline rates in the Business Portal.
This method has the following signature:
instance.badBin(function(instance, event) {
...
})
Example
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script >
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.badBin(function(instance, event) {
alert('There is a high chance that the transaction will be declined. Please choose another payment method.')
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>