Card fields style guide
Last updated: Oct 31st, 8:59am
Change the layout, width, height, and outer styling of the card fields. Modify the elements you supply as containers with your current stylesheets. For example, input: { border: 1px solid #333; }.
Important: This JavaScript SDK documentation uses the CardFields component. If you are integrated with the legacy HostedFields component, see Hosted felds style guide.
Supported CSS properties
The CSS properties listed are the only properties supported in the advanced credit and debit card payments configuration. If you specify an unsupported CSS property, a warning is logged to the browser console.
appearancecolordirectionfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-weightletter-spacingline-heightopacityoutlinepaddingpadding-bottompadding-leftpadding-rightpadding-toptext-shadowtransition-moz-appearance-moz-osx-font-smoothing-moz-tap-highlight-color-moz-transition-webkit-appearance-webkit-osx-font-smoothing-webkit-tap-highlight-color-webkit-transition
Examples
You can pass a style object into a parent cardField component or each card field individually.
Style parent fields
Pass a style object to the parent cardField component to apply the object to every field.
1const cardStyle = {2 'input': {3 'font-size': '16px',4 'font-family': 'courier, monospace',5 'font-weight': 'lighter',6 'color': '#ccc',7 },8 '.invalid': {9 'color': 'purple',10 },11 };12 const cardField = paypal.CardFields({13 style: cardStyle14 });
Style individual fields
Pass a style object to an individual card field to apply the object to that field only. This overrides any object passed through a parent component.
1const nameFieldStyle = {2 'input': {3 'color': 'blue'4 }5 '.invalid': {6 'color': 'purple'7 },8 };9 const nameField = cardField.NameField({10 style: nameFieldStyle11 }).render('#card-name-field-container');