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;
}
Did you find this page useful?