Style card payments fields

DocsCurrentAdvancedLast updated: September 6th 2023, @ 12:43:42 pm

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, #card-number { border: 1px solid #333; }.

Advanced credit and debit card payments elements require explicit height configuration. Style the height of your containers in your stylesheets. The text of the field components is configured with JavaScript.

Supported CSS properties

appearance
color
direction
font-family
font-size-adjustfont-size
font-stretch
font-style font-variant-alternates
font-variant-capsfont-variant-east-asian
font-variant-ligatures font-variant-numeric
font-variantfont-weight
font
letter-spacing
line-height
opacity
outline
padding
text-shadowtransition
-moz-appearance
-moz-osx-font-smoothing
-moz-tap-highlight-color
-moz-transition
-webkit-appearance
-webkit-font-smoothing
-webkit-tap-highlight-color
-webkit-transition

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, the configuration fails, and a warning shows up in the console.

Define other CSS properties on your page at the page level or in individual sections.

Custom classes

Use the styles parameter in the render() method under HostedFields to manage your container style.

The following example shows the styles parameter:

1// ...
2  paypal.HostedFields.render({
3    createOrder: getOrderId,
4    styles: {
5      'input': {
6        'color': '#3A3A3A',
7        'transition': 'color 160ms linear',
8        '-webkit-transition': 'color 160ms linear'
9      },
10      ':focus': {
11        'color': '#333333'
12      },
13      '.invalid': {
14        'color': '#FF0000'
15      }
16      // field configuration here
17    }
18  });