Customization

PGJS provides some class on containers which allow you to customize style and adapt it to your interface.

Containers

List of available class:

Class	Description
.pg-payment-method	Applied to all payment methods
.paygreen-pan-frame	Applied to pan input containner
.paygreen-exp-frame	Applied to expiration input containner
.paygreen-cvv-frame	Applied to CVV input containner

Payment form inputs

Because inputs are in iframe, you can't customize these with CSS. That's why you can provide a style object to the init() method:

const style = {
  input: {
    base: {
      color: 'black',
      fontSize: '18px',
    },
    hover: {
      color: 'grey',
    },
    focus: {
      color: 'grey',
    },
    invalid: {
      color: 'red',
    },
    placeholder: {
      base: {
        color: 'grey',
      },
    },
  },
  checkbox: {
    label: {
      base: {
        color: 'black',
      },
      unchecked: {
        color: 'red',
      },
    },
    box: {
      base: {
        color: 'black',
        hover: {
          color: 'red',
        },
      },
      unchecked: {
        color: 'red',
      },
    },
  },
}

paygreenjs.init({
  publicKey,
  mode: 'tokenizer',
  paymentMethod: 'conecs',
  style,
});

Change focus

Focus can be manually changed using the paygreenjs.focus() method. Provid as first paramater the name of the input to focus, here is the enumeration: pan | cvv | exp

You can, for example, attach it to an event:

paygreenjs.attachEventListener(paygreenjs.Events.PAN_FIELD_FULFILLED, () => {
  paygreenjs.focus('cvv');
});
paygreenjs.attachEventListener(paygreenjs.Events.CVV_FIELD_FULFILLED, () => {
  paygreenjs.focus('exp');
});