Compatibility with Fluid Checkout

  • Resolved Diego Versiani

    (@diegoversiani)


    1 year, 8 months ago

    Hi there,

    I’m Diego, developer of Fluid Checkout, a multi-step checkout plugin for WooCommerce available on the www.ads-software.com Directory:
    https://www.ads-software.com/plugins/fluid-checkout

    Some users are having issues with the PayPal buttons not working properly when using our plugin. Sometimes, and especially on mobile devices, the PayPal secure popup will not open or close suddenly after clicking the PayPal button to complete the payment.

    It seems to work all fine with the Express Checkout buttons for PayPal.

    After through analysis of the code, this problem seems related to the fact that our plugin replaces parts of the checkout page via AJAX calls (update_checkout event) whenever the customer leaves the page (window unload event), or changes the active browser tab or app on the phone (document visibilitychange event).

    These requests have the purpose to to save the information provided by the user and prevent them from accidentally losing it.

    When the PayPal popup window/tab is openend after clicking the button, this will trigger Fluid Checkout to refresh the checkout page parts while the main checkout page is in the background. If the checkout refresh happens before the PayPal window/tab is opened and loaded, the PayPal window will not open or will close suddenly because some part of the checkout page was refreshed and the PayPal script will abort.

    To fix this issue, we need to prevent Fluid Checkout from updating the checkout parts when the PayPal button is clicked and the secure popup is loading or is being used.

    We’ll make the necessary changes to our plugin, however, we are struggling with detecting when the PayPal buttons are clicked or the secure popup is closed.

    1. Is there a way to detect when the PayPal buttons have been clicked? A JS event perhaps?
    2. Also, how can we detect when the PayPal window has been closed?

    Our plans are to set the global JS variable window.can_update_checkout = false, which is used to permit checkout updates when the button is clicked, then reset it to the original value when the PayPal popup is closed for one reason or another (because the customer closed it, cancelled the PayPal payment, or because the payment was successful).

    Best,
    Diego.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    Hi @diegoversiani

    Thank you for your explanation of the issue. Anytime the html that the PayPal button is rendered in is replaced, the zoid library which PayPal relies on will close the PayPal popup window as you have observered.

    There isn’t currently an event that is triggered when the PayPal button is clicked or the popup is closed. We would need to add those events so that you could then hook into them and perform your required logic.

    Because jQuery is a dependency of WooCommerce and included on the checkout page, that’s probably the most logical library to use for triggering an event. We could do something like:

    1. When the PayPal button is clicked, trigger $(document.body).triggerHandler('wc_ppcp_button_clicked', [this])
    2. When the PayPal popup is closed: $(document.body).triggerHandler('wc_ppcp_popup_closed', [this])

    Where this is a reference to the Javascript payment method class.

    You can use our contact us for any internal discussion.

    Kind Regards,

    Thread Starter Diego Versiani

    (@diegoversiani)

    Hi @mrclayton,

    That sounds about right for what we need. I’ll contact you in through your contact page to continue the discussion.

    After we make all necessary changes to both plugins, we can update this topic so others can know about it ??

    Best,
    Diego.

    Thread Starter Diego Versiani

    (@diegoversiani)

    Hi @mrclayton,

    We’ve now released new version of Fluid Checkout which fixes this issue.

    Thanks for the fast response ??

    Best,
    Diego

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Compatibility with Fluid Checkout’ is closed to new replies.