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.on(paygreenjs.Events.PAN_FIELD_FULFILLED, () => {
paygreenjs.focus('cvv');
});
paygreenjs.on(paygreenjs.Events.CVV_FIELD_FULFILLED, () => {
paygreenjs.focus('exp');
});
Updated about 1 month ago