Error Handling and Messaging

Handling errors

To handle errors within Components, you need to confirm which responses will be rendered.

Response statuses

Status	Description
`isSuccess`	The payment has been successfully processed.
`isTdsPending`	Awaiting authentication completion. (Once the response has been returned, the `redirect_url`, which is defined within the `session_id` will contain the 3DS outcome.)
`isError`	The request was received, but an error has occurred.

if(response.isTdsPending()){
   Window.location.href = response.data.redirect_url;
}
if(response.isSuccess()){
   const messageContainer = document.querySelector(‘#error-message);
   messageContainer.textContent = JSON.stringify(response.data);
}
if(response.isError()){
   acquired.showComponentErrorMessage('.component-error', response.data);
   const messageContainer = document.querySelector('#error-message');
   messageContainer.textContent = JSON.stringify(response.data);

Handling 3-D Secure as an iframe

If you prefer not to load the tds window as a redirect, you have the option to load it as an iframe popup instead.

In the response for tds, update your code as follows:

if(response.isTdsPending()){
            this.components.iframe.style.height = "revert-layer";
            this.components.iframe.src = response.data.redirect_url;
            // window.location.href = response.data.redirect_url;
          }

Handling errors: Form

When an error occurs in the initial field, an error message will be displayed. Subsequent errors will be shown once the displayed error has been resolved.

<textarea id="error-message" placeholder="error message" readonly="true"></textarea>

Handling errors: Fields

In cases where multiple errors occur across various fields, all these errors will be displayed underneath the field that they occur in.

<form id=payment-form class=”form-main>
        <div class=”input-field” id=”card-holder-component”></div>
       <p class=”component-error”></p>
       <div class=”input-field” id=”card-number-component”></div>
       <p class=”component-error”></p>
       <div class=”input-field” id=”card-expiry-date-component”></div>
       <p class=”component-error”></p>
       <div class=”input-field” id=”card-cvv-component”></div>
      <p class=”component-error”></p>
</div>

In order to display the error message and enable custom messaging for individual fields, you are required to add the following code. The blur event will ensure the error message is displayed whenever the component loses focuses (is clicked away after being interacted with).

components.on('blur', (response) => {
  acquired.showComponentErrorMessage('.component-error', response);
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = JSON.stringify(response);
})

The default error message can then be overwritten to display what you require. In the below example we have set the message to "Invalid request".

if(response.isError()){
  response.data.message = "Invalid request";
  acquired.showComponentErrorMessage('.component-error', response.data);
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = JSON.stringify(response);
}

Error messaging

Components has a comprehensive suite of default error messaging that will be displayed to the end user. You have the option to customise error messaging by overriding any of the default messages.

The structure of the error response is outlined below:

Field	Description	Example
`status`	The current status of the response.	`error` `decline`
`component`	The component where the error occurred.	`cardForm` `cardNumber` `cardholderName` `cardExpireDate` `cardCvv` `payment`
`error_type`	The type of error returned.	`required` `incomplete` `invalid` `not_accepted`
`message`	A message containing more detail about the error.	`Cardholder name required`

Cardholder name required

{
  "status": "error",
  "component": "cardholderName",
  "error_type": "required",
  "message": "Cardholder name required"
}

Card number required

{
  "status": "error",
  "component": "cardNumber",
  "error_type": "required",
  "message": "Card number required"
}

Incomplete card number

{
  "status": "error",
  "component": "cardNumber",
  "error_type": "incomplete",
  "message": "Incomplete card number"
}

Invalid card number

{
  "status": "error",
  "component": "cardNumber",
  "error_type": "invalid",
  "message": "Invalid card number"
}

Card number not accepted

{
  "status": "error",
  "component": "cardNumber",
  "error_type": "not-accepted",
  "message": "Card number not accepted"
}

Expiry date required

{
  "status": "error",
  "component": "cardExpiryDate",
  "error_type": "required",
  "message": "Expiry date required"
}

Card expired

{
  "status": "error",
  "component": "cardExpiryDate",
  "error_type": "expired",
  "message": "Card expired"
}

Invalid card expiry year

{
  "status": "error",
  "component": "cardExpiryDate",
  "error_type": "invalid",
  "message": "Invalid card expiry year"
}

CVV required

{
  "status": "error",
  "component": "cardCvv",
  "error_type": "required",
  "message": "CVV required"
}

Incomplete CVV

{
  "status": "error",
  "component": "cardCvv",
  "error_type": "incomplete",
  "message": "Incomplete CVV"
}