PAYMENT FORM: COOKBOOK

Handle Card Entry Errors

This section explains how the SqPaymentForm library returns error information about card entry errors and how you might show the error messages in the UI.

When nonce generation fails, the cardNonceResponseReceived callback provides error information via the errors parameter. You should customize cardNonceResponseReceived to show the buyer information that explains why the payment was not processed. For example, you might show a message box with the list of errors as shown:

Screen_Shot_2019-10-16_at_6.09.28_PM.png

You can update the example walkthrough to show the message box as follows:

  1. Add a CSS class to style the error message box to display errors.

    1. Open mySqPaymentForm.css in the root folder of the Node.js project.

    2. Add the following class to the file:

      .error {
  float: left;
  width: calc((100% - 56px));
  margin: 16px 16px 16px 0;
  border: 1px solid #E02F2F;
  border-radius: 6px;
  background-color: white;
  font-size: '16px';
  padding: 24px;
}

  2. Add a <ul> element within the existing form container <div> to show a list of error messages:

    1. Open index.html in the root folder of the Node.js project.

    2. Add the following HTML after <button id="sq-creditcard"...>.

      <ul id="errors" class="error" style="display:none"></ul>

  3. Update the cardNonceResponseReceived callback code as shown to add error messages to a list and display the list in the error messages box:

    cardNonceResponseReceived: function (
     errors,
     nonce,
     cardData) {
     const errorList = document.getElementById("errors");
     if (errors) {
       let error_html = "";
       for (var i = 0; i < errors.length; i++) {
         error_html += "<li> " + errors[i].message + " </li>";
       }
       errorList.innerHTML = error_html;
       errorList.style.display = 'inline-block';
       return;
     }
     errorList.style.display = 'none';
     errorList.innerHTML = "";

     //  Existing fetch API logic... etc

   }
 }