Square payment form cannot execute requestCardNonc

Question

I've also submitted a request to Square support and hope to hear back soon.

Steps to reproduce

• Load the Square payment form (copy-pasta from https://docs.connect.squareup.com/articles/adding-payment-form/#samplewebpage and add your Application ID and uncomment the lines to submit a request to the server) in Firefox 48.0.2 (latest release as of today). Here's a test URL: https://wideningwontwork.org/test.html
• Leave all fields blank.
• Click "Submit Query" button.

Expectation

• All fields should be highlighted in red to indicate they are required.

Observation

• Firefox cannot fire the event requestCardNonce() because it is not defined. Error message in Firefox console:

  ReferenceError: event is not defined
  requestCardNonce()    payment:121
  onclick()    payment:1
  

• Form is submitted to the server with nonce = "" (empty string or NULL).

Answer 1

Unfortunately, we've published a bug in the documentation We're working on it. Firefox requires an event to be passed as an argument to the function, whereas chrome and safari don't. If you edit the definition of requestCardNonce that you copied from the example to instead be the following, it should work for you:

function requestCardNonce(event) {
  event.preventDefault();
  paymentForm.requestCardNonce();
}

Notice the event argument. That's the part you have to add. Sorry for the confusion. We'll fix the docs.

edited to include a current screenshot as of 2016-08-31 17:04:43. This is the location in the script where you need to add an event argument to the function definition, and then where you need to provide the event argument to the function call on the submit button.

Having added event in both places, using firefox, I've gotten the following with your test form: