How do I display to the user the error messages for nonce validation in the payment form?

[stevepiercy]

How do I display to the user the error messages for nonce validation in the payment form?

I read the documentation at https://docs.connect.squareup.com/articles/adding-payment-form/#noncegenerationerrors

I can see the error messages getting logged in the console. But I just cannot figure out how to get them to display in the form to the user. It's probably some stupid simple JavaScript thing, but JS is not one of my strong programming languages. Any help you can provide would be greatly appreciated. Thank you!

[Kelly]

Hi @stevepiercy! Great question! To make sure that I can get you all of the most accurate information, I've sent this over to our API team to take a look. Once I hear back from them I'll share the info with you!

[stevepiercy · Accepted solution]

Thanks Kelly,

I found one way to do it.

Put a div in the HTML with an ID of "payment-errors" and a class of "hide":

<div id="payment-errors" class="hide"></div>

Declare a CSS class "hide":

.hide {display: none;}

Then add logic to the form's JavaScript:

      cardNonceResponseReceived: function(errors, nonce, cardData) {
        if (errors) {
          console.log("Encountered errors:");
          var errmsg = ''
          // This logs all errors encountered during nonce generation to the
          // Javascript console.
          errors.forEach(function(error) {
            console.log('  ' + error.message);
            errmsg = errmsg + error.message + '<br>'
          });
          document.getElementById('payment-errors').innerHTML = errmsg
          $('#payment-errors').removeClass('hide')

        // No errors occurred. Extract the card nonce.
        } else {

If there are any errors, then they should be displayed in the now displayed div.

However, I found a related scenario for users of Firefox 48.0.2 (latest), which I sent to Square Support and posted to Stack Overflow. In this scenario, no nonce and no errors are returned, so the form is submitted without a nonce. This is bad.

There should be one more check to ensure that there is a nonce present before submitting the form to the developer's server. I assumed that cardNonceResponseReceived would do that, but evidently it does not.

[Sean]

@stevepiercy - Our Developer Team did ask that I follow up with you on one point. The human readable message that we return in the errors is meant for developers. It is not intended to be shown directly on the website and is not localized, it is only in US English, so this may look strange on a French language website for example. We encourage developers to use the type and field information returned in errors, https://docs.connect.squareup.com/articles/adding-payment-form/#noncegenerationerrors, to define their own behavior on the website or show appropriate, and localized, error messages to the buyer or merchant.

Hope this helps!