Customize Styling

Pass a customCss object to CollectJS.configure() to style the payment fields:

CollectJS.configure({
  variant: 'inline',
  customCss: {
    'background-color': '#ffffff',
    'border':           '1px solid #d1d5db',
    'border-radius':    '6px',
    'color':            '#1f2937',
    'font-size':        '14px',
    'padding':          '10px 14px',
    'height':           '44px',
  },
  focusCss: {
    'border-color': '#8dc63f',
    'box-shadow':   '0 0 0 3px rgba(141,198,63,0.15)',
  },
  invalidCss: {
    'border-color': '#ef4444',
  },
  validCss: {
    'border-color': '#22c55e',
  },
});

Supported CSS Properties