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