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>

Did you find this page useful?