Error from paymentform(js) / SqlPaymentForm

[CagriCaymaz]

Hi guys,

I've just started to learn square today and as usual I got error that I cannot fix 🙂

I am using angularJs and angular-ui-router in my project. And in my payment page didn't put form tag. I just added inputs. 

When a user hit the payment page, i am initializing SqlPaymentForm.

        function initialize() {

            fac.paymentForm = new SqPaymentForm({
                applicationId: fac.applicationId,
                inputClass: 'sq-input',
                cardNumber: {
                    elementId: 'sq-card-number'
                },
                cvv: {
                    elementId: 'sq-cvv'
                },
                expirationDate: {
                    elementId: 'sq-expiration-date'
                },
                postalCode: {
                    elementId: 'sq-postal-code'
                },
                callbacks: {
                    cardNonceResponseReceived: fac.cardNonceResponseReceived,
                    unsupportedBrowserDetected: fac.unsupportedBrowserDetected,
                    inputEventReceived: fac.inputEventReceived,
                    paymentFormLoaded: fac.paymentFormLoaded
                }
            });

        }

And when user click the process button, I call this

        function requestCardNonce(event) {

            fac.paymentForm.requestCardNonce();

        }

When I call requestCardNonce, I got this error 

vendor.js:23068TypeError: Cannot read property 'element' of undefined
at o.requestCardNonceIfValidForm (paymentform:1)
at o.requestCardNonce (paymentform:1)
at Object.requestCardNonce (app.js:12174)
at ProcessPaymentController.done (app.js:1000)
...

Error coming from paymentform(js)

        o.prototype.requestCardNonceIfValidForm = function() {
            this.iframeControllers.cardNumber.element.contentWindow.postMessage({
                eventName: "requestCardNonceIfValidForm"
            }, "*")
        }

After this.iframeControllers is empty. this.iframeControllers.cardNumber in undefined. 

And I have this in my main page;

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

When I look fac.paymentForm variable, I see this

fac.paymentForm.clientController.loadedIframes: Array[0]

AND

fac.paymentForm.clientController.iframeControllers = (IS EMPTY, Nothing in there)

I believe those are should be filled but IDK where am I going to focus for fixing this error?

I think it is really simple thing but I couldn't figure it out.

Thank you

Edit 1:

I can give you one more clue i think. 

I have created a page and added this sample (https://docs.connect.squareup.com/articles/adding-payment-form/)

I called this page in iframe. Works! All input boxes are created. BUT If I call SqlPaymentForm in timeout I got totally same result that I explained above. 

How I am going to use my own inputboxes and run in my own page?

[Tom]

Hey @CagriCaymaz — welcome to the seller community!

Great question. I don't have the solution for this at the moment, but I wanted to circle back and see how things were going with this. Please feel free to reply to this thread if you have any remaining questions and I'll escalate this for further review as soon as possible. 🙂

FYI — In the future, feel free to check out Square Connect's Stack Overflow page. It's been a great resource for our developer community, and there's already a ton of questions that have been answered there.