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
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 contains 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>
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>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>
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 usage:
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 usage:
<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 usage:
<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 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;
}unsupportedCardBrand
Provides shorthand subscription to the UnsupportedCardBrand event.
This function determines whether the account, for which a payment handle will be created, is supported for the merchant.
The supported brands are configured for each account in the Admin Portal.
This method has the following signature:
instance.unsupportedCardBrand(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 >
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.
BadBin event lets you improve the transaction success rate by providing you the ability to salvage a failed payment using an alternate payment method. Paysafe JS’s in-built capabilities identify the card transactions that are likely to be declined and then notify you so you can choose an alternate payment method. This would potentially increase the success rate of the transactions.
The salvage decline rates can be configured in the Merchant Portal.
This method has the following signature:
instance.badBin(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 >
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>