Style card payments fields

Change the layout, width, height, and outer styling (for example, border, box-shadow, background) of the card fields. You can modify the elements you supply as containers (for example; #card-number { border: 1px solid #333; }) with your current stylesheets.

Typically, input elements calculate their height from font size and line height (and a few other properties), but advanced credit and debit card payments require explicit configuration of height. Make sure you 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

You must specify any other CSS on your page and outside of the advanced credit and debit card payments configuration. Setting unsupported properties will fail and create a warning in the console.

Custom classes

While advanced credit and debit card payments manages the internal state and styles of the input fields, you can manage the visual state of your containers. Use the styles parameter in the render() method under HostedFields to manage your container style.

The following example shows the styles parameter:

1// ...
2paypal.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    });