Hosted Fields

Stylinganchor

Hosted Fields defers as much of the styling of field components to you as possible. The layout, width, height, and outer styling (border, box-shadow, background, etc.) are left completely in your control. This is done by targeting the elements you supply as containers (e.g. #card-number { border: 1px solid #333; }) with your current stylesheets. In most cases you will style the containers using the same rules as other inputs on your page.

Typically, input elements calculate their height from font size and line height (and a few other properties), but Hosted Fields requires explicit configuration of height. Make sure you style the height of your containers in your stylesheets.

The "internal" styling of the field components (meaning the text) is configured via JavaScript. See Hosted Fields internal styling properties for the list of supported CSS properties.

  1. JavaScript
// ...
hostedFields: {
  styles: {
    // Style all elements
    'input': {
      'font-size': '16px',
      'color': '#3A3A3A'
    },

    // Styling a specific field
    // Custom web fonts are not supported. Only use system installed fonts.
    '.number': {
      'font-family': 'monospace'
    },

    // Styling element state
    ':focus': {
      'color': 'blue'
    },
    '.valid': {
      'color': 'green'
    },
    '.invalid': {
      'color': 'red'
    },

    // Media queries
    // Note that these apply to the iframe, not the root window.
    '@media screen and (max-width: 700px)': {
      'input': {
        'font-size': '14px'
      }
    }
  },
  number: { selector: '#card-number-input' },
  cvv: { selector: '#cvv-input' },
  // ...
}
// ...
Custom classesanchor

While Hosted Fields manages the internal state and styles of the input fields, we provide the ability to manage the visual state of your containers via your current stylesheets.

The following classes are toggled on the corresponding container based on their described events.

Class name Description
braintree-hosted-fields-focused When the input receives and loses focus.
braintree-hosted-fields-invalid When the value of the input changes between invalid and valid.
braintree-hosted-fields-valid When the value of the input becomes complete and valid.
For example, a card number of "4111111111111111".

In your stylesheets, you can include:

  1. CSS
#card-number {
  border: 1px solid #333;
  -webkit-transition: border-color 160ms;
  transition: border-color 160ms;
}

#card-number.braintree-hosted-fields-focused {
  border-color: #777;
}

#card-number.braintree-hosted-fields-invalid {
  border-color: tomato;
}

#card-number.braintree-hosted-fields-valid {
  border-color: limegreen;
}

Hosted Fields also allows you to provide CSS transitions for any allowed properties:

  1. JavaScript
var colorTransition = 'color 160ms linear';

braintree.setup(/* ... */, {
  hostedFields: {
    styles: {
      'input': {
        'color': '#3A3A3A',
        'transition': colorTransition,
        '-webkit-transition': colorTransition
      },
      ':focus': { color: '#333333' },
      '.invalid': { color: '#FF0000' }
    },
    number: { selector: '#card-number-input' },
    cvv: { selector: '#cvv-input' },
    // ...
  }
});

See also


Next Page: Events →