Styling

This is a full list of the parameters that can be sent with the style parameter in the payframe's constructor. If a parameter isn't sent, the payframe will use the default value listed.

Layout Options

Parameter	Default	Description
formLayout	0	The layout to use for the payframe elements. Example images of both of the layouts are shown below Example: formLayout: '1' Options: '0', '1'
cardImageAlignment	left	The placement of the card image in relation to the card number field Example: cardImageAlignment: 'right' Options: 'left', 'right', 'none'
cardIconAlignment	middle	The alignment of the card image Example: cardIconAlignment: 'left' Options: 'left', 'middle', 'right'
cardImageSize	half	The size of the card image in the card number field Example: cardImageSize: 'full' Options: 'half', 'full'
cardImageAnimation	enabled	The animation of the card image in the card number field upon successful validation Example: cardImageAnimation: 'disabled' Options: 'enabled', 'disabled'
fieldAutoTabbing	enabled	Whether to automatically tab to the next field upon field completion Example: fieldAutoTabbing: 'disabled' Options: 'enabled', 'disabled'
cardIconSet	1	The cardIconSet to use for the cardImages. Chosen icon set will also be used for the accepted card type icons below Example: cardIconSet: '2' Options: '1', '2'
cardTypeDisplay	middle	The display alignment of the accepted card type images Example: cardTypeDisplay: 'left' Options: 'left', 'middle', 'right', 'none'
cardTypeWidth	20px	The width of the accepted card type images Example: cardTypeWidth: '40px'
errorDisplayMode	label	The display mode of the field validation errors Example: errorDisplayMode: 'popup' Options: 'label', 'popup'
payframeHeightScaling	static	The scaling mode of the payframe's height. We recommend using 'dynamic' for most implementations. Example: payframeHeightScaling: 'dynamic' Options: 'static', 'dynamic'
fieldValidStyle	none	A subset of styling options for the fields when valid Example: fieldValidStyle: {'color': 'green', 'borderColor': 'green'} Options: A full list of secondary styling options is below.
fieldErrorStyle	none	A subset of styling options for the fields when invalid Example: fieldErrorStyle: {'color': 'red', 'borderColor': 'red'} Options: A full list of secondary styling options is below.
fieldFocusStyle	none	A subset of styling options for the fields when focused Example: fieldFocusStyle: {'color': 'black', 'borderColor': 'blue'} Options: A full list of secondary styling options is below.
placeholderText	none	A list of custom labels to replace the default placeholder text. Alternatively, set a field to 'none' for no placeholder text Example: placeholderText: {'name': 'Bob Smith', 'number': '1234567891011121', 'expiry': 'none', 'cvv': '123'}
placeholderStyle	none	A subset of styling options for the field placeholder text Example: placeholderStyle: {'color': 'darkgrey', 'fontSize': '15px'} Options: A full list of secondary styling options is below.
placeholderValidStyle	display:none	A subset of styling options for the field placeholder text when field is valid. Defaults to hidden Example: placeholderValidStyle: {'color': 'green', 'top': '0', 'fontSize': '10px} Options: A full list of secondary styling options is below.
placeholderErrorStyle	display:none	A subset of styling options for the field placeholder text when field has input and is invalid. Defaults to hidden Example: placeholderErrorStyle: {'color': 'red', 'top': '0', 'fontSize': '10px} Options: A full list of secondary styling options is below.
placeholderFocusStyle	display:none	A subset of styling options for the field placeholder text when field is focused. Defaults to hidden Example: placeholderFocusStyle: {'color': 'blue', 'top': '0', 'fontSize': '10px} Options: A full list of secondary styling options is below.
customErrorMessages	none	A list of custom messages to replace the default validation errors Example: customErrorMessages: {'name': {'required':'Name Missing'}, 'number': {'required':'Number Missing','checkLuhn':'Invalid card number'}} Options: A full list of replaceable validation messages is below.
errorLabelStyle	none	A subset of styling options for the error labels Example: errorLabelStyle: {'color': 'red', 'fontFamily': 'sans-serif', 'fontSize': '12px'} Options: A full list of secondary styling options is below.
fieldLabelText	none	A list of custom labels to replace the default field label text, if set. Alternatively, set a field to 'none' for no field label Example: fieldLabelText: {'name': 'Card Name', 'number': 'Card Number', 'expiry': 'none', 'cvv': 'none'}
fieldLabelStyle	display:none	A subset of styling options for the field labels. Defaults to hidden Example: fieldLabelStyle: {'color': 'black', 'fontSize': '16px} Options: A full list of secondary styling options is below.

Styling Options

Parameter	Default	Description
width	500px	The width of the payframe Example: width: '800px'
height	Depends on formLayout	The height of the payframe Example: height: '350px'
fieldHeight	40px	The height of the payframe elements Example: fieldHeight: '60px'
border	1px solid #e6ebf1	The border of the payframe elements Example: border: '2px dashed red'
borderBottom	border Parameter	The bottom border of the payframe elements Example: borderBottom: '4px dotted blue'
borderColor	border Parameter	The border color of the payframe elements Example: borderColor: '#b13af2'
borderLeft	border Parameter	The left border of the payframe elements Example: borderLeft: '4px dotted blue'
borderRadius	4px	The radius of the payframe element borders Example: borderRadius: '0px 30%'
borderRight	border Parameter	The right border of the payframe elements Example: borderRight: '4px dotted blue'
borderTop	border Parameter	The top border of the payframe elements Example: borderTop: '4px dotted blue'
textColor	#32325d	The text color of the payframe elements Example: textColor: 'green'
backgroundColor	White	The background color of the payframe elements Example: backgroundColor: 'yellow'
direction	ltr(Left to Right)	The direction of the payframe element text Example: direction: 'rlt'
font	18px Helvetica Neue	The font of the payframe elements Example: font: '20px Times New Roman'
fontFamily	font Parameter	The font family of the payframe elements Example: fontFamily: 'Arial'
fontSize	font Parameter	The font size of the payframe elements Example: fontSize: '20px'
fontSizeAdjust	font Parameter	The font size adjust of the payframe elements Example: fontSizeAdjust: '0.58'
fontStretch	font Parameter	The font stretch of the payframe elements Example: fontStretch: 'condensed'
fontStyle	font Parameter	The font style of the payframe elements Example: fontStyle: 'italic'
fontSrc	none	An array of custom fonts to import. Accepts either a google font url, or a font-face style object pointing to a hosted font file Example: fontSrc: ['https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700', {'url':'https://test.com/testFont.woff','format':'woff', 'fontFamily': 'testFont', 'fontStyle: 'normal', 'fontWeight': '400'}]
fontVariant	normal	The font variant of the payframe elements Example: fontVariant: 'small-caps'
fontVariantAlternates	normal	The font alternate variant of the payframe elements Example: fontVariantAlternates: 'historical-forms'
fontVariantCaps	normal	The font caps variant of the payframe elements Example: fontVariantCaps: 'all-small-caps'
fontVariantEastAsian	normal	The font East Asian variant of the payframe elements Example: fontVariantEastAsian: 'ruby'
fontVariantLigatures	normal	The font ligatures variant of the payframe elements Example: fontVariantLigatures: 'common-ligatures'
fontVariantNumeric	normal	The font numeric variant of the payframe elements Example: fontVariantNumeric: 'slashed-zero'
fontWeight	normal	The font weight of the payframe elements Example: fontWeight: 'bold'
letterSpacing	normal	The letter spacing of the payframe elements Example: letterSpacing: '2px'
lineHeight	normal	The line height of the payframe elements Example: lineHeight: '80%'
margin	3px	The margin of the payframe elements Example: margin: '10px 12px'
marginBottom	margin Parameter	The bottom margin of the payframe elements Example: marginBottom: '8px'
marginLeft	margin Parameter	The left margin of the payframe elements Example: marginLeft: '8px'
marginRight	margin Parameter	The right margin of the payframe elements Example: marginRight: '8px'
marginTop	margin Parameter	The top margin of the payframe elements Example: marginTop: '8px'
opacity	1	The opacity of the payframe elements Example: opacity: '0.8'
outline	none	The outline of the payframe elements Example: outline: '2px dashed pink'
outlineColor	outline Parameter	The outline color of the payframe elements Example: outlineColor: 'green'
outlineStyle	outline Parameter	The outline style of the payframe elements Example: outlineStyle: 'solid'
outlineWidth	outline Parameter	The outline width of the payframe elements Example: outlineWidth: '4px'
padding	10px 12px	The padding of the payframe elements Example: padding: '15px'
paddingBottom	padding Parameter	The bottom padding of the payframe elements Example: paddingBottom: '12px'
paddingLeft	padding Parameter	The left padding of the payframe elements Example: paddingLeft: '12px'
paddingRight	padding Parameter	The right padding of the payframe elements Example: paddingRight: '12px'
paddingTop	padding Parameter	The top padding of the payframe elements Example: paddingTop: '12px'
textShadow	none	The text shadow of the payframe elements Example: textShadow: '2px 2px gray'
transition	none	The transition of the payframe elements Example: transition: 'width 2s'
mozAppearance	none	The appearance of the payframe elements on Firefox Example: mozAppearance: 'button'
mozOsxFontSmoothing	auto	The font smoothing of the payframe elements in Firefox on Mac OS Example: mozOsxFontSmoothing: 'grayscale'
mozTapHighlightColor	black	The tap highlight color of the payframe elements on Firefox Example: mozTapHighlightColor: 'red'
webkitAppearance	none	The appearance of the payframe elements on WebKit- and Blink-based browsers Example: webkitAppearance: 'button'
webkitFontSmoothing	auto	The font smoothing of the payframe elements in WebKit- and Blink-based browsers Example: webkitFontSmoothing: 'antialiased'
webkitTapHighlightColor	black	The tap highlight color of the payframe elements on WebKit-and Blink-based browsers Example: webkitTapHighlightColor: 'red'

Form Layouts

This is an example of how the different form layouts look with the getPayframeToken and addCard implementations. The examples below are all using the default styling.

Index	getPayframeToken	addCard
0
1

Card Icon Sets

Index	Icons
1
2

Customizable Validation Errors

This is a full list of validation errors that can be overwritten with custom messages.

Validation Rule	Fields	Description
required	name, number, expiry, cvv	Checks that field is present
minLength	name, number, cvv	Checks minumum length of field
maxLength	name, number, cvv	Checks maximum length of field
containsCardNumber	name	Checks that the name field doesn't contain a PAN
validCard	number	Checks that card number passes luhn check
checkAcceptedCardType	number	Checks that card number type is one of the approved types
validDate	expiry	Checks that expiry is a valid date
currentDate	expiry	Checks that card hasn't expired

Secondary Stying Options

This is a full list of secondary styling options that can be set for particular fields or field states. For some field states, setting a font family or size that is different from the field's default can cause alignment issues on formLayout 0.

Parameter	Applicable Groupings	Description
backgroundColor	fieldValid, fieldError, fieldFocus, errorLabel	The background color of the elements
border	errorLabel	The border of the elements
borderColor	fieldValid, fieldError, fieldFocus	The border color of the elements
borderRadius	fieldValid, fieldError, fieldFocus, errorLabel	The border radius of the elements
color	all	The text color of the elements
cursor	placeholder, placeholderValid, placeholderError, placeholderFocus	The cursor style when over the elements
display	placeholderValid, placeholderError, placeholderFocus, fieldLabel	The display of the elements. Accepts 'none' or 'block'
font	all	The font of the elements
fontFamily	all	The font family of the elements
fontSize	all	The font size of the elements
fontWeight	fieldLabel, errorLabel, placeholder	The font weight of the elements
left	placeholder, placeholderValid, placeholderError, placeholderFocus	The left edge of the elements
lineHeight	errorLabel, fieldLabel	The line height of the elements
margin	fieldLabel	The margin of the elements. Can also be set via marginBottom, marginLeft, marginRight, and marginTop
padding	errorLabel	The padding of the elements. Can also be set via paddingBottom, paddingLeft, paddingRight, and paddingTop
top	placeholder, placeholderValid, placeholderError, placeholderFocus	The top edge of the elements
transition	placeholder	The transition of the elements

Layout Options#

Styling Options#

Form Layouts#

Card Icon Sets#