Card number field doubles keypress on Square Payment Form

A user has reported that when they type in their card number, it shows up twice. Here is a demo of this happening live https://imgur.com/a/atRiE0S .
They are using Edge browser86.0.622.63. I tried to replicate it but it works fine on my PC.

I am using Gatsby JS (react basically) on the front end. The script version is v2 (https://js.squareup.com/v2/paymentform). Here is some parts of my code:

This is some of the callbacks where I think the issue may lie:

inputEventReceived: (inputEvent) => {
switch (inputEvent.eventType) {
            case "focusClassAdded":
              break
            case "focusClassRemoved":
              break
            case "errorClassAdded":
              this.setState({
                msg: "Please fix card information errors before continuing.",
                showError: true,
                isSubmitted: false
              })
              break
            case "errorClassRemoved":
              this.setState({ showError: false, isSubmitted: false })
              break
            case "cardBrandChanged":
              if (inputEvent.cardBrand !== "unknown") {
                this.setState({
                  cardBrand: inputEvent.cardBrand,
                })
              } else {
                this.setState({
                  cardBrand: "",
                })
              }
              break
            case "postalCodeChanged":
              break
            default:
              break
          }
        },

        paymentFormLoaded: () => {
          this.paymentForm.setPostalCode(this.props.info.postcode)
          this.paymentForm.focus("cardNumber")
        },

Here is my render method:

render() {
  return (
<Col>
        <label htmlFor="sq-card-number">Card Number</label>
        <div className="form-control" id="sq-card-number" />
        <input type="hidden" id="card-nonce" name="nonce" />
        <label htmlFor="sq-expiration-date">Expiration Date</label>
        <div className="form-control" id="sq-expiration-date" />
        <label htmlFor="sq-cvv">CVV</label>
        <div className="form-control" id="sq-cvv" />
        <label htmlFor="sq-postal-code">Postal Code</label>{" "}
        <div className="form-control" id="sq-postal-code" />
      </Col>
)}

Hi @hassgt welcome to the forums!

Definitely the first I’ve seen of this! Do you have a public page where I can test this on an Edge browser? I’m not currently able to reproduce it on my side.

Same i cant reproduce it. Im thinking it could have been his laptop or Windows 10. He did confirm he wasn’t using any browser add-ons. He since has reinstalled the browser it is working fine. But he did mention to me that he did this two weeks ago and he reckons the issue will come back.

You can use https://development--hauk.netlify.app/lebanon-emergency. Press the add button at the top, then checkout when the basket appears. Then complete the form and hit go to payment. Thanks for getting back quick!

Abdul,

I replied but my post got caught up with Akismet spam. Heres me trying again but just with the link development–hauk.netlify.app

Thanks! I tested your payment form on Windows 10, Edge version 86 and do not see this behavior. Not sure how this is happening…could they try without and browser plugins if they have any? Or if they have a specific version of Edge, I can try testing with it directly.