Step 4: Add styling

Manually Providing CSS

The object you pass to the create function of the HostedFields library supports a second property called styles. There, you can provide all the CSS styles needed to render the forms in your design. E.g:

At this point your form should be rendered and visible on your webpage.

Whenever an input is considered invalid we will add invalid className to the class attribute of the input. If the input is considered valid we will add valid className to the class attribute.

Automatically Detecting your CSS

If you don't want to provide the CSS Manually, we can detect it automatically for you. In order for this to work you need to provide us the input's HTML with already applied styles/classes and use useTargetStyle flag inside the field config. E.g:

In the above example we create an input with our own styles (provided by the classes form-control and my-input-clss) and an id card-number-input, then we inform the config that this element (#card-number-input) will be the target element for the iframe providing the card number input and that it needs to use its styles to render the input. And you are ready to go, the iframe will copy your styles and apply them for you.

Keep in mind that your original input element will be removed and the iframe will be inserted inside its parent. In the example above the parent is div#card-number.

Manually Providing CSS#

Automatically Detecting your CSS#

Manually Providing CSS

Automatically Detecting your CSS