Hosted Fields Details and Examples

Styling

Hosted Fields give you complete control over your form style and layout.

The layout and outer styling are handled the same way you would style the rest of your page.

However, for security reasons, the input field text is styled via JavaScript as part of the field configuration. Only a subset of CSS properties are supported for styling the input field text. See library reference for a complete list of supported CSS properties.

Combining these two ways of styling will allow you to completely customise your form UI. Let's take a look at how this could be implemented.

Style Object

Input text styles are defined as part of the JavaScript configuration. The syntax is similar to regular CSS. See style object reference for further details.

// Define input styles
var styles = {
	// Base input styles
  input: {
    color: '#111827',
		'font-size': '14px',
		// Custom web fonts are not supported. Only system installed fonts.
    'font-family': 'system-ui, -apple-system, BlinkMacSystemFont',
  },
	// Placeholder style
  '::placeholder': {
    color: '#757575',
  },
	// Style for different states
  '.invalid': {
    color: 'red',
  },
	'.valid': {
    color: 'green'
  },
  ':focus': {
    color: '#111827'
  },
	// Media queries
  // Note that these are based on the iframe size, not the root window.
  '@media screen and (min-width: 400px)': {
    input: {
      'font-size': '16px',
    },
  },
};

// Create hosted field
var hostedFields = assembly.hostedFields();
var cardName = hostedFields.create('cardName', { styles });
cardName.mount('#card-name-field');

<div id="card-name-field" class="hosted-field"></div>

Container Styles

The input container styles can be defined however you usually author CSS. The Hosted Fields library allows you to style the field container based on the field state, by dynamically applying CSS classes to the container element.

Usually, input elements can calculate their height based on their other styles, however with Hosted Fields you need to explicitly set the height value.

.hosted-field {
  height: 32px;
  padding: 0 12px;
  margin-bottom: 10px;
  border: 1px solid #bdbdbd;
}
// Style container based on field state
.hosted-field-invalid {
  border-color: red;
}
.hosted-field-valid {
  border-color: green;
}
.hosted-field-focus {
  border-color: purple;
}

Events and Validation

You can communicate with your Hosted Fields by listening to an event. This allows you to update your UI based on the field state. Hosted Fields are validated as the user input changes. The change event returns an object that describes the state of the field, along with any errors. See library reference for complete details about events.

Here's an example of how you could display errors as the user types, by listening to the change event:

<div id="card-number-field"></div>
<div class="error"></div>

var hostedFields = assembly.hostedFields();
var cardNumber = hostedFields.create('cardNumber');
cardNumber.mount('#card-number-field');
var errorElement = document.querySelector('.error');

cardNumber.on('change', function(event) {
  if (event.error) {
    errorElement.innerText = event.error.message;
  } else {
    errorElement.innerText = '';
  }
});

Examples

Here are some examples of forms created with Hosted Fields. The examples are hosted on CodePen so you can view the code and try out customising them for yourself.

Card example

This is an example of a card capture form with some basic styling.

Bank account example

This is an example of a bank account capture form with some basic styling.

Card example - form style based on card brand

This is an example of a card capture form with richer control over style and layout. Furthermore, it illustrates further customisation where the form style will change based on the card brand identified. Try inputting sample card numbers in this form, starting with:

41 (Visa)
51 (Mastercard)
34 (Amex)