Styling your Hosted Fields

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:

1 styles: {
2     disableDefaultStyles: true,
3     css: {
4       "button[type='submit']": {
5         'background-color': '#d72d2d',
6         'border-color': '#d72d2d',
7       },
8     },
9 }

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.

1 styles: {
2     disableDefaultStyles: true,
3     css: {
4       // Custom styles
5       },
6     },

Default CSS

If you add custom styles to your CSS, we recommend that you copy our default CSS and make your changes to it.

1 css: {
2     body: {
3       margin: "0",
4     },
5     form: {
6       display: "flex",
7       "align-items": "center",
8     },
9     input: {
10       "line-height": "2",
11       "box-sizing": "border-box",
12       border: "1px rgb(158, 158, 158) solid",
13       width: "100%",
14       height: "100%",
15       padding: "8px",
16       "border-radius": "5px",
17       "background-color": "#FFF",
18       color: "rgb(99, 99, 99)",
19       "text-align": "left",
20       "font-size": "0.8rem",
21     },
22     label: {
23       padding: "8px 0",
24       "font-family": "Arial",
25       "font-size": "0.8rem",
26       display: "inline-block",
27     },
28     ":focus": {
29       outline: "none",
30     },
31     "::placeholder": {
32       color: "rgb(158, 158, 158)",
33     },
34     "input[type='text']": {
35       "min-height": "45px",
36     },
37     "::before": {
38       content: "",
39       width: "1rem",
40       height: "1rem",
41       "flex-basis": "1",
42       "border-radius": "50%",
43       transform: "scale(0)",
44       "transform-origin": "center center",
45       transition: "60ms transform ease-in-out",
46       "box-shadow": "inset 1rem 1rem rgb(23, 134, 97)",
47     },
48     ":checked::before": {
49       transform: "scale(1)",
50       "transform-origin": "center center",
51       width: "23px",
52       color: "red",
53       outline: "1px black solid",
54       "line-height": "2",
55     },
56     button: {
57       "background-color": "rgb(23, 134, 97)",
58       color: "#FFF",
59       border: "1px rgb(23, 134, 97) solid",
60       "border-radius": "8px",
61       width: "100%",
62       "text-align": "center",
63       "min-height": "45px",
64       padding: "8px",
65     },
66     div: {
67       margin: "0",
68       display: "flex",
69       "align-items": "center",
70       "justify-content": "center",
71       "margin-left": "8px",
72     },
73     'input[type="radio"]': {
74       "line-height": "unset",
75       "box-sizing": "content-box",
76       appearance: "none",
77       "background-color": "#fff",
78       margin: "0",
79       "border-radius": "50%",
80       width: "1.5rem",
81       height: "1.5rem",
82       "border-color": "rgb(158, 158, 158)",
83       color: "rgb(23, 134, 97)",
84       display: "flex",
85       "justify-content": "center",
86       "align-items": "center",
87       "flex-direction": "column",
88       padding: "unset",
89       "min-height": "unset",
90       "margin-right": "5px",
91     },
92     'input[type="radio"]::before': {
93       content: "'.'",
94       width: "1rem",
95       height: "1rem",
96       "flex-basis": "1",
97       "border-radius": "50%",
98       transform: "scale(0)",
99       "transform-origin": "center center",
100       transition: "60ms transform ease-in-out",
101       "box-shadow": "inset 1rem 1rem rgb(23, 134, 97)",
102     },
103     'input[type="radio"]:checked::before': {
104       transform: "scale(1)",
105       "transform-origin": "center center",
106     },
107     "input.invalid": {
108       color: "#d72d2d",
109       "border-color": "#d72d2d",
110     },
111     ".loading-svg": {
112       display: "none",
113       color: "rgb(255, 255, 255)",
114     },
115     ".button-text": {
116       display: "inline-block",
117     },
118     ".loading .loading-svg": {
119       display: "inline-block",
120     },
121     ".loading .button-text": {
122       display: "none",
123     },
124     ".spin": {
125       animation: "spin 1s linear infinite",
126     },
127     "@keyframes spin": {
128       to: {
129         transform: "rotate(1turn)",
130       },
131     },
132     "button:hover": {
133       cursor: "pointer",
134     },
135   },

Supported CSS elements

animation
align-items
appearance
background-color
border-color
border-radius
border
box-shadow
box-sizing
color
content
direction
display
flex-basis
flex-direction
float
font-family
font-size
font-style
font-weight
font
height
justify-content
letter-spacing
line-height
margin-bottom
margin-left
margin-right
margin-top
margin
max-width
min-height
opacity
outline
padding-bottom
padding-left
padding-right
padding-top
padding
text-align
text-shadow
transform-origin
transform
transition
width

Supported HTML elements

button[type=“submit”]::after
button[type=“submit”]::before
button[type=“submit”]:active
button[type=“submit”]:after
button[type=“submit”]:before
button[type=“submit”]:checked
button[type=“submit”]:disabled
button[type=“submit”]:enabled
button[type=“submit”]:focus
button[type=“submit”]:hover
button[type=“submit”]:indeterminate
button[type=“submit”]:not(:checked)
input[type=“radio”]:active
input[type=“radio”]:checked::before
input[type=“radio”]:checked
input[type=“radio”]:disabled
input[type=“radio”]:enabled
input[type=“radio”]:focus
input[type=“radio”]:hover
input[type=“radio”]:indeterminate
input[type=“radio”]:not(:checked)
input[type=“submit”]::after
input[type=“submit”]::before
input[type=“submit”]:active
input[type=“submit”]:after
input[type=“submit”]:before
input[type=“submit”]:checked
input[type=“submit”]:disabled
input[type=“submit”]:enabled
input[type=“submit”]:focus
input[type=“submit”]:hover
input[type=“submit”]:indeterminate
input[type=“submit”]:not(:checked)
input[type=“text”]:active
input[type=“text”]:checked
input[type=“text”]:disabled
input[type=“text”]:enabled
input[type=“text”]:focus
input[type=“text”]:hover
input[type=“text”]:indeterminate
input[type=“text”]:not(:checked)
.button-text
.invalid
.loading .button-text
.loading .loading-svg
.loading-svg
.spin
.valid
body
button::after
button::before
button:active
button:after
button:before
button:checked
button:disabled
button:enabled
button:focus
button:hover
button:indeterminate
button:not(:checked)
button
button[type=‘submit’]
div:first-of-type
div
fieldset
form
input.invalid
input.valid
input
input[type=‘radio’]::after
input[type=‘radio’]::before
input[type=‘radio’]:after
input[type=‘radio’]:before
input[type=‘radio’]
input[type=‘submit’]
input[type=‘text’]::after
input[type=‘text’]::before
input[type=‘text’]:after
input[type=‘text’]:before
input[type=‘text’]
label

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:

Default fieldValidityChange event

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:

1 styles: {
2     disableDefaultStyles: true,
3     css: {
4       "input.invalid": {
5             "border-color": "#335bff"
6         }
7       },
8     }

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

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

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:

1 {
2     "field": "cardNumber",
3     "validationError": "Card number must contain numbers only"
4 }

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