# Customize Hosted Fields
source: https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-session/integrate-hosted-session/customize-hosted-fields/index.md
If you are using the Hosted Session integration method, you have various ways of customizing the hosted payment fields on your payment page. The customizations can help you match the look and feel of your payment page and improve your web site accessibility.
## Styling hosted fields {#styling-hosted-fields}
You can style hosted payment fields to match the look and feel of your overall payment page.
You can invoke the following functions in the Session JavaScript library(session.js) for styling payment fields:
* `setFocus( )`: Sets focus on the specified hosted field.
* `setFocusStyle( )`: Sets the styling attributes for the specified hosted fields when they gain focus.
* `setHoverStyle( )`: Sets the styling attributes for the specified hosted fields when a mouse hover occurs over them.
* `setPlaceholderStyle( )`: Sets the styling attributes for the placeholder text displayed on the specified hosted fields before the payer replaces it with their own entry.
* `setPlaceholderShownStyle( )`: Sets the styling attributes for the specified hosted fields when the placeholder text is visible.
### Payment field styling example {#payment-field-styling-example}
```javascript
PaymentSession.setFocus('card.number');
PaymentSession.setFocusStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setHoverStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setPlaceholderStyle(["card.number", "card.nameOnCard"], {
color: 'blue',
fontWeight: 'bold',
textDecoration: 'underline'
});
PaymentSession.setPlaceholderShownStyle(["card.number", "card.nameOnCard"], {
color: 'green',
fontWeight: 'bold',
textDecoration: 'underline'
});
```
## Using drop-down fields {#using-drop-down-fields}
If you are supporting credit card payments, you can use drop-down values for the hosted fields defining the card expiry month and year.
The following sample code shows how to define the drop-down fields within your payment page's hosted fields for a credit card payment.
### Drop-Down Field Example {#drop-down-field-example}
```html
Enter your payment details:
Card Number:
Expiry Month:
Expiry Year:
Security Code:
Cardholder Name:
```
## Configure accessibility {#configure-accessibility}
The Hosted Session provides functionality to improve the accessibility of your web site. For more information on web site accessibility, see the [WCAG 2 Overview](https://www.w3.org/WAI/standards-guidelines/wcag/).
### Setting the payment page language {#setting-the-payment-page-language}
To set the language of your overall payment page, add the lang attribute to the `` element. Defining the page language helps assistive technologies render the text more accurately.
```html
```
### Setting the hosted field locale {#setting-the-hosted-field-locale}
To define the locale (language and region) of your hosted fields, add the locale argument to the PaymentSession.configure() function used to configure your session.
When you define the hosted field locale, the Session JavaScript library provides applicable translations for all the textual elements related to the hosted fields, including hidden labels and error messages. If the locale is not set, it defaults to English (en_US).
The supported locale values are de_DE, el_GR, en_US, es_MX, es_ES, fr_CA, fr_FR, it_IT, ja_JA, pl_PL, pt_BR, ro_RO, and zh_CN.
Warning: To avoid confusing your payers, make sure that the language of the payment page (lang attribute) matches the locale of the hosted fields.
```javascript
PaymentSession.configure({
fields: {
card: {
nameOnCard: cardHolderNameField ? "#card-holder-name" : null,
number: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year"
}
},
frameEmbeddingMitigation: ["javascript"],
locale: "en_US",
callbacks: {
// Define your callback functions here
}
});
```
### Improving the user experience for hosted fields {#improving-the-user-experience-for-hosted-fields}
The following options allow you to better control the user experience for payers with accessibility needs:
* Setting the iFrame title
The hosted field's iFrame title attribute can be controlled using the title attribute on the field. The title represents advisory information for the field, such as a tooltip.
* Setting ARIA (Accessibility Rich Internet Application) attributes
The Hosted Session supports various aria-\* attributes, which you can use to allow assistive technologies to help the payer. For example, the aria-label attribute provides a label that assistive technology can read to identify the hosted field for the payer.
* Setting the display parameter for invalid characters
Consider accepting all characters in hosted fields for a better user experience when using assistive technology. To do this, set `interaction.displayControl.invalidFieldCharacters=ALLOW` within the configuration object argument of the [PaymentSession.configure()](https://developer.mastercard.com/mastercard-gateway/documentation/api-reference/js-libraries/session/index.md) function.
* Setting hidden label and error messages
All hosted fields contain a hidden label and all mandatory hosted fields contain a hidden error message. Any errors resulting from invoking the [PaymentSession.updateSessionFromForm()](https://developer.mastercard.com/mastercard-gateway/documentation/api-reference/js-libraries/session/index.md) function raise an error message label. You can additionally raise your own errors using the [PaymentSession.setMessage()](https://developer.mastercard.com/mastercard-gateway/documentation/api-reference/js-libraries/session/index.md) function.
For example, the hidden label for the card number field is **card number** . The hidden error message for missing card number is **card number is missing, enter the value** . The hidden error message for invalid card number is **card number is invalid, enter the correct value**. While tabbing between the hosted fields, the screen reader reads only the hidden label and hidden error message, not the actual label or error message displayed on the page.
### Hosted Field Accessibility Example {#hosted-field-accessibility-example}
```html
Enter your payment details:
Cardholder Name:
Card Number:
Expiry Month:
Expiry Year:
Security Code:
```
## Handling field focus {#handling-field-focus}
The default HTML5 auto-focus behavior does not work with hosted fields: when the payer clicks the label, the focus is not automatically moved to the corresponding input element.
To ensure correct focus functionality on your page, use the `setFocus()` function of the Session JavaScript library.
Warning: Hosted fields are not web accessible when using Internet Explorer 11 in combination with the SuperNova screen reader.