I am not sure how to work through the current problem I am having migrating from the old sqpaymentform to the new web-payments.
We have two applications that require the migration. I did the first one on our internal application for taking payments, and that has been working just great! Now I am migrating our ecommerce website to use the new web-payments form. It seems I have made the same changes that were required in my first application. The payment form displays and operates as expected, but pressing the “payment” button does nothing. When I look in the console on Chrome, I have the following error:
data.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'css')
at data.js:15:19228
at f (storefront.js.php?tct=609632001647534768&no_comments=1:140:8250)
at storefront.js.php?tct=609632001647534768&no_comments=1:140:8406
at b (data.js:15:19444)
at h (data.js:15:16928)
at e.exports (data.js:15:19925)
at Object.<anonymous> (data.js:15:13532)
at r (data.js:1:110)
at Object.<anonymous> (data.js:15:11510)
at r (data.js:1:110)
at Object.<anonymous> (data.js:15:8428)
at r (data.js:1:110)
at Object.<anonymous> (data.js:15:4359)
at r (data.js:1:110)
at Object.<anonymous> (data.js:10:17768)
at r (data.js:1:110)
at Object.<anonymous> (data.js:10:17010)
at r (data.js:1:110)
at data.js:1:902
at data.js:1:912
I see that data.js is included in the script file coming from https://web.squarecdn.com/v1/square.js. My initial guess is something there is conflicting with my shopping cart software. I am hoping someone can guide me to what I should look for in my code, or suggest what additional information or tests I could run to narrow down my problem.
Thanks for any help. July is coming quick!
What’s the application ID you’re using? Also did you make any changes to the css? That looks to be what it’s complaining about. 
Application ID: sq0idp-npnuJDxSxOQqxMY9jlgTiQ
In my first migration I did not link in the default .css file. That app is very simple and has no .css files. And the Square form worked great without including the default .css file.
This integration I tried it with no .css file, and then with the default .css. The error happens in both cases. The ecommerce software does have a bunch of .css files, and includes a number of .js scripts as well. My fear is something there is conflicting…
Hmm… There is a production version of jQuery loaded by the eCommerce software (Squirrelcart). Could that be a source of conflict?
I have narrowed down the conflict to data.js and the MooTools JS Library used in my eCommerce software. With MooTools removed, Squares data.js loads and operates just fine. But I get the TypeError when I add MooTools back in (both Core and More are used, version 1.2.5). Unfortunately, I need the MooTools library for my eCommerce software to operate properly.
I am lowering the “urgency” on this problem. It turns out the TypeError was not related to the unresponsive payment button. I managed to not include the “div” for the “payment-status-container” in the eCommerce page, and that is what stopped the button from working. Thanks for your patience as I worked through my problem.
The TypeError is still present, but does not seem to have an adverse effect on the page. It turns out the TypeError is also present in our current version that uses the old sqPaymentForm, and that has been working fine for years.
A bit more info for anyone who decides to tackle the TypeError problem: I upgraded MooTools to the most recent version, 1.6. The problem goes away if I don’t add the compatibility layer, but my software needs the compatibility layer. So the conflict causing the TypeError is related to the compatibility layer in MooTools. A project for another day…
It’s very possible that there is some conflict with your eCommerce software since your not seeing this behavior with any of your other migrations to the Web Payments SDK.