Error “PaymentMethodNotAttachedError: requestCardNonceIfValidForm”

  • Resolved mrfedor

    (@mrfedor)


    1 year, 5 months ago

    Hello!

    We use your plugin on one of our projects. Recently, using mouseflow, we noticed that when the user clicks on the “Place Order” button, nothing happens. Manual tests revealed that this happens when the user has a slow Internet connection. The following error is displayed in the browser console:

    PaymentMethodNotAttachedError: requestCardNonceIfValidForm has not been attached to the page

    When trying to pay, no errors are displayed in the browser, although the form for entering card data is displayed. Also, the order in woo is not created.

    What can be done in this situation and how to handle this error?

    This is not a widespread situation, but it is very important.
    We lose 1-2 orders per day because of this error, as users leave the site.

    • This topic was modified 1 year, 5 months ago by mrfedor.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Reynier (a11n)

    (@reynierc)

    1 year, 5 months ago

    Hi @mrfedor ,

    Thanks for reaching out and I’m sorry to hear about the trouble during the checkout process. This issue often occurs when the payment gateway script doesn’t load correctly, which might be more noticeable on slower internet connections.

    For the PaymentMethodNotAttachedError, check if your Square plugin is up to date and check for conflicts with other plugins or your theme by testing with just Square and WooCommerce active.

    To help users on slow internet, you might want to add a loading message or icon when they click “Place Order”. It tells them to wait and not click again.

    If issues continue, kindly send us the system status report so I could take a look at your site’s build further to see if I could find other possible reasons why this occurs. You can find this via WooCommerce → Status. Select Get system report and then Copy for Support.

    Thread Starter mrfedor

    (@mrfedor)

    1 year, 5 months ago

    Thank you for your reply. This issue is not widespread, but we have 1-2 users per day who are unable to make a purchase due to this error. And they leave our site, which has a negative impact on our site.

    This error is difficult to reproduce (I only managed to do it 2 times). The Square plugin is updated, there are no conflicts with other plugins.

    When placing an order, we display a message and a loading icon. But with PaymentMethodNotAttachedError, when clicking on the button, nothing happens (classes are not added to blocks, the order is not created, etc.), only the error is displayed in the console.

    How can we handle this error on our side or how can we ask the user to reload the page in such a situation?

    Thread Starter mrfedor

    (@mrfedor)

    1 year, 5 months ago

    Regarding the “system report”. For the security of our site, I do not want to share this data in an open forum.

    Zee

    (@doublezed2)

    1 year, 4 months ago

    Hello mrfedor,

    Thank you for your reply.

    The error PaymentMethodNotAttachedError appears when a method is called on a payment method before it is attached to a page HTML DOM element. This could be caused by a slow internet connection.

    This is a public forum, and the information you share is publicly available.
    You may use https://quickforget.com to share the report.
    This way it can be removed from the internet after some time.

    Looking forward to your response. 🙂

    Thread Starter mrfedor

    (@mrfedor)

    1 year, 4 months ago

    Thank you for your reply.
    Unfortunately, we cannot influence the user’s internet connection.
    How can we influence the operation of Square scripts so that they are executed consistently and correctly in order to avoid such errors?

    Jonayed (woo-hc)

    (@jonayedhosen)

    1 year, 4 months ago

    Hi @mrfedor ,

    I’m sorry to hear about the issue you’re encountering with the PaymentMethodNotAttachedError: requestCardNonceIfValidForm has not been attached to the page. This error is often caused by a timing issue where the Square payment form is not fully initialized before a user places an order. Slow internet connections can make this issue more likely, as scripts or dependencies might not load in time.

    Here are some steps you can take to address this issue:

    • Optimize Scripts and Stylesheets: Minimize and combine scripts/stylesheets, and use a Content Delivery Network (CDN) for faster delivery.
    • Implement Lazy Loading: Load non-essential resources after critical elements.
    • Prioritize Square Scripts: Ensure Square’s scripts load early without blocking other resources. Consider using the LiteSpeed Cache plugin to preload and optimize these scripts.
    • Improve Hosting Performance: Upgrade to a VPS or dedicated server if you’re currently on shared hosting, as slower servers can delay script execution.
    • Database Optimization: Remove unused WooCommerce tables and plugins, then optimize your database using tools like WP-Optimize.
    • Upgrade PHP: Update to PHP 8 or higher for better performance and compatibility.
    • Queue Tasks: Use WP Cron to manage payment tasks asynchronously, reducing the risk of timing issues during checkout. A plugin like WP Crontrol can help you manage and debug scheduled tasks effectively.

    Some of these solutions may require advanced technical expertise or custom coding. While we focus on supporting core plugin functionality, we recommend reaching out to professionals for customizations:

    • Codeable.io: A platform with vetted developers who specialize in WooCommerce customizations.
    • WooExperts: Connect with developers experienced in handling complex setups and performance optimizations.

    Once you’ve applied the fixes, you can test their effectiveness by following these steps:

    1. Open Developer Tools in your browser.
    2. Navigate to the Network tab.
    3. Set throttling to “Slow 3G” to simulate a slower connection.
    4. Test the behavior of your site and confirm that the issue is resolved.

    I hope this helps.

    Thread Starter mrfedor

    (@mrfedor)

    1 year, 4 months ago

    Thank you for your reply. Our site is optimized. We use a dedicated optimized server, unnecessary js-scripts are disabled on the site. The page loads well for a user with a slow Internet connection.
    We do not consider LiteSpeed ​​Cache as a solution, since we had a negative experience with its work.
    In any case, caching the checkout page is a very bad practice.
    PHP version has been updated to 8, the database has been optimized.

    1. How can I speed up the loading of your scripts? Add dns-prefetch for web.squarecdn.com ?
    2. Please explain, the form for entering a Square card is created on the page using your js-script. Then your script attaches an event to this form to process data from it. It turns out that your script attaches an event to a form that has not yet appeared? The user cannot complete the order until he pays for it, then how can the order be created? How can we influence the order of execution of the scripts of your plugin? Or at least handle the error of your scripts and display informational messages to the user about Square problems with a suggestion to reload the page?
    Zee

    (@doublezed2)

    1 year, 4 months ago

    Hello mrfedor,

    Thank you for your detailed reply.

    You may try the dns-prefetch method but I do not recommend making any changes to the WooCommerce Square plugin.

    To help you further, It would be helpful to review your site’s System Status Report.
    Could you please send me a copy of your site’s System Status Report via https://quickforget.com?
    This will help me recreate the issue on my test site and check what is happening at the back end.

    Looking forward to your response. 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Error “PaymentMethodNotAttachedError: requestCardNonceIfValidForm”’ is closed to new replies.