A system based on CustomEvent API is available. You can use those methods, available in paygreenjs:

NameTypeDescription
onfuncSubscribe to an event and attach a callback
offfuncDetach your callback from an event
EventsEventsTypeConstant giving all events available

The events returned are of type CustomEvent. If it's provided, you can check the attribut detail giving more informations (like detailled errors, tokens...)

Here it is an example:

paygreenjs.on(paygreenjs.Events.TOKEN_READY, (event) => {
	console.log('TOKEN_READY', event.detail);
});

List of Events

You can check the events from the auto-generated documentation here

NameDescription
ACTUAL_FLOW_PAYMENT_DONETrigger when the actual payment is done (successfull or not). Only triggered if there is a rest to pay.
AUTHENTICATION_FLOW_STARTTrigger when authentication flow start (3DS, OAUTH ...)
CARD_ONCHANGETrigger CARD change, return detail object with validity of the card
CVV_FIELD_FULFILLEDTrigger if CVV is FULFILLED and valid (doesn't work with bank_card svad)
CVV_FIELD_ONCHANGETrigger if CVV is changed, return detail object with validity and potential error (doesn't work with bank_card svad)
ERRORTrigger if an error occured, return Error.
EXP_FIELD_FULFILLEDTrigger if EXP is FULFILLED and valid (doesn't work with bank_card svad)
EXP_FIELD_ONCHANGETrigger if EXP is changed, return detail object with validity and potential error (doesn't work with bank_card svad)
FULL_PAYMENT_DONETrigger when the whole Payment Order has been payed.
INSTRUMENT_READYTrigger when Instrument has been created
ON_OPEN_POPUPTrigger when a open pop must be open, provide the url
PAN_FIELD_FULFILLEDTrigger if PAN is FULFILLED and valid (doesn't work with bank_card svad)
PAN_FIELD_ONCHANGETrigger if PAN is changed, return detail object with validity and potential error (doesn't work with bank_card svad)
PAYMENT_FAILTrigger when the payment authorization has been refused.
PAYMENT_FLOW_ONCHANGETrigger when the actual payment flow changed
REQUEST_SUBMIT_TOKENIZE_FORMTrigger to submit tokenize form
REUSABLE_ALLOWED_CHANGETrigger when the user change Reusable Checkbox state. Or when you use the paygreenjs.updateConsent(boolean) function
TOKEN_FAILTrigger if the tokenize fail, return error value that detail why the tokenize fail.
TOKEN_READYTrigger when the token is ready, return the token string.
TOKEN_DETAILS_READY
Depecrated
Depecrated
Trigger when the token is ready and these details like issue, return the token in detail.

OnChange

Paygreenjs is providing some onChange events, giving you the possibility to get some data when an input change. Please refer to the Events constant to check all available onChange events.

Here it is an example:

paygreenjs.on(paygreenjs.Events.PAN_FIELD_ONCHANGE, (event) => {
	console.log('PAN_FIELD_ONCHANGE', event.detail);
});