Concatenate scripts blocks WooCommerce Payments credit card fields with new checkout experience

[jacoswan]

Describe the bug

When Concatenate scripts checked and WooCommerce Payments are active, the latter's credit card fields do not render.

To Reproduce

1. Enable the Page Optimization plugin
2. Enable WooCommerce Payments
3. Enable the new WooCommerce Payments checkout experience
4. Add a product to the cart and head to the checkout page
5. Notice the blank space where the credit card fields should be

Expected behavior

Expected the credit card fields to render the same as when Concatenate scripts is disabled, like this:

When the new experience is not enabled, the integrated credit card field renders properly. The expectation would be for the credit card fields to continue rendering even if the new experience is enabled and Concatenate scripts are enabled.

Additional context

Found and reproduced on WPCOM Pro-plan sites, but uncertain if the issue is specific to this plan.

Internal ref 5756727-zen

SSR from test Pro-plan site

``` ### WordPress Environment ### WordPress address (URL): https://justanothertestsite.wpcomstaging.com Site address (URL): https://justanothertestsite.wpcomstaging.com WC Version: 7.1.0 REST API Version: ✔ 7.1.0 WC Blocks Version: ✔ 8.7.5 Action Scheduler Version: ✔ 3.4.0 Log Directory Writable: ✔ WP Version: 6.1.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.33 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 7.86.0 OpenSSL/1.1.1n SUHOSIN Installed: – MySQL Version: 5.5.5-10.4.25-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: 7.1.0 WC Database Prefix: wp_ Total Database Size: 4.74MB Database Data Size: 3.27MB Database Index Size: 1.47MB 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.09MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_options: Data: 1.09MB + Index: 0.06MB + Engine InnoDB wp_postmeta: Data: 1.23MB + Index: 0.03MB + 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_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 ### Post Type Counts ### amp_validated_url: 2 attachment: 18 customize_changeset: 4 jetpack_migration: 2 nav_menu_item: 2 page: 6 post: 2 product: 13 wp_global_styles: 1 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (6) ### Akismet Anti-Spam: by Automattic – 5.0.1 Gutenberg: by Gutenberg Team – 14.6.1 Jetpack: by Automattic – 11.6-beta Page Optimize: by Automattic – 0.5.2 WooCommerce Payments: by Automattic – 5.1.0 WooCommerce: by Automattic – 7.1.0 ### Inactive Plugins (6) ### AMP: by AMP Project Contributors – 2.3.0 Classic Editor: by WordPress Contributors – 1.6.2 Crowdsignal Forms: by Automattic – 1.6.6 Crowdsignal Polls & Ratings: by Automattic Inc. – 3.0.10 Layout Grid: by Automattic – 1.8.2 WordPress.com Editing Toolkit: by Automattic – 3.49493 ### 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: GBP (£) 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: – Enforce Approved Product Download Directories: – ### WC Pages ### Shop base: Automattic/page-optimize#7 - /shop/ Cart: Automattic/page-optimize#8 - /cart/ Checkout: Automattic/page-optimize#9 - /checkout/ My account: Automattic/page-optimize#10 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Storefront Version: 4.2.0 Author URL: https://woocommerce.com/ 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: – ### Subscriptions ### WCS_DEBUG: ✔ No Subscriptions Mode: ✔ Live Subscriptions Live URL: https://jcopro.wpcomstaging.com Subscription Statuses: – WooCommerce Account Connected: ❌ No ### Store Setup ### Country / State: United Kingdom (UK) ### Payment Gateway Support ### WooCommerce Payments: products refunds multiple_subscriptions subscription_cancellation subscription_payment_method_change_admin subscription_payment_method_change_customer subscription_payment_method_change subscription_reactivation subscription_suspension subscriptions gateway_scheduled_payments tokenization add_payment_method ### Admin ### Enabled Features: activity-panels analytics coupons customer-effort-score-tracks experimental-products-task experimental-import-products-task experimental-fashion-sample-products shipping-smart-defaults shipping-setting-tour homescreen marketing multichannel-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: minified-js new-product-management-experience settings Daily Cron: ✔ Next scheduled: 2022-12-01 15:37:57 +00:00 Options: ✔ Notes: 63 Onboarding: completed ### WooCommerce Payments ### Version: 5.1.0 Connected to WPCOM: Yes Blog ID: 207319259 Account ID: acct_1MA94PFkZmqIEBQ4 ### Action Scheduler ### Complete: 9 Oldest: 2022-12-01 09:27:57 +0000 Newest: 2022-12-01 09:30:28 +0000 Pending: 1 Oldest: 2022-12-02 09:27:57 +0000 Newest: 2022-12-02 09:27:57 +0000 ### Status report information ### Generated at: 2022-12-01 09:53:43 +00:00 ```

[joaodante]

Another one 5757555-zen

Jaco's workaround fixed the issue for this merchant.

[gabriel-fuentes]

Another one here: 5758129-zen

[foosantos]

5758267-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5756727-zen
• [ ] 5757555-zen
• [ ] 5758129-zen
• [ ] 5758267-zen
• [ ] 5761012-zen

[foosantos]

Internal ref: p1669938709237939-slack-C03TY6J1A

After checking this issue further, we can only reproduce it with sites on WPCOM. It was not possible to reproduce on Pressable or other WPORG installations. I had Automattic/page-optimize activated, tested with the same theme, and added the new WooCommerce Payments checkout experience.

[Mxchael]

Reported in 35922428-hc

[druesome]

38416418-hc

[roryWolf]

38401915-hc

[upwardmomentum84]

Reported in 38122494-hc

[jaxr]

Also in 5761012-zen

[tvolpert]

another one here:

• [ ] 38433352-hc

[dwainm]

Closing this since we've deployed a release that fixes this: WooCommerce payments version 5.1.2. This should be deployed to Atomic soon, but some clients may need to update manually.

[masperber]

Another report in 37588704-hc