/

Customization

How to style?

To customize your secure fields with styles you have to add css object into your field initialization method to generate a standalone CSS.

Use CSS properties with camelCase syntax (example: fontSize) and apply various CSS styles.

What we support:

  • Regular CSS properties
  • Placeholders
  • Pseudo-classes (eg. :hover, :focus)
  • Media queries (media query condition is calculated based on the iframe width, not on a parent window)

Example:

form.field('#my-text-field-id', {
  type: 'text',
  name: 'my-text-field',
  placeholder: 'placeholder text',
  validations: ['required'],
  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',
    },
    '@media (min-width: 420px)': {
      borderColor: 'red',
    }
  }
});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

Card brand identification

Will automatically determine the type of the credit card and show a desired icon. If you would like to show card brand icon inside your field just set showCardIcon: true inside field initialization method.

Note
You're always able to get cardType value from the form state.

We're supporting the following card brands:

Card BrandState cardType
Visavisa
Visa Electronvisaelectron
Maestromaestro
Mastercardmastercard
Amexamex
Discoverdiscover
Dankortdankort
Diners Clubdinersclub
JCBjcb
UnionPayunionpay
Forbrugsforeningenforbrugsforeningen

By default, the icon is 30x19px image positioned on the right side of the input, but you can overwrite these styles as shown in the examples below:

Examples:

form.field('#cc-number', {
  type: 'card-number',
  name: 'cc-number',
  placeholder: 'Card number',
  validations: ['required', 'validCardNumber'],
  showCardIcon: true,
  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',
    },
  }
});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format