JS error breaking checkout CC form (shortcode checkout) #3175

haszari · 2021-10-21T02:18:50Z

Describe the bug

With latest build of develop, the credit card form doesn't render on checkout. Looks like a JS error is halting JS and preventing the form from being rendered.

WCPay card form looks like this (with my current theme):

JS error Uncaught TypeError: Cannot read properties of undefined (reading 'addAction'):

This might be an issue with my build, I used these commands: npm install composer install npm run build:release

To Reproduce

Release build of WCPay, onboarded and set up as payment gateway.
Add something to cart.
View checkout.

Desktop (please complete the following information):

Reproduced on Safari, Chrome, Firefox on macOS.

Additional context

### WordPress Environment ###

WordPress address (URL): https://ephemeral-haszari-20211001.atomicsites.blog
Site address (URL): https://ephemeral-haszari-20211001.atomicsites.blog
WC Version: 5.8.0
REST API Version: ✔ 5.8.0
WC Blocks Version: ✔ 6.1.0
Action Scheduler Version: ✔ 3.3.0
WC Admin Version: ✔ 2.7.2
Log Directory Writable: ✔
WP Version: 5.8.1
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: ✔

### Server Environment ###

Server Info: nginx
PHP Version: 7.4.24
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 7.78.0
OpenSSL/1.1.1d

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.4.20-MariaDB-log
Max Upload Size: 2 GB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 5.8.0
WC Database Prefix: wp_
Total Database Size: 2.92MB
Database Data Size: 1.38MB
Database Index Size: 1.54MB
wp_woocommerce_sessions: Data: 0.05MB + 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.06MB + 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.05MB + Index: 0.13MB + 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.05MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.25MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.11MB + Index: 0.14MB + Engine InnoDB
wp_posts: Data: 0.06MB + Index: 0.06MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + 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_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + 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_meta_lookup: Data: 0.02MB + Index: 0.09MB + 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

### Post Type Counts ###

attachment: 5
customize_changeset: 3
nav_menu_item: 4
page: 8
post: 2
product: 3
revision: 1
shop_coupon: 1
shop_order: 14
shop_subscription: 8

### Security ###

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

### Active Plugins (8) ###

Akismet Anti-Spam: by Automattic – 4.2.1
Jetpack: by Automattic – 10.2.1
WooCommerce Blocks: by Automattic – 6.1.0
WooCommerce Beta Tester: by WooCommerce – 2.0.4
WooCommerce Payments Dev Tools: by Automattic –
WooCommerce Payments: by Automattic – 3.1.0
WooCommerce Subscriptions: by WooCommerce – 3.1.6
WooCommerce: by Automattic – 5.8.0

### Inactive Plugins (6) ###

CoBlocks: by GoDaddy – 2.18.0
Crowdsignal Forms: by Automattic – 1.5.9
Gutenberg: by Gutenberg Team – 11.7.1
Layout Grid: by Automattic – 1.7
Page Optimize: by Automattic – 0.5.1
WordPress.com Editing Toolkit: by Automattic – 3.17039

### Dropin Plugins (2) ###

advanced-cache.php: advanced-cache.php
object-cache.php: Memcached

### Must Use Plugins (1) ###

WP.com Site Helper: by  –

### Settings ###

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

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: –

### WC Pages ###

Shop base: #14 - /
Cart: #15 - /cart/
Checkout: #16 - /checkout/
My account: #17 - /my-account/
Terms and conditions: ❌ Page not set

### Theme ###

Name: Cafe Coffee Shop
Version: 1.4.7 (update to version 1.4.8 is available)
Author URL: https://www.vwthemes.com
Child Theme: ✔
Parent Theme Name: VW Bakery
Parent Theme Version: 0.8.7 – 0.8.8 is available
Parent Theme Author URL: https://www.vwthemes.com/
WooCommerce Support: ✔

### Templates ###

Overrides: vw-bakery/woocommerce/archive-product.php
vw-bakery/woocommerce/checkout/form-checkout.php
vw-bakery/woocommerce/global/wrapper-end.php
vw-bakery/woocommerce/global/wrapper-start.php
vw-bakery/woocommerce/single-product.php


### Subscriptions ###

WCS_DEBUG: ✔ No
Subscriptions Mode: ✔ Live
Subscriptions Live URL: https://ephemeral-haszari-20211001.atomicsites.blog
Subscription Statuses: wc-active: 3
wc-cancelled: 5

WooCommerce Account Connected: ❌ No
Report Cache Enabled: ✔ Yes
Cache Update Failures: ✔ 0 failure

### Store Setup ###

Country / State: New Zealand — Otago

### Subscriptions by Payment Gateway ###

WooCommerce Payments: wc-active: 3
wc-cancelled: 5


### Payment Gateway Support ###

WooCommerce Payments: products
refunds
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
subscription_amount_changes
subscription_date_changes
subscription_payment_method_change
subscription_payment_method_change_customer
subscription_payment_method_change_admin
multiple_subscriptions


### Action Scheduler ###

Complete: 90
Oldest: 2021-10-01 02:22:18 +0000
Newest: 2021-10-21 01:56:11 +0000

Pending: 4
Oldest: 2021-10-22 01:10:14 +0000
Newest: 2021-10-25 02:47:44 +0000


### Status report information ###

Generated at: 2021-10-21 02:23:13 +00:00

The text was updated successfully, but these errors were encountered:

haszari · 2021-10-21T02:23:08Z

Looks like that JS error is firing from payment request code

woocommerce-payments/client/payment-request/index.js

Lines 187 to 189 in f4f9491

    
           const doActionPaymentRequestAvailability = ( args ) => { 
        
           	doAction( 'wcpay.payment-request.availability', args ); 
        
           };

Though the issue seems to be that my site doesn't have wp.hooks defined. Maybe a dependencies issue?

htdat · 2021-10-21T08:42:29Z

The code in @haszari's screenshot is not from WooCommerce Payments. It's from Jetpack code instead:

				wc_enqueue_js(
					"
					// wcpay.payment-request.availability event gets fired twice.
					// make sure we push only one event.
					var cartItem_{$cart_item_key}_logged = false;
				    wp.hooks.addAction('wcpay.payment-request.availability', 'wcpay', function(args) {
				        if ( true === cartItem_{$cart_item_key}_logged ) {
				            return;
				        }
				        var properties = {$properties};
				        properties.express_checkout = args.paymentRequestType;
				        _wca.push(properties);
						cartItem_{$cart_item_key}_logged = true;	
				    });
				"
				);

It was added in this PR Automattic/jetpack#20812 cc @moon0326 as you are the author of this PR, and @haszari you're the reviewer :D.

htdat · 2021-10-21T08:56:32Z

This might be an issue with my build, I used these commands: npm install composer install npm run build:release

The proper way should be just npm run build (related convo p1632906135104700-slack-CGGCLBN58)

That said, I can not replicate this issue on my testing site with my build using npm run build.
Here is my build - 07606dc is the commit in develop I am using to build woocommerce-payments-develop-07606dc.zip

Here is my test site info 2a870-pb. Screenshot shows that CC field is showing OK:

NOTE: to have this script in the HTML source, there are a few conditions:

Jetpack is active on the site.
In wp-admin/admin.php?page=jetpack_modules, "WooCommerce Analytics" module is active.
Test the checkout as a guest or non-admin accounts. Otherwise, the relevant Jetpack module will not be loaded - src.

NEXT:

@haszari - can you provide your own build? It's OK to send me via Slack so that I can test it.
You may test my build too and see if getting the same issue?
@moon0326 - it would be nice if you can double check this also :D

haszari · 2021-10-21T20:56:36Z

Can no longer reproduce this. Not sure what happened, maybe caching or possibly a plugin has been auto-updated. Closing, thanks for investigating @moon0326 @htdat

haszari added the type: bug The issue is a confirmed bug. label Oct 21, 2021

haszari closed this as completed Oct 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS error breaking checkout CC form (shortcode checkout) #3175

JS error breaking checkout CC form (shortcode checkout) #3175

haszari commented Oct 21, 2021 •

edited

Loading

haszari commented Oct 21, 2021 •

edited

Loading

htdat commented Oct 21, 2021

htdat commented Oct 21, 2021 •

edited

Loading

haszari commented Oct 21, 2021

JS error breaking checkout CC form (shortcode checkout) #3175

JS error breaking checkout CC form (shortcode checkout) #3175

Comments

haszari commented Oct 21, 2021 • edited Loading

Describe the bug

To Reproduce

Desktop (please complete the following information):

Additional context

haszari commented Oct 21, 2021 • edited Loading

htdat commented Oct 21, 2021

htdat commented Oct 21, 2021 • edited Loading

haszari commented Oct 21, 2021

haszari commented Oct 21, 2021 •

edited

Loading

haszari commented Oct 21, 2021 •

edited

Loading

htdat commented Oct 21, 2021 •

edited

Loading