search

woocommerce / woocommerce-paypal-payments

https://wordpress.org/plugins/woocommerce-paypal-payments/
GNU General Public License v2.0
62 stars 47 forks source link

Elementor Checkout Widget & Paypal Payments combination causes only Paypal not to work with "zoid destroyed all components" (1885) #1949

Open FireRedDev opened 6 months ago

FireRedDev commented 6 months ago

Describe the Bug

Hello! I have switched my theme from OceanWP to Elementor Hello and also started to use the custom checkout with the elementor widget. The cart works, the checkout works with my other payment options but not paypal. The button takes a while to load, but what basically happens is that the paypal popup of the paypal page opens up in a new window and the loading spinner loads forever and my own site doesnt register the order. Before using this cart widget/Hello, i have not had this issue and paypal works just fine, my connection also works. These errors are in the console of my checkout site:

"Error: zoid destroyed all components
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:131290
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:35658
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:31862
    at Object.all (https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:35825)
    at Ko (https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:133871)
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:294839
    at vs (https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:294883)
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:297703
    at Array.forEach (<anonymous>)
    at Object.value (https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:297675)"

then

"Error: No ack for postMessage onInit() in https://www.paypal.com in 10000ms
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:92847
    at https://www.paypal.com/sdk/js?client-id=AQRU_37kCY0o1N39MriacQuhJUJ-rRohRY04qZmR50ZSt5K-zYmKCW0OHzRf_OivlD51-D8uRZdTEnuV&currency=EUR&integration-date=2023-12-18&components=buttons,funding-eligibility&vault=false&commit=true&intent=capture&disable-funding=card,sepa,bancontact,blik,eps,giropay,ideal,mercadopago,mybank,p24,sofort,venmo,paylater&enable-funding=venmo:3:33274"

What happens is that the button either loads with a circle forever, or a paypal popup opens where the spinner also opens forever in a new tab. Interestingly, every like 6th attempt, it seems to work correctly. I cant tell if its you guys or the Elementor team, but something both of you are doing is not compatible. Other github issues seemed to suggest its because the paypal script/the button is loaded wrong/twice.

To Reproduce

Use Elementor Hello and the Elementor Checkout Widget as a replacement of the default woocommerce checkout. Try to buy a product in checkout and use Paypal. Do it at least twice with the same cache/tab, sometimes it only happens on the second attempt to do so.

Try out

You can see the issue on my site wear-together.at/checkout

Expected Behavior

Payment works

Environment

WooCommerce-Version: |   | 7.9.0 -- | -- | -- WooCommerce REST API-Paket: |   | 7.9.0 /home/runcloud/webapps/woocommerceshop/wp-content/plugins/woocommerce/includes WooCommerce Blocks-Paket: |   | 10.4.6 /home/runcloud/webapps/woocommerceshop/wp-content/plugins/woocommerce/packages/woocommerce-blocks/ Aktionsplaner-Paket: |   | 3.6.1 /home/runcloud/webapps/woocommerceshop/wp-content/plugins/woocommerce/packages/action-scheduler Log-Verzeichnis beschreibbar: |   | /home/runcloud/webapps/woocommerceshop/wp-content/uploads/wc-logs/ WordPress-Version: |   | 6.2.3 - Es ist eine neuere Version von WordPress verfügbar (6.4.2) WordPress Multisite: |   | – WordPress Speicherlimit: |   | 512 MB Elementor Version 3.18.3 Woocommerce Paypal Payments 2.4.3
InpsydeNiklas commented 6 months ago

Hi @FireRedDev, thanks for the report. The Elementor Checkout Widget is not supported at this time, so the PayPal smart buttons may not load on this page. However, the button does appear to be working on the mentioned site despite it seemingly using the widget. In any case, for the best possible checkout compatibility, we recommend using either the Checkout or Classic Checkout blocks or creating a shortcode with [woocommerce_checkout].