Could not find a mounted element to create a payment method from

  • Resolved Sonjoe

    (@sonjoe)


    1 year, 5 months ago

    Hello,

    I installed this plugin and enabled Test Mode. The Test Mode connection test was successful. However, when I try to make a payment, I receive the following error message under the Credit/Debit Cards section:

    “Could not find a mounted element to create a payment method from.”

    I haven’t made any changes—everything is set to default as per the plugin installation. If I switch to a different payment form, I don’t get an error message, but the page simply refreshes without processing the payment.

    Inspect Element shows this:

    https://ibb.co/zVbqH6Rq

    At this point, the plugin doesn’t work for me in any way.

    Could you please help me resolve this? Thanks you

    • This topic was modified 1 year, 5 months ago by Sonjoe.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Clayton R

    (@mrclayton)

    1 year, 5 months ago

    Hi @sonjoe

     I don’t get an error message, but the page simply refreshes without processing the payment.

    That would indicate you have a Javascript error from a third party plugin that’s interfering with how WooCommerce processes the checkout form submit event.

    Can you please share a product page link to your site so it can be reviewed?

    Thanks

    Thread Starter Sonjoe

    (@sonjoe)

    1 year, 5 months ago

    Thanks for quick answer.

    I have installed the LearnPress plugin, with LearnPress Woocommerce add-on.

    Here is the link for test course/product: https://www.asai.sk/kurzy/lorem-ipsum-kurz-dolor-sit/

    It is still in Test Mode, so you can use Stripe test cards.

    Thanks

    • This reply was modified 1 year, 5 months ago by Sonjoe.
    Plugin Author Clayton R

    (@mrclayton)

    1 year, 5 months ago

    It looks like the updated_checkout event is not being propagated on your checkout page. WooCommerce triggers that event anytime the checkout page HTML is refreshed. For example, on page load, WooCommerce triggers update_checkout which causes a request to trigger that fetches the checkout page cart totals.

    Once that request completes, WooCommerce replaces the HTML and then triggers updated_checkout. The Stripe plugin uses that event to know when the credit card form needs to be re-mounted since the HTML replacement causes it to be removed.

    That’s why you see the card form briefly when you first load the page, then it disappears. Once you find the reason for the updated_checkout event not propagating, you will resolve the issue.

    The first thing I would check for is if you have a theme or a plugin that’s enqueueing its own version of jQuery. This type of behavior can happen if jQuery is being loaded more than once.

    • This reply was modified 1 year, 5 months ago by Clayton R.
    Thread Starter Sonjoe

    (@sonjoe)

    1 year, 5 months ago

    Thank you. I will dig deeper and try to resolve.

    Thread Starter Sonjoe

    (@sonjoe)

    1 year, 5 months ago

    It really looks like the issue is with jQuery. I’m loading my own version at the end of my custom theme, but WordPress loads its own in the header. When I disabled my jQuery, some parts of the website broke, but the payment still went through successfully. I tried removing the default WordPress jQuery load, but unfortunately, wp_dequeue_script('jquery'); didn’t work. I need to try a different approach.

    Thread Starter Sonjoe

    (@sonjoe)

    1 year, 5 months ago

    Fixed! Many thanks for the awesome and quick support. The issue was that jQuery was being loaded twice. I left the default WordPress jQuery and removed mine. Now everything works perfectly 🙂

    Plugin Author Clayton R

    (@mrclayton)

    1 year, 5 months ago

    You’re welcome. Good reviews are always appreciated.

    https://wordpress.org/support/plugin/woo-stripe-payment/reviews/

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Could not find a mounted element to create a payment method from’ is closed to new replies.