Card Fields Style Guide

DocsCurrentAdvancedLast updated: April 17th 2024, @ 4:51:01 pm


Important: This JavaScript SDK documentation uses the CardFields component. If you are integrated with the legacy HostedFields component, 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.

  • appearance
  • background
  • border
  • border-radius
  • box-shadow
  • color
  • direction
  • font
  • font-family
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-weight
  • height
  • letter-spacing
  • line-height
  • opacity
  • outline
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • text-shadow
  • transition
  • -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: cardStyle
14 });

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: nameFieldStyle
11 }).render('#card-name-field-container');

See also