We provide you with default styles in Hosted Fields, but you can remove the default styles and add your own custom styles to match the look and feel of the merchant's website. Our styling options include the following:

Default styles
Custom styles
fieldValidityChange event

Default styles

Our default styles render your form to look like the following:

Card form

ACH form

PAD form

Custom styles

To change the look and feel of the form, update your CSS, for example, the following code changes the color of the submit button on the form to red:

styles: {
    disableDefaultStyles: true,
    css: {
      "button[type='submit']": {
        'background-color': '#d72d2d',
        'border-color': '#d72d2d',
      },
    },
}

Remove the default styles

To remove the default styles, add a styles object to the config of the Hosted Fields JavaScript library with the following:

A disableDefaultStyles parameter with a value of true.
Your custom styles.

styles: {
    disableDefaultStyles: true,
    css: {
      // Custom styles
      },
    },

fieldValidityChange event

If a customer enters an incorrect value, our default styles apply a red border and text with more information about the error, for example:

To change the style when the customer enters a correct value or an incorrect value in the Hosted Fields, subscribe to the fieldValidityChange event and update your CSS with:

A disableDefaultStyles parameter with a value of true.
Your custom styles.

For example, to change the default red border to a blue border for incorrect information, include the following code in your CSS:

styles: {
    disableDefaultStyles: true,
    css: {
      "input.invalid": {
            "border-color": "#335bff"
        }
      },
    }

Subscribe to the event

To subscribe to the fieldValidityChange event, add an event listener to your form, for example:

cardForm.on("fieldValidityChange", ({ field, ValidationError }) => {
  
});

Handle the response

If the customer enters a value and triggers the event, you receive a response that contains the name of the field that triggered the event and the validation error. If the customer enters a letter in the card number field, the event returns the following:

{
    "field": "cardNumber",
    "validationError": "Card number must contain numbers only"
}

If you change the styles to highlight a valid entry, we return a value of undefined for the validationError field.

Styling your Hosted Fields