Hosted Fields

Eventsanchor

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:

Key Type Description
type String
focus Fired when the input becomes focused
blur Fired when the input loses focus
fieldStateChange When any state has changed within an input including: validation, focus, card type detection, etc.
isEmpty Boolean Whether or not the user has entered a value in the input
isFocused Boolean Whether or not the input is currently focused
isPotentiallyValid Boolean A 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.
isValid Boolean Whether or not the value of the associated input is fully qualified for submission
target Object
container Reference 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"

card Object The determined card type. Learn more about card type.

Next Page: Troubleshooting and FAQ