Hosted Fields Style Guide

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  });