Style an iFrame

Customize iFrame styling by creating an object which describes the customStyle. Use the following classes to globally define input style behavior for default viewing:

Additionally, you can describe the global labels style behavior by using labels as a top-level key with base nested keys.

Here is an example of global custom style using the CSS property color:

var customStyle = {
  'styles': {
    'base': {
      'color': 'blue'
    }
  }
}

Style specific elements within the iFrame by using the following classes with nested base and labels classes:

Class Name Notes
cvv-icon This can only have base.display nested in order to hide the icon.
cvv-number
expiration-month There is only one label for the expiration date, and label styling should be nested under expiration_month if custom styling is desired there.
expiration-year Do not apply styling here.
cc-number
errors Currently, the only accepted properties for styling errors are color. See the example below to see the accepted method of styling errors.

Styling specific elements will override global styles when there is a conflict.

Use the following CSS properties & pseudo-classes to customize global and element styling:

Note:

Pass margin, box-shadow, and width as pixels, otherwise the inputs may not align with the iFrame correctly.

Here's an example using the options and customStyle objects, as well as element-level and global-level styling:

var customStyle = {
    'styles': {
        'base': {
          'color': 'blue',
          'border-color': 'blue'
            }
        }
  };

var options = {
  customStyle: customStyle,
  showPlaceholders:false,
  showErrorMessages:true
};