Styling

JavaScript v4

• Current Braintree SDKs
• Android v5
• iOS v7
• JavaScript v3
• Pre-release versions
• JavaScript v4
• Previous Versions
• Android v4
• iOS v6
• JavaScript v2

Style your Hosted Fields containers and the text inside each field so they match the rest of your page.

Hosted Fields defers as much of the styling of field components to you as possible. The layout, width, height, and outer styling, such as border, box-shadow, and background, are left completely in your control. You do this by targeting the elements you supply as containers, for example #card-number { border: 1px solid #333; }, with your current stylesheets. In most cases, you 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. 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 through JavaScript. See the Hosted Fields reference for the full list of supported CSS properties.

Prerequisites

Before you style your Hosted Fields, make sure you have:

• A Hosted Fields instance created with braintree.hostedFields.create().
• Container elements in your HTML for each field you want to style, for example #card-number.

For full setup steps, see Setup and integration.

// ...
const hostedFieldsInstance = await braintree.hostedFields.create({
  // ...
  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'
      }
    }
  }
});
/* ... */

The card number field now displays in monospace font, and the whole form uses a 16-pixel base font size that shrinks to 14 pixels on screens narrower than 700 pixels.

Custom classes

While Hosted Fields manages the internal state and styles of the input fields, it gives you the ability to manage the visual state of your containers through your current stylesheets.

Hosted Fields toggles the following classes on the corresponding container based on the described events.

In your stylesheets, you can include:

#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;
}

The card number container's border color changes from gray to a lighter gray on focus, to red when the field is invalid, and to green when the field is valid.

You can also provide CSS transitions for any allowed property:

// ...
await braintree.hostedFields.create({
  // ...
  styles: {
    'input': {
      'color': '#3A3A3A',
      'transition': 'color 160ms linear',
      '-webkit-transition': 'color 160ms linear'
    },
    ':focus': {
      'color': '#333333'
    },
    '.invalid': {
      'color': '#FF0000'
    }
  }
});

Field text color now transitions smoothly over 160 milliseconds when it changes, for example when a field becomes invalid.