Events

PaygreenJS communicates with your code via the CustomEvent API.

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

The data carried by an event is exposed on the detail attribute (validation status, tokens, error codes, etc.).

📘
Auto-generated reference
The exhaustive enum of every event name is available in the auto-generated documentation.

Subscription methods

Name	Type	Description
`on`	`func`	Subscribes to an event and attaches a callback.
`off`	`func`	Detaches your callback from an event.
`Events`	`EventsType`	Constant exposing every event name.

Fired in real time as the buyer fills the hosted PAN / EXP / CVV fields.

Name	Description
`PAN_FIELD_ONCHANGE`	Triggers when the PAN field changes. `event.detail` contains `valid`, the error code (if any), the translated error message, the detected issuer and networks.
`EXP_FIELD_ONCHANGE`	Triggers when the EXP field changes. `event.detail` contains `valid`, the error code (if any), and the translated error message.
`CVV_FIELD_ONCHANGE`	Triggers when the CVV field changes. Same payload as above.
`CARD_ONCHANGE`	Triggers when the overall card validity changes (all three fields combined). `event.detail.valid` is the final boolean.

paygreenjs.on(paygreenjs.Events.PAN_FIELD_ONCHANGE, (event) => {
  console.log('PAN is valid:', event?.detail?.valid);
});

Name	Description
`PAYMENT_FLOW_ONCHANGE`	Triggers when the current payment flow changes (method picked, instrument set, etc.).
`REQUEST_SUBMIT_TOKENIZE_FORM`	Triggers when the hosted-fields form is submitted (manually or via `submitPayment()`).
`ACTUAL_FLOW_PAYMENT_DONE`	Triggers when the current flow's payment is done (successfully or not). Only fired when there is a remainder left to pay.
`FULL_PAYMENT_DONE`	Triggers when the whole Payment Order has been paid.
`PAYMENT_FAIL`	Triggers when the payment authorization has been refused.
`TOKEN_READY`	Triggers when the token is ready. Returns the token string.
`TOKEN_FAIL`	Triggers when tokenization fails. Returns an error value describing why. See Error handling.
`INSTRUMENT_READY`	Triggers when an instrument has been created. The authorization status is available in `event.detail.authentication`.

Name	Description
`AUTHENTICATION_FLOW_START`	Triggers when an authentication flow starts (3DS, OAuth, …). `event.detail.type` indicates which one.
`ON_OPEN_POPUP`	Triggers when a popup must be opened. Provides the URL. Subscribe to take control of the popup yourself (recommended to avoid pop-up blockers).
`ERROR`	Triggers when an unexpected error occurs. Returns the `Error`. See Error handling.

Name	Description
`REUSABLE_ALLOWED_CHANGE`	Triggers when the buyer changes the reusable-card checkbox state, or when you call `paygreenjs.updateConsent(boolean)`.

⚠️
Do not use these in new integrations. They are only kept for backward compatibility.

Name	Description	Use instead
`PAN_FIELD_FULFILLED`	Triggered when the PAN field is filled and valid.	`PAN_FIELD_ONCHANGE` + check `event?.detail?.valid`.
`EXP_FIELD_FULFILLED`	Triggered when the EXP field is filled and valid.	`EXP_FIELD_ONCHANGE` + check `event?.detail?.valid`.
`CVV_FIELD_FULFILLED`	Triggered when the CVV field is filled and valid.	`CVV_FIELD_ONCHANGE` + check `event?.detail?.valid`.
`TOKEN_DETAILS_READY`	Triggered when the token was ready, with issuer and details.	`INSTRUMENT_READY`.