IntegrateHosted Fields

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

Card form

ACH form

ACH form

PAD 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:

1styles: {
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.
1styles: {
2    disableDefaultStyles: true,
3    css: {
4      // Custom styles
5      },
6    },

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

1css: {
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  },
  • 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
  • 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:

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

Subscribe to the event

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

1cardForm.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.