Styling the iFrame

You can style the iFrame by providing the CSS in the configuration object. The styles object consists of the following parameters:

Parameter	Type	Description
base	string	The base style applied to the input element within the iFrame.
focus	string	Optional style applied when the input element within the iFrame gains focus.
error	string	Style applied to the input element if a validation failure occurs.
placeholder	string	Allows for the styling of the input placeholder text (doesn't apply to CVV styling)
cvv	object	Allows to pass the CSS for the CVV iFrame styling.
cvv.base	string	The base style applied to the input element within the CVV iFrame.
cvv.focus	string	Optional style applied when the input element within the CVV iFrame gains focus.
cvv.error	string	Style applied to the CVV input element if a validation failure occurs.

This is an example of the styles object passing the CSS for both the iFrame and the CVV iFrame:

var iframeConfig = {
  origin: "http://mysite.com",
  enablePrettyFormat: true,
  placeholder: "XXXX-XXXX-XXXX-XXXX",
  cvvPlaceholder: "XXX",
  styles: {
    base: "font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;",
    focus: "box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;",
    error: "box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);",
    cvv: {
        base: "font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;",
        focus: "box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;",
        error: "box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);"
    }
   }
}