Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handling of Stripe JS with GDPR & minifier plugins #9709

Open
frosso opened this issue Nov 13, 2024 · 1 comment
Open

Handling of Stripe JS with GDPR & minifier plugins #9709

frosso opened this issue Nov 13, 2024 · 1 comment
Assignees
Labels
focus: checkout payments priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue is a confirmed bug.

Comments

@frosso
Copy link
Contributor

frosso commented Nov 13, 2024

Describe the bug

The checkout button is missing in mobile view on the WooCommerce site when using WooPayments with the Cookiebot plugin enabled. The issue appears to stem from the Cookiebot plugin altering the loading behavior of the Stripe JavaScript. Specifically, Cookiebot changes the <script> type of Stripe’s script from text/javascript to text/plain due to cookie consent settings, which prevents Stripe from loading correctly, thereby causing WooPayments elements not to display on checkout.

To Reproduce

  1. Enable the Cookiebot plugin (for example)
  2. Go to the WooCommerce checkout page
  3. Check if the WooPayments checkout button and Stripe elements are visible.
  4. Open the browser console to observe errors.

Actual behavior

In mobile view, the checkout button is missing on the WooCommerce checkout page. The console displays the following error:

blocks-checkout.js?ver=8.2.2:2 Uncaught (in promise) Error: Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`.

Additionally, attempting to manually initialize Stripe in the console returns:

ReferenceError: Stripe is not defined

Inspecting the page source reveals that the Stripe script is enqueued with type="text/plain" instead of type="text/javascript", likely due to Cookiebot’s handling of cookie consent.
https://plugins.trac.wordpress.org/browser/cookiebot/trunk/src/lib/helper.php#L151

Expected behavior

The WooPayments checkout button and Stripe payment fields should load and be fully functional on the checkout page in mobile view, without requiring additional manual actions. The Stripe JavaScript should load without interference from Cookiebot

Additional context

Potential solution ideas include leveraging JavaScript Proxies to detect when Stripe is added to the window object and then triggering the initialization of WooPayments.

p1727770367173279-slack-CGGCLBN58
p1722007079535099-slack-CU6SYV31A

@frosso frosso added the type: bug The issue is a confirmed bug. label Nov 13, 2024
@pierorocca pierorocca added the priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. label Nov 14, 2024
@danielmx-dev danielmx-dev self-assigned this Nov 15, 2024
@danielmx-dev
Copy link
Contributor

Please add your planning poker estimate with Zenhub @FangedParakeet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
focus: checkout payments priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue is a confirmed bug.
Projects
None yet
Development

No branches or pull requests

4 participants