Step 5: Listen for Events

The form variable returned by our JavaScript library is an instance of EventTarget object. This means that you can addEventListener to all of the various events it emits while the user interacts with it or while the payment is processed. All of the emitted events are CustomEvents and they might have payload containing event related data under event.detail Object. Here's a full list:

Event Name	Description	Detail
hostedFields.ready	The form is initialized and rendered	N/A
hostedFields.error	Configuration or Initialization Error. E.g. `Invalid Hosted Fields Token`,`Invalid Domain`,`Server Error` etc.	{message: string}
hostedFields.validation	Validation result for a given field. Occurs while user is typing and after a payment form is submitted.	{valid: bool, field: string, message: string}
hostedFields.shippingRequired	Whether or not the shipping data is required. Occurs when provided card is AmEx and 3DS is enabled	{shippingRequired: bool}
card.type	Brand of the credit/debit card provided used by the user	string
submit.processing	Payment processing has started. The occurs when user submits the payment form	N/A
submit.result	Payment processing has finished. Can be successful or failed. Check the result field in the `detail` object.	{result: bool}
3ds.start	3DS Verification process has started	N/A
3ds.success	3DS Verification has been successfull	N/A
3ds.failure	3DS Verification failed	N/A
3ds.end	3DS Verification ended	N/A
3ds.additional-verification	Additional 3DS Verification will be performed. Usually a 2FA Check	N/A

Example event handlers: