Handling Hosted Fields Errors

When something goes wrong during payment processing, the Hosted Fields library will display errors to your customers out of the box. However, sometimes you might want to catch these errors and perform some actions of your own when they happen.

To run code whenever Hosted Fields encounters an error, listen for "komoju-error" events on the <komoju-fields> element:

const fields = document.querySelector('komoju-fields');

fields.addEventListener('komoju-error', (event) => {
  console.error(event.detail.error);

  // By default, <komoju-fields> will display the error message on the UI.
  // If you want to prevent this, call event.preventDefault().
});

The type of the event.detail.error object is usually in the form of our standard API error objects, but in some cases it may just be a string.