Events

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

Name	Type	Description
on	`func`	Subscribe to an event and attach a callback
off	`func`	Detach your callback from an event
Events	`EventsType`	Constant 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

Name	Description
PAN_FIELD_ONCHANGE	Trigger if PAN is changed, return detail object with validity and potential error
EXP_FIELD_ONCHANGE	Trigger if EXP is changed, return detail object with validity and potential error
CVV_FIELD_ONCHANGE	Trigger if CVV is changed, return detail object with validity and potential error
CARD_ONCHANGE	Trigger CARD change, return detail object with validity of the card
AUTHENTICATION_FLOW_START	Trigger when authentication flow start (3DS, OAUTH ...)
ON_OPEN_POPUP	Trigger when a open pop must be open, provide the url
PAYMENT_FLOW_ONCHANGE	Trigger when the actual payment flow changed
REUSABLE_ALLOWED_CHANGE	Trigger when the user change Reusable Checkbox state. Or when you use the `paygreenjs.updateConsent(boolean)` function
REQUEST_SUBMIT_TOKENIZE_FORM	Trigger to submit tokenize form
TOKEN_FAIL	Trigger if the tokenize fail, return error value that detail why the tokenize fail.
TOKEN_READY	Trigger when the token is ready, return the token string.
INSTRUMENT_READY	Trigger when Instrument has been created. You can check the instrument authorization status in `instrument.authorized`
ERROR	Trigger if an error occured, return Error.
PAYMENT_FAIL	Trigger when the payment authorization has been refused.
ACTUAL_FLOW_PAYMENT_DONE	Trigger when the actual payment is done (successfull or not). Only triggered if there is a rest to pay.
FULL_PAYMENT_DONE	Trigger when the whole Payment Order has been payed.

Depracted Events

List of deprecated events. These events will be removed in future versions of paygreenJS. Please do not use them anymore.

Name	Description	What to use instead
PAN_FIELD_FULFILLED `Depecrated`	Trigger if PAN is FULFILLED and valid	PAN_FIELD_ONCHANGE with the value present in `event?.detail?.valid`
EXP_FIELD_FULFILLED `Depecrated`	Trigger if EXP is FULFILLED and valid	EXP_FIELD_ONCHANGE with the value present in `event?.detail?.valid`
CVV_FIELD_FULFILLED `Depecrated`	Trigger if CVV is FULFILLED and valid	CVV_FIELD_ONCHANGE with the value present in `event?.detail?.valid`
TOKEN_DETAILS_READY `Depecrated`	Trigger when the token is ready and these details like issue, return the token in detail.	INSTRUMENT_READY

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);
  console.log('PAN is Valid', event?.detail?.valid);
});