Skip to content
JS Reference

Styling

You can customize the visuals of Shift4 components on your webpage. In order to do that 3 new attributes can be set in options. The options are applicable either to a single component or a component group. They are merged but only for top level attributes, ie.: finalOptions = {...componentGroupOptions, ...componentOptions}.

New attributes added to the options are:

  • height - can be used to change height of component's iframe
  • style - can be used to change styles; has two nested attributes:
    • base - used to defined base styles;
    • invalid - used to define styles when input has invalid value (for example invalid card number).
  • fonts - can be used to add additional fonts (maps to @font-face from CSS), must be a list of objects with following attributes:
    • family - maps to font-family from CSS;
    • style - maps to font-style from CSS;
    • weight - maps to font-weight from CSS;
    • display - maps to font-display from CSS;
    • src - maps to src from CSS;
    • unicodeRange - maps to unicode-range from CSS.

For defining styles following attributes can be used:

  • color - maps to color from CSS;
  • backgroundColor - maps to background-color from CSS;
  • fontFamily - maps to font-family from CSS;
  • fontSize - maps to font-size from CSS;
  • fontWeight - maps to font-weight from CSS.

Additionally following pseudo classes are also supported:

  • :hover
  • :focus
  • ::placeholder

Example

let shift4 = Shift4("pu_test_WVMFC9GFuvm54b0uorifKkCh");

let options = {
  height: '38px',
  style: {
    base: {
      color: '#44d',
      fontSize: '30px',
      fontFamily: 'Orbitron',
      '::placeholder': {
        color: '#99f'
      },
    },
    invalid: {
      color: '#f00',
      '::placeholder': {
        color: '#f99'
      },
    }
  },
  fonts: [{
    family: 'Orbitron',
    style: 'normal',
    weight: 400,
    display: 'swap',
    src: "url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');"
  }]
};

let components = shift4.createComponentGroup(options);
let number = components.createComponent("number").mount("#number");
let expiry = components.createComponent("expiry").mount("#expiry");
let cvc = components.createComponent("cvc").mount("#cvc");

The createComponent() method accepts an optional second argument with options for that single component - createComponent("expiry", { height: '48px' }). The placeholder to render into is never passed to createComponent(); it is always given to mount().

Components