IframeMessengerTimeoutError

Questions
1

We’re attempting to migrate from SqPaymentForm to the Web Payments SDK, but when we integrate on our site, the tokenize method never returns. I looked in the Chrome DevTools and see requests going out to /payments/error/api/3478832/store/. Below is the body of one of those.

{
    "exception": {
        "values": [
            {
                "type": "IframeMessengerTimeoutError",
                "value": "Messenger has not received an acknowledgement of message requestCardNonceIfValidForm with id 16403031968206105, no iframeID was set",
                "stacktrace": {
                    "frames": [
                        {
                            "colno": 56148,
                            "filename": "https://sandbox.web.squarecdn.com/v1/square.js",
                            "function": "r",
                            "in_app": true,
                            "lineno": 1
                        },
                        {
                            "colno": 372019,
                            "filename": "https://sandbox.web.squarecdn.com/v1/square.js",
                            "function": "?",
                            "in_app": true,
                            "lineno": 1
                        },
                        {
                            "colno": 371598,
                            "filename": "https://sandbox.web.squarecdn.com/v1/square.js",
                            "function": "lh.logMessengerTimeout",
                            "in_app": true,
                            "lineno": 1
                        }
                    ]
                },
                "mechanism": {
                    "handled": true,
                    "type": "generic"
                }
            }
        ]
    },
    "level": "error",
    "event_id": "bc32d923d1f84a1081a75d3c778af437",
    "platform": "javascript",
    "timestamp": 1640303212.84,
    "environment": "sandbox",
    "release": "[email protected]",
    "sdk": {
        "integrations": [
            "InboundFilters",
            "FunctionToString",
            "TryCatch",
            "Breadcrumbs",
            "GlobalHandlers",
            "LinkedErrors",
            "UserAgent"
        ],
        "name": "sentry.javascript.browser",
        "version": "6.13.3",
        "packages": [
            {
                "name": "npm:@sentry/browser",
                "version": "6.13.3"
            }
        ]
    },
    "tags": {
        "applicationId": "sandbox-sq0idb-8yI_j6W6BnxXPySfp_EiPA",
        "applicationUrl": "<snip>",
        "source": "web-payments-sdk-public",
        "version": "1.22.0",
        "avt": "ed15cf1f-74df-4482-a03a-d09c944e2c8a",
        "sessionId": "wMB8r3SxgSFOm_HIBRo4_MQ_GfgM51hL881AYX3qPI0leO8yhAJceOx7OqyN4MBXHBA7NCLSL_wVXDPA-mEA",
        "instanceId": "86346809-9acf-46c0-9c54-0ef58b3af847"
    },
    "user": {
        "id": "ed15cf1f-74df-4482-a03a-d09c944e2c8a"
    }
}```
2

:wave: Looking at the output I see that the error message is acknowledgement of requestCardNonceIfValidForm. The new Web Payments SDK doesn’t return a nonce. It returns a token. Here is the migration guide to the Web Payments SDK. :slightly_smiling_face:

3

Thanks Bryan, though requestCardNonceIfValidForm does not appear to be a part of our code, it is in https://sandbox.web.squarecdn.com/v1/square.js.

I made our payment form accessible on my development site here. Click the big red ‘Add new card’ button at the top of the contents and our “new CC form” will open and show the Square Web Payments form. Enter card details and click “Add this card” and you will see it hangs waiting for tokenize to return while the Network tab in Chrome Dev Tools will start showing the Square errors as a I posted above.

4

Do I need to be logged in? I don’t see the Add new card button.

5

Sorry, should be there now, setting got changed when I was testing other things.

6

Were you able to figure out the issue? I got the nonce back when I tested.

Screen Shot 2021-12-28 at 11.05.57 AM
Screen Shot 2021-12-28 at 11.05.57 AM1796×1096 187 KB

7

Thanks Bryan, though unfortunately I don’t get the same result. I had someone else on our team test and they didn’t get a token back either. He tried multiple browsers on Windows. I tried in Safari, Chrome, Firefox on my Mac as well as Safari on my iPhone (not connected to my network).

Screenshots (I tried uploading direct to this post, but then saving the post just hangs haha)

8

The only way I could get it to work was if I tabbed to the Add this card button and hit enter. If I clicked on it the information wouldn’t submit so something may but up with how it’s submitting.

9

Joel-D, any chance you got this problem resolved? I’ve been working with Square support for the last week over having this same issue - the tokenize call not returning in the hosted js web sdk - but have received no help on this issue up to this point. Bryan’s “trick” of using

If you’ve found a fix for it, or found out what application configuration errors were responsible, it would be an ENORMOUS help.

Thanks in advance.

10

I didn’t end up finding the cause of the issue yet and the move to the new Web Payments SDK got put on the back burner.
Some side effect of the JS on the page I’m sure, but didn’t have any luck tracking it down at the time.

11

Hello,

Try selecting the card-nonce URL instead of the sentry_key

nonce
nonce1654×687 91.4 KB

Thank you.

12

Our problem “resolved itself” with an upgrade to the “web sdk” square.js version (1.26.0 to 1.27.0) - the issue was with the tokenize method never returning to the calling script (so the token itself was never actually returned to the front-end like it should be). I happened to pull up one of the several non-working examples last tuesday evening in my off-time and, surprise surprise, it was suddenly working fine with no changes on my end. A quick check revealed the version bump in the square.js script.

Do check if that solved your issue as well - if so, it will be worth noting for support going forward if this breaks again in the future. After my experience, having no control over the web sdk version used for production worries me.

13

Interesting! Will have to pull up my branch where I started this migration and see how it goes. Appreciate the update!

14

any updates on this? :grinning: