x

SqPaymentForm Errors iFrame not allowed / Event unknown

I'm new to Square and trying to get their simple SqPaymentForm working under Tomcat / Eclipse / Firefox. I get the below load denied error when the form comes up. The iFrames seem to work as I can enter data in them and post it. However, I am receiving 2 errors.

 

Every time the form loads I get the following error. I have tried including the security filter settings in the default eclipse tomcat web.xml and also in the web app's web.xml. I've even tried turning off anti click jacking but that didn't work either.

Any suggestions would be appreciated...

 

Load denied by X-Frame-Options: https://connect.squareup.com/v2/logo.html?s=MY-ID does not permit cross-origin framing.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

    <filter>
        <filter-name>httpHeaderSecurity</filter-name>
        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
        <async-supported>true</async-supported>
        <init-param>
            <param-name>antiClickJackingEnabled</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>antiClickJackingOption</param-name>
            <param-value>SAMEORIGIN</param-value>
        </init-param>
        <init-param>
            <param-name>antiClickJackingUri</param-name>
            <param-value>https://connect.squareup.com</param-value>
        </init-param>
    </filter>

</web-app>

The 2nd error I get is:

TypeError: event is undefined
   requestCardNonce()
   TestSquare1.jsp:142
   onclick()

This error is generated from the payment form "event.preventDefault()":

// This function is called when a buyer clicks the Submit button on the webpage to charge their card.
function requestCardNonce(event)
{
    // This prevents the Submit button from submitting its associated form.
    // Instead, clicking the Submit button should tell the SqPaymentForm to generate
    // a card nonce, which the next line does.
    event.preventDefault();

    paymentForm.requestCardNonce();
}

 

 

Tags (2)
3,810 Views
Message 1 of 9
Report
8 REPLIES 8

Also I see this Error "Load denied by X-Frame-Options: https://connect.squareup.com/v2/logo.html?s=kfe8411b116bf8a112f4559e1af1527 does not permit cross-origin framing." in browser console. Can you please help resolving this issue?

 

3,812 Views
Message 2 of 9
Report
Square

Thanks for the heads up @zappullae and @syslotix. Let me check in with our developers on this and I'll update when I have more info. 

3,795 Views
Message 3 of 9
Report
Square

The fix for this error has been deployed! Let me know if you're still seeing it. 

3,769 Views
Message 4 of 9
Report

Yeah please let me know the fix. Thanks

3,765 Views
Message 5 of 9
Report
Square

@syslotix, check out the stack overflow page on the topic. Thanks!

3,762 Views
Message 6 of 9
Report

replace this line <input type="submit" onclick="requestCardNonce()"> with <input type="submit" onclick="requestCardNonce(event)"

This fix didn't work. Did you test this fix before posting it here ?

3,760 Views
Message 7 of 9
Report

Works for me.  Firfox

3,747 Views
Message 8 of 9
Report

Depends on which error you are refering to.  The X-Frame error has not been fixed but getting the nonce from the event call back has been fixed.

3,744 Views
Message 9 of 9
Report