Card Fields Style Guide
DocsCurrentAdvancedLast updated: April 17th 2024, @ 4:51:01 pm
Important: This JavaScript SDK documentation uses the
CardFieldscomponent. If you are integrated with the legacyHostedFieldscomponent, see Hosted Fields Style Guide.
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; }.
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.
appearancebackgroundborderborder-radiusbox-shadowcolordirectionfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-weightheightletter-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');