Style card fields for direct merchants

DocsCurrentAdvancedLast updated: April 25th 2023, @ 4:16:45 pm


Important: This is version 2 of the card field style guide for direct merchants. Version 1 is a legacy integration.

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