Multi-step checkout and removing payment methods

  • Resolved Payment Plugins

    (@mrclayton)


    3 years, 10 months ago

    Hi Theme Devs,

    I recently had a merchant reach out regarding several issues while using Woostify and my plugin Stripe for WooCommerce

    After doing some research I have discovered the issues are related to how Woostify creates a reference to ul.wc_payment_methods on page load and then removes the element from the DOM. This has the affect of breaking any event handlers that were referencing the original DOM node before it was removed. When Woostify detects it is the payment section, that html is inserted into the DOM.

    Here are the issues outlined in detail:

    1. The Stripe plugin relies on select2 to render saved payment methods for returning customers and the Woostify functionality is preventing the select2 drop down from working due to these orphaned events.

    2. Stripe relies on dynamically inserted iFrames. When Woostify removes the DOM element, the Stripe reference to the parent container is lost resulting in inconsistent behavior and error messages when customers attempt to place their order.

    Kind Regards,

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Dylan Ngo – Woostify

    (@duongancol)

    Hi! Can you give me the site URL to see that conflict?

    Thanks!

    Thread Starter Payment Plugins

    (@mrclayton)

    Hi @duongancol,

    I have setup a testing site where you can observe this conflict.

    1. Navigate to https://testing.paymentplugins.com/product/pullover/
    2. Add item to cart then proceed to checkout page
    3. Enter billing and shipping info then proceed to payment section
    4. Enter 4111 1111 1111 1111 for test card number. 202 for CVC. Exp any date in future
    5. Click place order, nothing will happen which indicates there is a JS error. In dev tools, check console logs and you will see IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

    That error is caused by the broken reference that occurs when Woostify removes the payment methods html then re-inserts it into the DOM in another location.

    Kind Regards,

    Thread Starter Payment Plugins

    (@mrclayton)

    Hi @duongancol,

    I reached out to your support email. I am investigating adding a MutationObserver to the plugin that detects when DOM elements are removed. That will allow the plugin to re-initialize key events.

    I am curious what your approach might be on the theme side.

    Kind Regards,

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @duongancol While I know you have the best of intentions, it’s forum policy that you not ask users for admin or server access. Users on the forums aren’t your customers, they’re your open source collaborators, and requesting that kind of access can put you and them at high risk.

    If they are paying customers (such as people who bought a premium service/product from you) then by all means, direct them to your official customer support system. But in all other cases, you need to help them here on the forums.

    Thankfully are other ways to get information you need:

    You get the idea.

    We know volunteer support is not easy, and this guideline can feel needlessly restrictive. It’s actually there to protect you as much as end users. Should their site be hacked or have any issues after you accessed it, you could be held legally liable for damages. In addition, it’s difficult for end users to know the difference between helpful developers and people with malicious intentions. Because of that, we rely on plugin developers and long-standing volunteers (like you) to help us and uphold this particular guideline.

    When you help users here and in public, you also help the next person with the same problem. They’ll be able to read the debugging and solution and educate themselves. That’s how we get the next generation of developers.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Multi-step checkout and removing payment methods’ is closed to new replies.