Hosted Fields

Events

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

// ...
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:

Card type

With each fieldStateChange event, we will return a Card Type to describe the current user input. If not enough information is available, or if there is invalid data, this value will be null.

Internal styling properties

These are the CSS properties that we support inside of our iframes. Any other CSS should be specified on your page and outside of any Braintree configuration. Trying to set unsupported properties will fail and put a warning in the console.

The following properties are supported in versions 2.18.0 and above:

Options

Top-level options

Inside the hostedFields configuration, the full list of options you can specify are:

* Only required when creating, saving, or using card information that is not stored in the Vault yet. When verifying cards already in the Vault, you can collect just the cvv.

Field-level options

Inside number, expirationDate, expirationMonth, expirationYear, cvv, and postalCode, you can specify: