Styling the CVV iFrame
The CVV iFrame is styled by passing the CVV CSS within the regular CSS in the configuration object used to generate the iFrame. The CVV styles object consists of three elements: base, focus and error.
NOTE:
In CVV Only Mode, you will need to use the standard iFrame style parameters to style the CVV iFrame.
Parameter | Type | Description |
---|---|---|
base | string | The base style applied to the input element within the iFrame |
focus | string | Optional style applied when input element within the iFrame gains focus |
error | string | Style applied to the input element if a validation failure occurs |
var 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);"
}
}
Updated about 4 years ago