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',
    }
  }
});

Card brand identification

Will automatically determine the type of the credit card and show a desired icon. If you want to turn this feature on just set showCardIcon: true inside field initialization method.

We’re supporting the following card brands:

  • Visa
  • Visa Electron
  • Maestro
  • Mastercard
  • Amex
  • Discover
  • Dankort
  • Diners Club
  • UnionPay
  • JCB
  • Forbrugsforeningen

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',
    },
  }
});
form.field('#cc-number', {
  type: 'card-number',
  name: 'cc-number',
  placeholder: 'Card number',
  validations: ['required', 'validCardNumber'],
  showCardIcon: {
    left: '5px',
  },
  css: {
    boxSizing: 'border-box',
    padding-left: '45px',
    padding-right: '0',
  }
});
form.field('#cc-number', {
  type: 'card-number',
  name: 'cc-number',
  placeholder: 'Card number',
  validations: ['required', 'validCardNumber'],
  showCardIcon: {
    width: '37px',
    height: '25px',
  },
});