Hosted Fields

Events

You can subscribe to events using the onFieldEvent callback. This allows you to hook into focus, blur, and fieldStateChange.

  1. Javascript
// ...
hostedFields: {
  onFieldEvent: function (event) {
    if (event.type === 'focus') {
      // Handle focus
    } else if (event.type === 'blur') {
      // Handle blur
    } else if (event.type === 'fieldStateChange') {
      // Handle a change in validation or card type
      console.log(event.isValid); // true|false
      if (event.card) {
        console.log(event.card.type);
        // visa|master-card|american-express|diners-club|discover|jcb|unionpay|maestro
      }
    }
  }
}
// ...

The event object will return the following:

KeyTypeDescription
typeString
focusFired when the input becomes focused
blurFired when the input loses focus
fieldStateChangeWhen any state has changed within an input including: validation, focus, card type detection, etc.
isEmptyBooleanWhether or not the user has entered a value in the input
isFocusedBooleanWhether or not the input is currently focused
isPotentiallyValidBooleanA determination based on the future validity of the input value. This is helpful when a user is entering a card number and types "41". While that value is not valid for submission, it is still possible for it to become a fully qualified entry. However, if the user enters "4x" it is clear that the card number can never become valid and isPotentiallyValid will return false.
isValidBooleanWhether or not the value of the associated input is fully qualified for submission
targetObject
containerReference to the container DOM element on your page associated with the current event.
fieldKey A String mapping to the currently associated field:
"number"

"cvv"

"expirationDate"

"expirationMonth"

"expirationYear"

"postalCode"
cardObjectThe determined card type. Learn more about card type.

If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more