Allows you to select whether an icon should be displayed in this field.

Example:

<script>
    window.enVGSFields = {
      ‘transaction.ccnumber’: { showCardIcon: false },
      ‘transaction.ccvv’: { showCardIcon: false }
    }
</script>

Allows you to style the field using a standalone Cascading Style Sheet.

Supported via this method is:

• Regular CSS properties
• Placeholders
• Generic Web Fonts and @font-face property
• Pseudo-classes (eg. :hover, :focus)
• Media queries (media query condition is calculated based on the iframe width, not on the parent window)

There are also some additional classes available that are mapping the current state of the field, and which are inherited from the main styles.

You can style any of the following field states by adding a selector to the css object:

& .invalid – applied when the field has invalid value.
& .valid – applied when the field has a valid value.
& .empty – applied when the field doesn’t have any value.
& .dirty – applied once the user changed the value in the watched field.
& .touched – indicates that the field has been touched, applied after the first blur event.

Example

<script>
    window.enVGSFields = {
        ‘transaction.ccnumber’: {
            css: {
                color: ‘#1b1d1f’,
                border: ‘solid 1px #1b1d1f’,
                transition: ‘border-color .15s ease-in-out’,
                borderRadius: ‘5px’,
                padding: ‘0 10px’,
                boxSizing: ‘border-box’,
                ‘&:focus’: {
                    borderColor: ‘#11bef5’,
                }
            }
        }
    }
</script>

Specifies whether a field should automatically get focused when the page loads.

By default, each field has its own aria-label value, but you can redefine it and specify the purpose for better accessibility.

Placeholder text for a field.

Enables or disables the hiding of the input value for a field as it is being typed.

Override the default icons presented to the user with your own designs. Images must be provided as inline data URLs.

The following are the supported properties:

• cardPlaceholder: card icon for empty and undefined card brand states.
• cvvFront: card icon for the front (amex) CVV.
• cvvBack: card icon for the back CVV.
• visa|amex|maestro|visaelectron|mastercard|discover|dankort|dinersclub|jcb|unionpay|forbrugsforeningen|elo|hipercard: card icons for a particular brand.

Example 1

<script>
    window.enVGSFields = {
        ‘transaction.ccnumber’: {
            icons: {
                cardPlaceholder: “data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ height=’24px’ viewBox=’0 0 24 24′ width=’24px’ fill=’%233BBF45’%3E%3Cpath d=’M0 0h24v24H0z’ fill=’none’/%3E%3Cpath d=’M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z’/%3E%3C/svg%3E”
            }
        }
    }
</script>

Example 2

<script>

    window.enVGSFields = {
        ‘transaction.ccnumber’: {
            icons: {
                visa: “data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ height=’24px’ viewBox=’0 0 24 24′ width=’24px’ fill=’%233BBF45’%3E%3Cpath d=’M0 0h24v24H0z’ fill=’none’/%3E%3Cpath d=’M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z’/%3E%3C/svg%3E”
            }
        }
    }
</script>