Show card entry error messages for the Square payment form on a payment processing web page.
Square Payment Form

Handle Card Entry Errors Deprecated
This component is deprecated. See below for guidance about what to use instead.

Note

The Square payment form is deprecated and replaced by the Web Payments SDK.

You should use the Web Payments SDK to take payments on a web client. The Web Payments SDK uses modern web styling as shown in the following image:

A graphic showing the five visual elements of the Card payment method, which are represented as selectors that you specify in a card option styling object.

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

Customize the error UI Permalink Get a link to this section

When payment token generation fails, the cardNonceResponseReceived callback provides error information using 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:

A graphic showing a payment form with error condition input fields and an error box.

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

Add a CSS class for the error message box. Permalink Get a link to this section

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

  2. Add the following class to the file:

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
     .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;
 }

Add list bullet points Permalink Get a link to this section

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"...>.

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

Update the JavaScript code Permalink Get a link to this section

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
   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

      }
    }

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.