Card fields style guide

DocsCurrentADVANCED

Last updated: Oct 31st, 8:58am

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
  • 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
  • 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

      We use cookies to improve your experience on our site. May we use marketing cookies to show you personalized ads? Manage all cookies