Card 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.

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.

const cardStyle = {
          'input': {
              'font-size': '16px',
              'font-family': 'courier, monospace',
              'font-weight': 'lighter',
              'color': '#ccc',
          },
          '.invalid': {
              'color': 'purple',
          },
      };
      const cardField = paypal.CardFields({
          style: cardStyle
      });

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.

const nameFieldStyle = {
          'input': {
              'color': 'blue'
          }
          '.invalid': {
              'color': 'purple'
          },
      };
      const nameField = cardField.NameField({
          style: nameFieldStyle
      }).render('#card-name-field-container');

See also