Payment form validation breaks checkout error display

  • Resolved Chris Hardie

    (@chrishardie)


    2 years, 9 months ago

    We noticed recently that when someone pulls up our checkout form and submits it in a way that triggers a Square payment form validation error (e.g. “Enter a valid card number”), a Javascript error is triggered that breaks the checkout form and prevents WooCommerce checkout/cart validation from succeeding. The error is Unhandled Promise Rejection: ReferenceError: Can't find variable: wc_cart_fragments_params and comes from wc-square.min.js. If the payment information is property filled in, checkout/cart validation proceeds as expected.

    This happens with the latest version of the plugin as well as past versions back to at least 3.7.1, so we believe it may be because of a conflict introduced in some more recent version of the square payment form JS.

    I was able to reproduce the error on a vanilla installation of WordPress, with just WooCommerce, WooCommerce Square and a default theme with a simple product, all using the latest versions of everything. Hitting “Place Order” with an empty payment form triggers a Square validation error and breaks the page; no other input or user action is available after that and the checkout process is halted.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Igor H

    (@ihereira)

    2 years, 9 months ago

    Hello,

    Thank you for reaching out and providing a detailed explanation of the issue you are experiencing.

    From your description, it does appear that there may be a compatibility issue with the Square payment JS when a form validation error is triggered. I can confirm this is something that should not occur under normal circumstances.

    For better assistance, please provide us with the following:

    1. A screenshot of the console with the Javascript error.
    2. Please provide a copy of your System Status Report, found under WooCommerce > Status, on your site.

    Once we have this information, we can work on diagnosing the root cause of the problem and hopefully establish a solution.

    Looking forward to hearing from you.

    Thread Starter Chris Hardie

    (@chrishardie)

    2 years, 9 months ago

    Thanks for your reply. Here’s the screenshot:

    Here’s the system report:

    WordPress Environment

WordPress address (URL): https://deleteme.test
Site address (URL): https://deleteme.test
WC Version: 7.8.2
REST API Version: ✔ 7.8.2
WC Blocks Version: ✔ 10.2.4
Action Scheduler Version: ✔ 3.5.4
Log Directory Writable: ✔
WP Version: 6.2.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: nginx/1.25.0
PHP Version: 7.4.33
PHP Post Max Size: 512 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 8.1.2
(SecureTransport) OpenSSL/1.1.1u

SUHOSIN Installed: –
MySQL Version: 8.0.33
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ❌ wp_remote_post() failed. Contact your hosting provider.
Remote Get: ✔

Database

WC Database Version: 7.8.2
WC Database Prefix: wp_
Total Database Size: 7.22MB
Database Data Size: 5.73MB
Database Index Size: 1.49MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 3.05MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.19MB + Index: 0.06MB + Engine InnoDB
wp_posts: Data: 1.52MB + Index: 0.06MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.08MB + Index: 0.00MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_square_customers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB

Post Type Counts

attachment: 57
course: 1
job_listing: 1
page: 11
post: 58
product: 3
revision: 48
sensei_email: 19
wp_global_styles: 2

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

Active Plugins (8)

Query Monitor: by John Blackbourn – 3.12.3
Classic Editor: by WordPress Contributors – 1.6.3
FakerPress: by Gustavo Bordoni – 0.6.1
Jetpack: by Automattic – 12.1
Post Meta Inspector: by Daniel Bachhuber
Automattic – 1.1.1

WooCommerce Square: by WooCommerce – 4.0.0
WooCommerce: by Automattic – 7.8.2
Fieldmanager: by Alley – 1.5.0

Dropin Plugins (1)

db.php: Query Monitor Database Class (Drop-in)

Settings

API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature screen enabled: –
HPOS feature enabled: –
Order datastore: WC_Order_Data_Store_CPT
HPOS data sync enabled: –

WC Pages

Shop base: #6 - /shop/
Cart: #7 - /cart/
Checkout: #8 - /checkout/
My account: #9 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty
Version: 2.2
Author URL: https://wordpress.org/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –

Square

Environment: Production
Tokenization Enabled: –
Debug Mode: Off

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: core-profiler
minified-js
new-product-management-experience
product-variation-management
settings
async-product-editor-category-field

Daily Cron: ✔ Next scheduled: 2023-07-07 18:23:02 +00:00
Options: ✔
Notes: 99
Onboarding: skipped

Action Scheduler

Complete: 14
Oldest: 2023-07-05 20:23:52 +0000
Newest: 2023-07-05 20:35:05 +0000

Pending: 1
Oldest: 2023-07-06 20:21:55 +0000
Newest: 2023-07-06 20:21:55 +0000

Status report information

Generated at: 2023-07-06 19:02:59 +00:00
`
    Thread Starter Chris Hardie

    (@chrishardie)

    2 years, 9 months ago

    In case the screenshot via image embed via link approach doesn’t work, here’s a direct link: https://www.dropbox.com/scl/fi/kiwdu9i0erizlztd74i2l/console-checkout.png?rlkey=2x3mom9qp9opq8891db6grw6u&dl=0

    anastas10s

    (@anastas10s)

    2 years, 9 months ago

    Hi there @chrishardie 👋

    Thank you so much for reporting this! I was able to reproduce it, on a test installation of mine, and wanted to inform you that I filled a bug report about it.

    We appreciate you being an active part of the community 🙂

    Have a wonderful day!

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

The topic ‘Payment form validation breaks checkout error display’ is closed to new replies.